this.$nextTick()和this.$set()

this.$nextTick()

先上代码！！！！！

//页面
<div ref="dev">{{ msg }}</div>
<div v-if="msg1">{{ msg1 }}</div>
<div v-if="msg2">{{ msg2 }}</div>
<div v-if="msg3">{{ msg3 }}</div>
<button @click="changeMsg()">Change the Message</button>



//代码块
export default {
    components: {},
    data() {
        return {
            msg: "vue",
            msg1: "",
            msg2: "",
            msg3: "",
        };
    },
    //方法 函数写这里
    methods: {
        changeMsg() {
            this.msg = "我是$nextTick中要传的值";
            this.msg1 = this.$refs.dev.innerHTML;
            this.$nextTick(() => {
                this.msg2 = this.$refs.dev.innerHTML;
            });
            this.msg3 = this.$refs.dev.innerHTML;
        },
            },
}

这是没点按钮之前，猜猜点击之后是怎么样的

相信很多人早已经猜到了， msg和msg2成功赋值了，但是msg1和msg3没有成功。

 其实，在一个组件中，只有在data里初始化的数据才是响应的，vue不能检测到对象属性的添加或者删除，没有添加在data里的数据是不响应的。

因此，在vue生命周期的created（）钩子函数中进行DOM操作的话，一定要放在this.$nextTick()中，我们都知道，mounted（）钩子函数执行时，所有的DOM挂载和渲染都已完成，在此函数中，进行任何DOM操作都不会有问题。

————————————————————————————————————————

this.$set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

什么意思呢？就是vue不允许在已经的实例化的组件上添加新的动态根级响应属性（即直接挂载），但是可以使用$set方法，将响应属性添加到嵌套的的对象上。

//页面
<template>
    <div class="content">
        <div class="box">
            <div ref="a">{{obj.a}}</div>
            <div ref="b">{{obj.b}}</div>
            <button @click="update()">更新</button>
        </div>
    </div>
</template>


//代码块
export default {
    components: {},
    data() {
        return {
            obj:{
                a:"我是obj.a",
            }
        };
    },
    //方法 函数写这里
    methods: {
        update(){
            this.obj.b = "我是新增的obj.b"
            
        }
    },
}

👆👆👆 这是未点击时的页面

这是点击时的页面👇👇👇

 我们可以看到，数据已经进行了更新，但页面却没有变化。

我们再使用this.$set()试试看

    data() {
        return {
            obj: {
                a: "我是obj.a",
            },
        };
    },
    methods: {
        update() {
            // this.obj.b = "我是新增的obj.b";
            this.$set(this.obj, "b", "我是新增的obj.b");
            // vm.$set()实例方法是Vue.set()全局方法的别名
        },
    },

 this.$set(obj,key,value)一次只能添加一个属性，如果需要添加多个属性，可以使用object.assign或_.extend()，但是需要创建同事包含原属性、新属性的对象，从而有效触发watch（）方法

    methods: {
        update() {
            // this.obj.b = "我是新增的obj.b";
            // this.$set(this.obj, "b", "我是新增的obj.b");
            // vm.$set()实例方法是Vue.set()全局方法的别名

            this.obj = Object.assign({},this.obj,{b:'我是新增的obj.b'})
        },
    },

其结果也是一样的。

在项目中更多的情况并不会那么简单的，数组的每一项都要动态添加响应式属性

for (let plan of this.formPayment.planList) {
      this.$set(plan, 'socialInsuranceRanges', [{value: '1', label: '有', code: '', price: ''}, {value: '2', label: '无', code: '', price: ''}]);
            }

这样写也是有效果的。

还有一种情况是，给已有对象添加多个属性，可能会用到Object.assgin(),这种情况应该用两个对象创建一个新对象

// 不要这样写：
Object.assign( this.user, {
  tel: 18888888888,
  sex: 'Y'
})

// 而应该这样写：
this.user = Object.assign( {}, this.user, {
  tel: 18888888888,
  sex: 'Y'
})

修改数组对象的某一项

this.$set(this.arr, index, this.arr[index]);

文中有部分摘抄自https://www.jianshu.com/p/e1e92965d4fe