VUE双向绑定原理

Posted 2020-11-27 psy-fei

VUE双向绑定：Vue内部通过 Object.definePreperty() 方法属性拦截的方式，把 date 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新。

Object.definePreperty( obj, prop, { }) : 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象.

　　obj：对象名

　　prop： 属性名

　　第三个变量 ｛｝：可选get键值，读取该prop属性，则调用getter方法（返回值为prop属性值）；可选set键值，更改该prop属性，则调用setter方法（接受一个参数，为prop值）。

 

computed计算属性

（1）仅读取。默认是get方法。

1 computed: {
2     a: function() {
3         return this.data + 1;
4     }
5 }

（2）读取和设置。

 1 computed: {
 2     a: {
 3         get: function () {
 4             return this.b + 1;
 5         },
 6         set: function (val) {
 7             this.b = val - 1;
 8         }
 9     }
10 }