谈谈vue双向数据绑定问题

vue

  vue是MVVM模型,vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时,则会调用getter方法,当data中的属性被改变时,则会调用setter方法。

视图和数据变化绑定原理

对于一个html页面

<div>

<p>你好,<span id='nickName'></span></p>

<div ></div>

</div>    

设置一个数据的属性的getter和setter

//视图控制器

var userInfo = {};

Object.defineProperty(userInfo, "nickName", {

get: function(){

return document.getElementById('nickName').innerHTML;

},

set: function(nick){

document.getElementById('nickName').innerHTML = nick;

}

});

vue.js的数据变动原理

但是,这个例子只是数据和dom节点的绑定,而vue.js更为复杂一点,它在网页dom和accessor之间会有两层,一层是Wacher,一层是Directive,比如以下代码。

var a = { b: 1 }

var vm = new Vue({

  data: data

})

把一个普通对象(a={b:1})传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用Object.defineProperty 将它们转为 getter/setter,如图绿色的部分所示。

每次用户更改data里的数据的时候,比如a.b =1,setter就会重新通知Watcher进行变动,Watcher再通知Directive对dom节点进行更改。

看这个图就可以知道watcher就是个中介,负责收集依赖以及setter通知它更新页面dom.

以上是 谈谈vue双向数据绑定问题 的全部内容, 来源链接: utcz.com/z/380361.html

回到顶部