- 问题： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
- 原因：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
- 对数组或者对象进行操作时，发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。
- 这种情况下，Vue 不能检测以下变动的数组
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength - 比如： 使用this.arr[0] 去更新array的内容，视图没有刷新
使用Vue.set(this.arr, 0, !this.arr[0]) 去更新array的内容，视图被刷新
使用 this.arr[0] = !this.arr[0] 和 this.obj.a = !this.obj.a 同时更新，视图被刷新 - 结论：如果方法里面单纯的更新数组Array的话，要使用Vue.set，如果方法里面同时有数组和对象的更新，直接操作data即可
- 例子：
<html>
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in data" :key="index">{{item}}</li>
</ul>
<button @click="changeData">按钮</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data() {
return {
data:['路费','可不','小哀','乔巴']
};
},
methods: {
changeData() {
this.data[2]='娜美'
}
}
})
</script>
点击页面没刷新：
改成一下写法：
methods: {
changeData() {
this.$set(this.data,2,'娜美');
// Vue.set(this.data,2,'娜美');
// this.data.splice(2,1,'娜美');
}
}
-
结论：
响应系统 ,会把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter，未实例化的属性，修改其值，是不会更新到视图上面的 -
原理：
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
-
受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
-
写法
Vue.set 参数
参数：
{Object | Array} target
{string | number} key
{any} value
返回值：设置的值。
- Vue.set()和this.$set()的区别：
- 实现原理
Vue.set()源码：
- 实现原理
import { set } from '../observer/index'
...
Vue.set = set
...
this.$set()源码
import { set } from '../observer/index'
...
Vue.prototype.$set = set
...
结果我们发现Vue.set()和this.set()是将set函数绑定在Vue原型上
网友评论