Vue.set()触发视图更新

作者: 前端来入坑 | 来源:发表于2018-12-14 17:25 被阅读35次

Vue.set()触发视图更新
Vue.js入门（四）：常用API
vue强制更新
Vue数组改变视图不更新
vue.set()
记录简单实现Vue2中的响应式原理
视图重绘和事件传递及响应
使用vue.set() (this.$set)更新视图
vue源码分析（七）：监听者Watcher
Vue数组对象修改触发视图更新

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

什么意思呢？

举个栗子.jpg

data () {
    return {
        student: {
            name: 'LL',
            sex: 'XX'
        }
    }
}

给student加一个属性身高:

mounted () {
    this.student.height = 180
}

这样呢可以新增属性，但是，不会触发视图的更新,所以需要这么写：

mounted () {
    this.$set(this.student,"age", 24)
}

官网https://cn.vuejs.org/v2/api/#Vue-set

Vue.set()触发视图更新
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因...
Vue.js入门（四）：常用API
1 数据类API Vue.set 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新...
vue强制更新
使用update this.$forceUpdate()，强制视图更新用vue.set this.$set(th...
Vue数组改变视图不更新
无效正确方法,vue会触发视图更新数组操作
vue.set()
vue为了更加简洁，当data的数据是数组或者对象时，动态的添加或删除，视图将不会更新Vue.set()可以用来设...
记录简单实现Vue2中的响应式原理
Vue是数据驱动视图模式，数据变更后，会自动更新视图。原生js中要更新视图通常是通过触发事件，然后修改数据，最后...
视图重绘和事件传递及响应
1.触发视图更新的动作有如下几种：对遮挡您的视图的其它视图进行移动或删除操作。将视图的hidden属性声明设置...
使用vue.set() (this.$set)更新视图
更新某些List数据时视图(页面)不会实时更新 ,需要使用 this.$set更新第一种:this.$set(...
vue源码分析（七）：监听者Watcher
上回我们留下了一个问题：当更新视图时，我们注册的key，跟触发时的key不一致了，所以导致无法更新视图，怎么办呢？...
Vue数组对象修改触发视图更新
在使用队列发送命令弹窗组件时，发现，直接对子组件的数组进行修改，并没有能更新视图，当时我有使用watch监听了，也...