当前位置: 首页 > Web前端 > vue.js

Vue的双向数据绑定原理_0

时间:2023-03-31 17:27:45 vue.js

1。属性类型对象属性分为两种类型:数据属性和访问器属性。每种类型的财产都有自己的特殊展示。双向绑定的原理是根据其accessor属性的特性实现的。1.1数据属性的特性数据属性有四个描述其行为的特性1.可配置的:是否可以通过delete删除,是否可以修改其属性特性,是否可以作为accessor属性进行修改。默认值为true2、Enumerable:属性是否可以通过forin循环返回改变3、Writable:属性值是否可以修改4、Value:属性值要修改数据属性的默认特性,你需要用到Object.defineProperty()方法varperson={}Object.defineProperty(person,"name",{writable:false;value:'Nicholas';})1.2Accessor属性特性1.Configurable:是否可以deleted2.Enumerable:是否可以循环回属性3.Get:读取属性时调用的函数。默认值为undefind4,Set:写入属性时调用的函数。访问器属性不能直接定义,它们必须使用Object.defineProperty()定义。varbook={_year:2014,edition:1};Object.defineProperty(book,"year",{get:function(){returnthis._year},set:function(newValue){if(newValue>2004){}this._year=newValue;this.editon+=newValue-2004;}}});book.year=2005;alert(book.edition);//22。定义多个属性varbook={};Object.defineProperties(book,{//dataattribute_year:{writable:true,value:2004},edition:{writable:true,value:1},//accessorattributeyear:{get:()=>{returnthis._year;},set:(newValue)=>{if(newValue>2004){this._year=newValue;this.edition+=newValue-2004;}}}})3.读取属性特征vardescriptor=Object.getOwnPropertyDescriptor(book,"year");alert(descriptor.value);//undefind访问属性没有值alert(descriptot.get);//funtion4,模拟双向绑定v-for和v-if一起使用注意我们不建议在同一个元素上使用v-if和v-for当他们在同一个节点,v-for的优先级高于v-if,也就是说v-if会在每个v-for循环中重复运行