Vue.js学习（一）

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 241字 | 阅读时长 ≈ 1分钟

Vue的响应原理

上面这张图表示的就是 vue 的响应原理:当我们将数据添加入 vue 实例中的 data 选项中的时候, vue 将遍历data 中数据的所有属性，并且调用 Object.defineProperty 方法将属性记录为依赖。当数据发生改变的时候,就会调用 object.defineProperty 中的 setter 方法,在组件实例中存在一个 watcher 对象，这个对象的目的是：当被记录的依赖被调用的时候,也就是属性的 setter 被调用的时候，会通知watcher 对象进行重新渲染组件

Object.defineProperty

1
2
3
4
5
6
7
8
Object.defineProperty(Object, property, {
  get () {
  	// 读取对象Object 的属性 property 的时候调用的函数
  },
  set (newVal) {
   // 设置对象 Object 的属性 property 的时候调用的函数
  }
})
通过使用这种方法，调用 getter 和 setter 可以实现追踪对象属性的变化

vue.js 中的 生命周期

在 vue.js 中