1. Vue的双向绑定数据的原理
- vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式
- 通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调
2. 单向数据流和双向数据绑定
- 单向数据流：
定义：数据流是单向的，数据流动方向可以跟踪。
缺点：如果想让UI发生变更就必须创建各种 action 来维护对应的 state - 双向数据绑定：
定义：数据之间是相通的，将数据变更的操作隐藏在框架内部
优点：是在表单交互较多的场景下，会简化大量与业务无关的代码
缺点：就是无法追踪局部状态的变化，增加了出错时 debug 的难度
3.Vue生命周期函数
- beforeCreate() 在实例创建前执行，数据未加载状态
- created() 在实例创建后，能初始化数据，dom渲染之前执行
- beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
- mounted() 页面、数据渲染完成，真实dom挂载完成
- beforeUpadate() 重新渲染之前触发
- updated() 数据更新完成，dom 重新 render 完成,更改数据会陷入死循环
- beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行
4. v-if 和 v-show 区别
- 使用 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。
- v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏
5.NextTick 作用
- nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
具体可参考官方文档 深入响应式原理
6. Vue 单页面应用的优缺点
优点： 良好的交互体验，良好的前后端工作分离模式，减轻服务器压力
缺点：SEO难度较高，前进、后退管理，初次加载耗时多
7. Vue 自定义指令
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
参考 官方文档-自定义指令
8. 对 keep-alive 的了解
-
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
<keep-alive>
<component>
<!-- 该组件将被缓存！ -->
</component>
</keep-alive>
- 可以使用API提供的
props，实现组件的动态缓存
具体参考 官方API
