vue双向数据绑定原理?

419 阅读1分钟

1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

2.核心:关于VUE双向数据绑定,其核心是Object.defineProperty()方法;

3.介绍一下Object.defineProperty()方法 (1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法) (2)简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

当我们调用时候,就会自动打印出两行文字。

注意:get 和 set 方法内部的 this 都指向 obj,这意味着 get 和 set 函数可以操作对象内部的值。另外,访问器属性的会”覆盖”同名的普通属性,因为访问器属性会被优先访问,与其同名的普通属性则会被忽略。

个人总结

vue.js是采用数据劫持结合发布者+订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布信息给订阅者,触发相应的监听回调。