Vue视图更新之nextTick,set

先说他俩干嘛用的，
nextTick使用场景：如果你想使用dom中的数据，使用此方法可以拿到dom渲染后的数据，或者你想在dom渲染完成后进行某项操作。比如获取DOM节点，渲染Echarts，或者加载轮播图组件到DOM结构中
set使用方法：this.$set('数据名'，‘属性名’，‘属性值’) this.$set(this.list[0],'flag',false)
set使用场景：动态往data数组中添加对象，这样添加的对象不会生效，必须使用set
具体解释请往下看：

nextTick

我们学vue都知道vue是虚拟DOM,即用js模拟dom结构，完成视图的渲染。那么NextTick的作用又是什么呢?下面直接看效果：
这是视图层

        这是data中的数据message:{{message}}
        点击改变数据
        

            这是不用nextTick改变的数据：{{msg1}}

            这是使用了nextTick改变的数据：{{msg2}}
        
    

这是mvvm中的vm层

var vm=new Vue({
            el:'.content',
            data:{
                message:'hello world',
                msg1:'',
                msg2:''
            },
            methods:{
                change:function(){
                    this.message='hello Vue'
                    this.msg1=this.$refs.p.innerHTML
                    this.$nextTick(function(){
                        this.msg2=this.$refs.p.innerHTML
                    })
                }
            }
        })

这是没有点击按钮之前的数据

这是改变之后的数据

可以看出nextTick的使用方法就是this.$nextTick(fn)
通过这个对比可以明显的看出nextTick干了什么，使用了nextTick的数据取得是dom更新之后的数据，而没有使用的则取得是更新之前的数据。根据猜测可以推断出nextTick使用了异步操作，也就是等待dom更新完成后再执行其中的方法。如果你想基于更新后的 DOM 状态来做点什么，这个方法是必不可少的。

比如我想引一个轮播图组件进去，这就必须将方法写在nextTick中，因为你必须要等视图层渲染完毕再将该节点插入到dom中，否则你的方法如果在dom渲染之前使用是不会生效的。

顺便看下vue源码是怎么封装nextTick的

function nextTick (cb, ctx) {
      var _resolve;
      callbacks.push(function () {
        if (cb) {
          try {
            cb.call(ctx);
          } catch (e) {
            handleError(e, ctx, 'nextTick');
          }
        } else if (_resolve) {
          _resolve(ctx);
        }
      });
      if (!pending) {
        pending = true;
        timerFunc();
      }
      // $flow-disable-line
      if (!cb && typeof Promise !== 'undefined') {
        return new Promise(function (resolve) {
          _resolve = resolve;
        })
      }
    }

可以看到采用的方案确实是异步，这里做了判断，是否支持Promise，如果支持就是用Promise异步，否则采用timeFunc的异步操作，这里timeFunc是采用setTimeout，setImmediate这两种方法实现的，具体想了解深一点的可以去看源码，1930行开始。
官方文档的深入响应式原理中也解释的比较详细https://cn.vuejs.org/v2/guide/reactivity.html

this.$set

下面在看看set又是个什么东西。想必大家也遇到过异步获取的数据替换data中原有数据，但是视图却没有相应的渲染的情况。这是为什么呢？
我们知道vue的双向绑定是他的核心，通过Object.defineProperty的get,set来实现数据的绑定，setter触发时告知watcher，重新渲染视图，完成视图的更新。但是该监测只针对data中已有的数据生效，也就是说你通过方法新添的数据不会渲染到视图层中。来看下面例子：

          list:[
                    {
                        name:'小明',
                        sex:'男'
                    },
                    {
                        name:'小红',
                        sex:'女'
                    }
                ]

image.png

image.png

可以看到其实data中已经有了数据，但是没有渲染到视图中，就是因为我们添加的数据是非响应式的。
下面我们看看this.$set能做些什么：

                changeName:function(){
                    this.$set(this.list[0],'age','18')
                    // this.list[0].age='18'
                    console.log(this.list)
                }

image.png

这样操作之后数据直接渲染到视图层中了，就是因为set('要渲染的数据'，‘属性’，‘属性值’)
比如：this.$set(this.list,'flag',false)

如果这样使用还没达到效果，可以尝试使用this.$forceUpdate,

Vue.prototype.$forceUpdate = function () {
        var vm = this;
        if (vm._watcher) {
          vm._watcher.update();
        }
      };

源码中可以看出这就是对视图进行了重新渲染。