相应体系是 Vue 一个明显功用，修正属性，能够更新视图，这让状况治理变得异常简朴且直观。
建立 Vue 实例时，Vue 将遍历 data 的属性，经由过程 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 能够追踪依靠、关照变化。

const vm = new Vue({
  data: {foo: 1} // 'vm.foo' (在内部，同 'this.foo') 是相应的
})

视察属性变化

Vue 的实例供应了 $watch 要领，用于视察属性变化。

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
  console.log(newValue, oldValue) // 输出 2 1
  console.log(this.foo) // 输出 2
})

vm.foo = 2

当属性变化后，相应函数将会被挪用，在其内部，this 自动绑定到 Vue 的实例 vm 上。
须要注重的是，相应是异步的。以下：

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
  console.log('inner:', newValue) // 后输出 "inner" 2
})

vm.foo = 2
console.log('outer:', vm.foo) // 先输出 "outer" 2

经由过程 $watch Vue 完成了数据和视图的绑定。视察到数据变化，Vue 便异步更新 DOM ，在统一事宜轮回内，屡次数据变化将会被缓存起来，在下次事宜轮回中，Vue 革新行列并仅实行必要的更新。以下：

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
  console.log('inner:', newValue) // 后只输出一次 "inner" 5
})

vm.foo = 2
vm.foo = 3
vm.foo = 4
console.log('outer:', vm.foo) // 先输出 "outer" 4
vm.foo = 5

盘算属性

MV* 中，将 Model 层数据展示到 View，常常有庞杂的数据处理逻辑，这类情况下，运用盘算属性 (computed property) 越发明智。

const vm = new Vue({
  data: {
    width: 0,
    height: 0,
  },
  computed: {
    area () {
      let output = ''
      if (this.width > 0 && this.height > 0) {
        const area = this.width * this.height
        output = area.toFixed(2) + 'm²'
      }
      return output
    }
  }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

在盘算属性内部，this 自动绑定 vm，因而声明盘算属性时须要防止运用箭头函数。
上例中，vm.width 和 vm.height 是相应的，vm.area 内部初次读取 this.width 和 this.height 时，Vue 网络其做为 vm.area 的依靠，今后 vm.width 或 vm.height 变化时，vm.area 从新求值。
盘算属性是基于它的依靠缓存，假如 vm.width 和 vm.height 没有变化，屡次读取 vm.area，会马上返回之前的盘算结果，而没必要再次求值。
一样因为 vm.width 和 vm.height 是相应的，在 vm.area 中能够将依靠的属性赋值给一个变量，经由过程读取变量来削减读取属性次数，同时处理在前提分支中，Vue 有时会没法网络到依靠的题目。
新的完成以下：

const vm = new Vue({
  data: {
    width: 0,
    height: 0,
  },
  computed: {
    area () {
      let output = ''
      const {width, height} = this
      if (width > 0 && height > 0) {
        const area = width * height
        output = area.toFixed(2) + 'm²'
      }
      return output
    }
  }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

经由过程 ob.js smart-observe 零丁运用 Vue 的属性视察模块

为轻易进修和运用，smart-observe 将 Vue 中属性视察模块提取并封装了一下。

smart-observe GitHub 地点：https://github.com/cnlon/smar…

装置

npm install --save smart-observe

视察属性变化

const target = {a: 1}
observe(target, 'a', function (newValue, oldValue) {
  console.log(newValue, oldValue) // 3 1
})
target.a = 3

增加盘算属性

const target = {a: 1}
observe.compute(target, 'b', function () {
  return this.a * 2
})
target.a = 10
console.log(target.b) // 20

像声明 Vue 实例一样传入参数鸠合

const options = {
  data: {
    PI: Math.PI,
    radius: 1,
  },
  computed: {
    'area': function () {
      return this.PI * this.square(this.radius)
    },
  },
  watchers: {
    'area': function (newValue, oldValue) {
      console.log(newValue) // 28.274333882308138
    },
  },
  methods: {
    square (num) {
      return num * num
    },
  },
}
const target = observe.react(options)
target.radius = 3

更细致的运用引见请 点击这里

同时引荐别的两款同类库

• Watch.JS https://github.com/melanke/Wa…

• observe.js https://github.com/kmdjs/obse…