受 ES5 的限制,Vue.js 不能检测到以下响应式界面更新:
1. 数组中某一项的变动
例如:
arr: [1,2,3,4]
this.arr[0] = 5
2. 数组长度的改变
例如:
arr: [1,2,3,4]
this.arr.length = 5
3. 对象属性的添加或删除
例如:
arr: { name: '', age: '' }
this.arr.sex = ''
实测效果:
有些时候实际测试,会发现vue.js其实是可以检测到这些变化的,但不一定
vue.js提供了 vue set方法针对以上情况,触发响应视图的更新
语法:
对象:Vue.set( target, key, value )
数组:Vue.set( target, index, value )
根据上面3种情况依次举例:
1. 数组中某一项的变动
arr: [1,2,3,4]
this.$set(arr, 0, 5)
2. 数组长度的改变
arr: [1,2,3,4]
this.$set(arr, 5, '')
3. 对象属性的添加或删除
arr: { name: '', age: '' }
this.$set(arr, 'sex', '')
注意:
this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。