做网站还有用吗,闸北集团网站建设,公司手机网站模板免费下载,企业网站开发周期问题引入 Vue之所以能够监听Model状态的变化#xff0c;是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是#xff0c;对于数组元素的赋值#xff0c;却没有办法直接监听。 因此#xff0c;如果我们直接对数组元素赋值 ul是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是对于数组元素的赋值却没有办法直接监听。 因此如果我们直接对数组元素赋值 ulli v-for(item,index) in arrInfo{{item.name}}--{{item.age}}/li
/ul data(){return {arrInfo:[{name:zuobaiquan,age:22},{name:zhangsan,age:20}]}
},
// created(){
// this.arrInfo[0]{name:zuobaiquan01,age:22}
// },
mounted(){this.arrInfo[0]{name:zuobaiquan02,age:22}
} 在mounted阶段直接对数组元素 arrInfo 赋值会导致Vue无法更新View 说明在 created 视图未渲染时 直接对数组元素 arrInfo 赋值 data里面的初值会改变的。 此时在mounted阶段简单的做法是不要对数组元素赋值而是更新 mounted(){this.arrInfo[0]{name:zuobaiquan02,age:22}//正确做法//this.arrInfo[0].namezuobaiquan02//this.arrInfo[0].age23
} 另一种做法通过splice()方法删除某个元素后再添加一个元素达到“赋值”的效果 //正确做法二 通过splice()方法删除某个元素后再添加一个元素达到“赋值”的效果
var newArrItem{name:zuobaiquan02,age:24}
this.arrInfo.splice(0, 1, newArrItem); 源码地址https://github.com/zuobaiquan/vue/blob/master/vueExercise/vue-test/src/views/vue-set/index01.vue 针对此问题 vue还提供了另外一种方法 set https://cn.vuejs.org/v2/api/#vm-set 调用方法Vue.set( target, key, value ) target要更改的数据源(可以是对象或者数组) key要更改的具体数据 value 重新赋的值 此时 应该这样处理 //正确做法三 利用vue内置属性 set
var newArrItem{name:zuobaiquan02,age:24}
this.$set(this.arrInfo,0,newArrItem) 数组更新检测 变异方法 Vue 包含一组监听数组的变异方法所以它们也将会触发视图更新。这些方法有 push、pop、shift、unshift、splice、sort、reverse 替换数组 变异方法 (mutation method)顾名思义会改变被这些方法调用的原始数组。相比之下也有非变异 (non-mutating method) 方法例如filter(), concat() 和 slice() 。这些不会改变原始数组但总是返回一个新数组。当使用非变异方法时可以用新数组替换旧数组 example1.items example1.items.filter(function (item) {return item.message.match(/Foo/)
}) 你可能认为这将导致 vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。 整理变异方法push、pop、shift、unshift、splice、sort、reverse 非变异方法filter、 concat、 slice 总结 由于 JavaScript 的限制Vue 不能检测以下变动的数组 第一类问题当你利用索引直接设置一个项时例如vm.items[indexOfItem] newValue 第二类问题当你修改数组的长度时例如vm.items.length newLength 为了解决第一类问题以下两种方式都可以实现和 vm.items[indexOfItem] newValue 相同的效果同时也将触发状态更新 // Vue.set
Vue.set(example1.items, indexOfItem, newValue) 或者 // Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue) 为了解决第二类问题你可以使用 splice example1.items.splice(newLength) 对象更改检测注意事项 还是由于 JavaScript 的限制Vue 不能检测对象属性的添加或删除 var vm new Vue({data: {a: 1}
})
// vm.a 现在是响应式的vm.b 2
// vm.b 不是响应式的 对于已经创建的实例Vue 不能动态添加根级别的响应式属性。但是可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如对于 var vm new Vue({data: {userProfile: {name: Anika}}
}) 你可以添加一个新的 age 属性到嵌套的 userProfile 对象 Vue.set(vm.userProfile, age, 27) 你还可以使用 vm.$set 实例方法它只是全局 Vue.set 的别名 this.$set(this.userProfile, age, 27) 有时你可能需要为已有对象赋予多个新属性比如使用 Object.assign() 或 _.extend()。在这种情况下你应该用两个对象的属性创建一个新的对象。所以如果你想添加新的响应式属性不要像这样 Object.assign(this.userProfile, {age: 27,favoriteColor: Vue Green
}) 你应该这样做 this.userProfile Object.assign({}, this.userProfile, {age: 27,favoriteColor: Vue Green
}) 参考原文https://www.cnblogs.com/thinkingthigh/p/7789108.html转载于:https://www.cnblogs.com/zuobaiquan01/p/9034516.html
