vue.js采用了数据劫持与发布者-订户模型相结合的方式(Object.defineProperty ) ),在每个属性的setter,getter
实现vue双向数据绑定的原理是:对象使用Object.defineProperty ()的方法获取属性值(get ),属性值(set ) ) 它接收三个参数、要操作的对象、要定义或修改的对象属性名称和属性描述符。 点是最后一个属性描述符。 属性描述符是对象,主要有两种形式:数据描述符和访问描述符。 这两个对象只能选择一个对象使用,不能同时使用两个描述符的属性。 上述get和set是属于访问描述符对象的属性。 面试时怎么应对? 面试官:请告诉我VUE双向绑定的原理? a ) VUE实现双向数据绑定的原理是通过使用名为Object.defineProperty ) )的方法,重新定义对象获取属性值(get )并设置属性值(set )的操作来实现的代码演示:定义属性用法var obj={ }; var name;//第一个参数:定义属性的对象。//第二个参数:要定义或修改的属性的名称。//第三个参数:要定义或修改的属性描述符。
对象. define property (obj,' data ),
获取//值
get :功能(
{ return name; (,
//设定值
set :功能(val ) {
name=val; 控制台. log (val ) } )
//赋值调用
setobj.data='aaa ';
//取值调用
获取控制台. log (obj.data );
代码演示:定义属性双向绑定var obj={}; object.defineproperty(obj,' val ',{set:function ) newval ) document.getelementbyid ) ' a ' ).value=newval ' document.getelementbyid('b ' ).innerHTML=newVal==undefined? ' ' :newVal; (); document.getelementbyid(a ).addeventlistener )、function (e ) e ) {obj.val=e.target.value; () )