[JavaScript知识库]vue双向绑定的原理与原生写法

vue的双向绑定是什么？

vue的模式是数据劫持和订阅发布模式，当数据劫持到数据的时候会触发git或者set这两个中的一个，这个时候watch监听到改变数据或者增加数据，向组件发出请求，更新视图。

原生写法

//1.创建一个对象
let a={
    a1:'123'
}
let a2=''

Object.defineProperty(obj,a2{
get(){
    console.log('被读取')
return mxg
},
set(value){
//my绑定的id
my.innerText = value
console.log('被设置')
a2 = value
}
})
console.log(obj.a2)
obj.a2=100
console.log(obj)
function fn(that){
obj.mxg = that.value
}

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

obj：?必需。目标对象；
prop：?必需。需定义或修改的属性的名字；
descriptor：?必需。目标属性所拥有的特性；

返回值：

传入函数的对象，即第一个参数obj；

HTML部分：“

 <div id="my"></div>
    
    <input type="text" oninput="fn(this)">