前言

this.$set()的主要功能是解决vue语法中改变数据时未驱动视图的改变，也就是实际数据被改变了，但我们看到的页面并没有变化，这里主要讲this.$set()的用法，如果你遇到类似问题可以尝试下，vue官网写的是Vue.set，和this.$set()是一样的，但要注意当前this的指向问题，你要记住时this.$set()时当前this的指向一定要是最外层。

原理

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

调用方法

Vue.set( target , key , value)

target: 要更改的数据源（可以是一个对象或者数组）
key 要更改的具体数据（索引）
value 重新赋的值

示例

        async getVpcInfo() {
            let option = {
                VpcId: this.instanceDetail.VpcId,
                Region: this.regionKey
            };
            let res = await getVpcs(option);
            this.instanceDetail.VpcName = res.VpcSet.find(item => {
                return item.VpcId == this.instanceDetail.VpcId
            }).VpcName;
        },

结果就是详情页面无法拿到接口得数据

        async getVpcInfo() {
            let option = {
                VpcId: this.instanceDetail.VpcId,
                Region: this.regionKey
            };
            let res = await getVpcs(option);
            let VpcName = res.VpcSet.find(item => {
                return item.VpcId == this.instanceDetail.VpcId
            }).VpcName;
            this.$set(this.instanceDetail, 'VpcName', VpcName)
        },

也就是说，this.$set()方法调用时，页面会全部更新一遍,强制刷新页面。

以上就是本文的全部内容，希望对大家的学习有所帮助，也是切身实际遇到得问题，也希望大家多多指点！

this.$set()的使用

前言

原理

调用方法

示例