php 双向绑定的原理,vue双向绑定的原理是什么？vue双向绑定的原理实现

本篇文章给大家带来的内容是关于vue双向绑定的原理是什么？vue双向绑定的原理实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

先上效果图

简单的实现数据的双向绑定

首先来了解一个东西：Object.defineProperty()https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

这里是MDN对这个的详细说明

简单点说：

这个方法可以修改现有对象属性的值

Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：定义属性的对象

prop：修改的属性

descriptor:修改的属性描述符

这边只挑最简单的说，

get:

官方：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象(由于继承关系，这里的this并不一定是定义该属性的对象)。默认为 undefined。

**简单的说：当你需要取对象的属性值时，就是来调用这个函数，取到值的**

set：

官方：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

**简单的说：当你需要设置(改变)对象的属性值时，就是来调用这个函数，达到修改的**

接下来上代码

var data = {};

var dom_aa = document.getElementById("aa")

function changedata(value){

data.a = value

}

//直接使用Object.defineProperty里面的set方法进行视图改变

Object.defineProperty(data,"a",{

set:function(newValue){

dom_aa.innerHTML = newValue;

},

get:function(){

return a;

}

})

相关推荐：