1. 数据:Vue.set 和 Vue.delete
在Vue2.x中,当一个Vue实例创建好了以后,如果想要后续给该实例的某一个data添加属性,该属性是不会触发视图更新的,解决方法是使用Vue.set或者vm.$set方法添加指定属性。
例如
<template> <div> <p>foo.a is {{foo.a}}</p> <p>foo.b is {{foo.b}}</p> <button @click="foo.a = 111">change a to 111</button> <button @click="foo.b = 111">change b to 111</button> </div></template><script>export default { data() { return { foo: { a: 123 } } }, created() { //在Vue实例创建成功,但是还未挂载到dom树之前给foo增加b属性。 this.foo.b = 456; }}</script>
以上代码在Vue实例创建成功,但是还未挂载到dom树之前给foo增加b属性,此时再页面上可以正常看到foo.a,但是点击修改foo.b页面并不会发生变化。
正确的写法
created() { this.$set(this.foo, 'b', 456); //或者 Vue.set(this.foo, 'b', 123); //对于数组,第二个参数是下表}
同样的,想要删除一个属性并触发视图更新,并不能直接使用delete
,而要用Vue.delete(target, propertyName/index)
或者vm.$delete(target, propertyName/index)
。
但是,目前在Vue3中,直接使用this.foo.b = 456
也一样可以触发视图更新,也.........