谈谈vue双向数据绑定问题

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部