Vue的响应式原理

下面的是一张来自Vue官网的图片:

追踪变化

如何追踪变化??

当把一个普通的JavaScript对象传递给Vue实例的data选项,Vue将遍历这个对象的所有属性,并且利用Object.defineProperty这些属性全部转换为getter/setter,当然由于兼容性问题,所以Vue不支持IE8及更低版本的浏览器

从上面的图可以看出,对于数据Data来说,它里面的getter与setter是对于外部是不可见的,但是在内部完全可以使用它们,在内部,通过Vue进行追踪依赖,当属性被修改或者访问时通知变化。每个组件的实例都会有相应的watcher实例对象,它会在组件渲染的过程中将属性记为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而让和它相关联的组件得以更新

变化的检测问题

受现代浏览器的限制(以及废弃的Object.observe),Vue不能检测到对象属性的添加或者删除,由于Vue在初始的时候就会对属性实行getter/setter转换过程,所以属性必须存在于data对象时才能让Vue转换它,这样它才是响应的,这段话的意思等同于下面的代码:

        //初始化之前写在data中的可以让Vue转换它,所以a是响应的
        var v = new Vue({
            data : {
                a : 1
            }
        });

        //初始化之后添加的属性b是非响应的
        v.b = 2;

Vue不允许在已经创建的实例上动态添加新的根级响应式属性,然而它可以使用Vue.set(Object, key, value)方法将响应属性添加到嵌套的对象上

Vue.set(vm.someObject, 'b', 2)

也可以使用v.$set实例方法,这也是全局Vue.set方法的别名:

this.$set(this.someObject,'b',2)

有时你想向已有的对象添加一些属性,例如使用Object.assign()_.extend()方法来添加属性,但是,添加到对象上的新属性不会触发更新,在这中情况下,可以创建一个新的对象,让它包含原对象的属性和新的属性:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

声明响应式属性

由于Vue不允许动态添加根级响应式属性,所以必选在初始化实例前生命根级响应式属性,可以是空值

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message` 
vm.message = 'Hello!'

如果在data选项中未声明message,Vue将警告渲染函数试图访问的属性不存在

这样的限制,消除了在依赖项跟踪系统的一类边界情况,也使Vue实例在类型检查系统的帮助下运行的更高效,而且在代码可维护性方面也有所考虑,data对象就像组件状态的概要,提前声明所有的响应式属性,可以让组件代码在以后阅读或开发人员阅读时更易于被理解

异步更新队列

Vue异步执行DOM更新,只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的数据改变,如果同一个watcher被多次触发,只会一次推入到队列中。这种缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要,然后,在下一个的事件循环”tick”中,Vue刷新队列并执行实际(已去重的)工作。Vue在内部尝试对异步队列使用原生的promise.thenMutationObserver,如果执行环境不支持,会采用setTimeout(fn, 0)代替

例如,当你设置了vm.someData = 'new value',该组件不会立即重新渲染,当刷新队列时,组件会在事件循环队列清空的下一个”tick”更新,多数情况下我们不需要关心这个过程,但是如果你想在DOM状态更新后做点什么,这就可能会有点困难,为了使得数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick(callback) 这样回掉函数在DOM更新后就会调用。

    <div id="example">{{message}}</div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#example',
            data: {
                message: '123'
            }
        });
        vm.message = 'new message' // 更改数据
        console.log(vm.$el.textContent);   //123

        Vue.nextTick(function () {
            alert(2323);
            console.log(vm.$el.textContent);  //new message
        });
    </script>

在组件内使用vm.$nextTick()实例方法特别方便,因为它不需要全局Vue,并且回掉函数中的this将自动绑定到当前的Vue实例上

        Vue.component('my-component', {
            template: '<span> {{message}}</span>',
            data : function() {
                return {
                    message: 'not update'
                }
            },
            methods : {
                updateMessage : function() {
                    this.message = 'update';
                    console.log(this.$el.textContent);  //'not update'
                    this.$nextTick(function() {
                       console.log(this.$el.textContent); //'update'
                    });
                }
            }
        });

参考:https://cn.vuejs.org/v2/guide/reactivity.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值