做网站挣钱快又多,qq号码免费申请注册,杭州app开发公司老铁帮,网站图片展示源码前言 Vue中的数据监听离不开Object.defineProperty()方法的使用#xff0c;在了解数据监测原理之前#xff0c;建议先掌握defineProperty的用法。 目标 1 数据监测问题 2 数据监测原理 3 如何实现数组更新 1 遇到的问题
数组更新问题
button clickupdatePeople在了解数据监测原理之前建议先掌握defineProperty的用法。 目标 1 数据监测问题 2 数据监测原理 3 如何实现数组更新 1 遇到的问题
数组更新问题
button clickupdatePeople更新一个用户信息/button
ulli v-for(item,index) in people :keyindex{{item.name}}----{{item.age}}/li
/ul// 可以实时更新
updatePeople(){console.log(更新用户信息)this.people[0].name 马冬梅this.people[0].age 40
},updatePeople(){console.log(更新用户信息)// 实时更新页面失败this.people[0] {name:马冬梅,age:40}
},vue中的数据更新主要通过Object.defineProperty()中的set来实现的people数组下的对象没有get与set而对象中的name、age有set所以在设置name、age值时会同步的进行更新
Vue.set()
现有一个需求在页面渲染完成后动态的给对象添加属性并打印属性与属性值。 看似很好实现的一个需求但是当我们的动态的添加属性后也页面却无任何更新这是为什么呢 给data中的属性绑定get、set是在new Vue()的过程中进行绑定的但是动态添加属性是在绑定之后也就是后来添加的属性无set修改值就无法试试的去监测数据更新了。 为了解决此问题Vue提供了Vue.set方法,用于添加响应式的property Vue.set() 与 vm.$set()时一样的效果 Vue.set(vm.pseron,sex,男生) vm. $set(vm.pseron,sex,男生) Vue.set()也不是任何情况下都可以使用的若作用的对象是Vue实例或者实例的根数组对象会无效
data:{pserson: {name: 李四,age: 32,children: {name: 王五,age: 6,},}}
ulli v-for(value,key,index) of pserson :keyindex{{key}}----------{{value}}/li
/ul2 Vue检测数据原理
1 对象
在讨论如何解决数组更新问题之前先来看一下对象是如何实现实时更新的。 详细的就不再描述了不了解的可以去看看vue 【vue中的数据代理】 对象代理流程大致是 #mermaid-svg-BCr35cdOmsN0zl3p {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .error-icon{fill:#552222;}#mermaid-svg-BCr35cdOmsN0zl3p .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BCr35cdOmsN0zl3p .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BCr35cdOmsN0zl3p .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BCr35cdOmsN0zl3p .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BCr35cdOmsN0zl3p .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BCr35cdOmsN0zl3p .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BCr35cdOmsN0zl3p .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BCr35cdOmsN0zl3p .marker.cross{stroke:#333333;}#mermaid-svg-BCr35cdOmsN0zl3p svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BCr35cdOmsN0zl3p .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .cluster-label text{fill:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .cluster-label span{color:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .label text,#mermaid-svg-BCr35cdOmsN0zl3p span{fill:#333;color:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .node rect,#mermaid-svg-BCr35cdOmsN0zl3p .node circle,#mermaid-svg-BCr35cdOmsN0zl3p .node ellipse,#mermaid-svg-BCr35cdOmsN0zl3p .node polygon,#mermaid-svg-BCr35cdOmsN0zl3p .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BCr35cdOmsN0zl3p .node .label{text-align:center;}#mermaid-svg-BCr35cdOmsN0zl3p .node.clickable{cursor:pointer;}#mermaid-svg-BCr35cdOmsN0zl3p .arrowheadPath{fill:#333333;}#mermaid-svg-BCr35cdOmsN0zl3p .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-BCr35cdOmsN0zl3p .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-BCr35cdOmsN0zl3p .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-BCr35cdOmsN0zl3p .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-BCr35cdOmsN0zl3p .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-BCr35cdOmsN0zl3p .cluster text{fill:#333;}#mermaid-svg-BCr35cdOmsN0zl3p .cluster span{color:#333;}#mermaid-svg-BCr35cdOmsN0zl3p div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-BCr35cdOmsN0zl3p :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 加工 触发 set data中的数据 vm._data 修改data.name 页面更新 简单写个例子来模拟一下Vue中对象的数据监听。Vue中对象的数据监听用的也是Object.defineProperty通过递归遍历对象确保对象中的每个属性值都有get与set
script typetext/javascriptlet data {name: 张三,age: 18}const obs new Observer(data)let vm {}vm._data data obsfunction Observer(obj) {const keys Object.keys(obj)keys.forEach(key {Object.defineProperty(this, key, {get() {return obj[key]},set(val) {obj[key] val}})});}/scriptVue.set()
现有一个需求在页面渲染完成后动态的给对象添加属性并打印属性与属性值。 看似很好实现的一个需求但是当我们的动态的添加属性后也页面却无任何更新这是为什么呢 给data中的属性绑定get、set是在new Vue()的过程中进行绑定的但是动态添加属性是在绑定之后也就是后来添加的属性无set修改值就无法试试的去监测数据更新了。
data:{pserson: {name: 李四,age: 32,children: {name: 王五,age: 6,},}}
ulli v-for(value,key,index) of pserson :keyindex{{key}}----------{{value}}/li
/ul如何监测对象中的数据? 通过setter实现监视且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性Vue默认不做响应式处理 (2).如需给后添加的属性做响应式请使用如下API: Vue.set(targetpropertyName/index value) 或 vm.$set(targetpropertyName/index value)
2 数组
当数组中对象的属性发生变化时属性可以实时的监听。但是我们整个改变数组的中的值时页面却没有实时更新。 我们用数组方法往数组中添加对象这个对象中的属性也是响应式的
如何监测数组中的数据? 通过包裹数组更新元素的方法实现本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。(2).重新解析模板进而更新页面。 在vue修改数组中的某个元素一定要用如下方法: 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()。用如下方法向数组中添加对象对象中的属性也是响应式的2.Vue.set()或 vm.$set() 特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添属性!!!
