Vue技术

彻底理解vue双向数据绑定

2021-04-06  本文已影响0人  程序小小黑

原理

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

2.核心:Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 -- 来自MDN

语法:Object.defineProperty(obj, prop, descriptor)

参数:
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol
descriptor:要定义或修改的属性描述符。

简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

let obj = {}
Object.defineProperty(obj,'test',{
  get:function(){
        console.log('调用get方法')
   },
 set:function(newVal){
        console.log('调用set方法,新值为:'+newVal)
   }
})
obj.test; // '调用get方法'
obj.test='我们都是打工人' // 调用set方法,新值为:我们都是打工人

简单实现双向数据绑定

双向数据绑定
上一篇下一篇

猜你喜欢

热点阅读