vue强制更新, Vue中$forceUpdate()、this.$set()的使用、this.$nextTick()、 ref

那在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。
但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。

this.$forceUpdate会更新视图和数据 

<template>
  <p>{{userInfo.name}}</p>
  <button @click="updateName">修改userInfo</button>
</template>

<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.userInfo.name='小红'
    }
  }
</script>

在updateName函数中，我们尝试给userInfo对象修改值，发现页面其实并没有变化

那这时候有两种解决方法：

方法一：

methods:{
  updateName(){
    this.userInfo.name='小红'//在此时，确实已经将userInfo对象修改完成
    console.log(this.userInfo.name);//输出结果: 小红
    this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
  }
}

方法二：

methods:{
  updateName(){
    this.$set('userInfo',name,'小红');
  }
}

this.$set(this.secColumn[index], "isopen", true);

this.$nextTick(里面是回调函数)  (tei 科)

 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。

$nextTick是在下一次dom更新循环结束之后执行延迟回调，在修改数据之后使用这个方法，立即更新dom

可能看很多理念，不会特别懂，不用担心，先就记住这句话就行 " 数据被更新了，Vue.nextTick 就会触发"。

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

如果没有用this.$nextTick() 打印的是:

 用了this.$nextTick() 打印的是:22222222

是由于作用域的原因，将this赋值给self变量

function Fun() {
  function F() {
    console.log(this)//指向了F()
  }
}

function Fun() {
    let self = this;
    function F() {
        console.log(self)//指向Fun()
    }
}

let self = this;
self.$nextTick(() => {
     self.$refs["listDom" + index][0].initDom(this.list[itemCcompanyId]);
});

ref   月付