关于Vue中的data绑定

Vue的官方文档中说,Vue 实例的数据都保存在 data 对象中,Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。

var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // -> 1
vm.$data === data // -> true

我现在的疑问是:

data() {
      return {
        favorite: (() => {
            return loadFromLocal(this.seller.id, 'favorite', false);
        })()
      };
    }

其中loadFromLocal是全局声明的一个函数,Vue实例将data中的属性转换为getter和setter,这个立即执行函数的返回值会因为其它函数变化而变化。在我没有显示地调用favorite的getter和setter时,Vue是如何监听数据变化的呢?是每隔一段时间检查一遍立即执行函数的返回值吗?

回答:

1.立即执行函数在new Vue之前,已经执行完了

var App = {
  data() {
    return {
      a: (()=>{ return 1; })()
    }
  }
}

new Vue({App});

2.监听就是通过getter 和setter进行的,没有什么在之前。
在模板中打印属性,在ready时访问属性,都相当于调用了getter

回答:

data() {
      return {
        favorite: (() => {
            return loadFromLocal(this.seller.id, 'favorite', false);
        })()
        //其实和下面没区别,只是初始赋值是立即执行函数的返回值而已
        favorite:1
      };
    }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注