Vue题目总结

v-model实现原理

1.v-bind 绑定响应式数据2. 触发oninput 事件并传递数据

Vue2.0 双向绑定的缺陷

1.vue 实例创建后，无法检测到对象属性的新增或删除，只能追踪到数据是否被修改
解决方案：改变get和set, 新增属性的时候，可以给子响应对象重新赋值
2. 不能监听数组的变化
解决方案：重写Array.prototype对应的方法

组件传值，事件总线是怎么用的

新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件

Vue生命周期

1. 总体来说：初始化、运行中、销毁
2. 详细来说：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁

vue生命周期中异步加载在哪里实现

最常用的是在created 钩子函数中调用异步请求，因为在 created 钩子函数中能更快获取到服务端数据，减少页面 loading 时间

缓存

Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点

既然函数是引用类型，为什么 vue 的 data 还是可以用函数

函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响

列表为什么加 key

因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

双向数据绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

虚拟DOM，它有什么好处

虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制

响应式原理

1、Object.defineProperty - get ，用于 依赖收集
2、Object.defineProperty - set，用于 依赖更新
3、每个 data 声明的属性，都拥有一个的专属依赖收集器 subs
4、依赖收集器 subs 保存的依赖是 watcher
5、watcher 可用于 进行视图更新