我们使用过vue都知道,vue的数据是双向绑定的,Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。典型的例子就是v-model。
其中,View 变化更新 Data ,可以通过事件监听的方式来实现,所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。于是乎:
问vue实现双向绑定,拢共分几步?
分四步:
- 第一步实现事件监听Observe:通过Object.defineProperty()对对象的属性遍历,包括子对象的属性,为他们添加getter/setter,这样在他们数据改变的时候就可以触发setter操作了
- 第二步实现对模板的编译Compile:将模板中的变量都转化成数据,渲染到页面上,给每个指令对应的节点绑定一个更新函数,添加监听数据的订阅者,利用订阅者进行更新。
- 第三步实现一个订阅者Watcher,Watcher作为Observe和Compile之间沟通的桥梁,订阅 Observer 中的属性值变化的消息,只要有数据改变,Watcher就是通知Compile触发更新函数将对应值更新
- 第四步实现一个订阅器Dep:Dep采用的模式是:发布 — 订阅 ,对所有的Watcher进行收集,然后对Wacher和Observe统一管理。
以上是对某个属性的更新,那么对整个对象和数组又是如何处理呢?
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
对于对象
由于vue在初始化的时候,都会对属性执行getter setter转化,所以我们必须把属性写在data
对象中,才能将他转化为响应式的。
对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式属性。例如,对于:
Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set
实例方法,这也是全局 Vue.set 方法的别名。
我们来具体操作一下,假如现在的页面是这样的