1，vue data 为什么是一个函数
答：data是一个对象的话，我们用时，它的指向都是一个地方，所以会出现数据污染，但是返回data函数时，都会开辟一个新的内存空间，不会造成数据污染。
防止数据进行污染，每注册一个组件，就相当于返回一个组件私有的data，不会进行数据污染
2，vue v-model运行原理
双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件
image.png
其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图
image.png
订阅者模式：每一个{{name}} v-model=‘name’都会添加一个订阅者，从而监听不同部分的变化，每一部分变化时都会循环触发相应的订阅者，更新到页面中。
3，vue 添加了新数据，为什么视图不更新？
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 $set 方法，新添加的属性值会被Vue监听到并且同步渲染到页面上
3，vue 添加数据，视图不更新
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
用 $set 方法，新添加的属性值会被Vue监听到并且同步渲染到页面上
4，this.$nextick() 原理
Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。
1，修改 Vue 中的 Data 时，就会触发所有和这个 Data 相关的 Watcher 进行更新。
2，首先，会将所有的 Watcher 加入事件队列。
3，然后，调用 nextTick 方法，执行异步任务。
4，在异步任务的回调中，对事件中的 Watcher 进行排序，然后执行对应的 DOM 更新。
网友评论