watch和computed的用法区别是啊?

每当模板被绑定表达式是那个有益之,但是她其实只用于简单的操作。模板是为描述视图的结构。在模板被放入太多之逻辑会于模板过重且难以保障。这便是胡
Vue.js
将绑定表达式限制也一个表达式。如果欲多于一个表达式的逻辑,应当利用**计量属性**。

基础例子

<div id="example">
  a={{ a }}, b={{ b }}
</div>

var vm = new
Vue({

  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

此地我们声明了一个计量属性 b。我们提供的函数将就此作属性 vm.b
getter。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
  • 1
  • 2
  • 3

  • 1
  • 2
  • 3

乃可以打开浏览器的控制台,修改 vm。vm.b 的价老在 vm.a 的值。

公可以像绑定普通属性一样在模板被绑定计算属性。Vue
知道 vm.b 依赖于 vm.a,因此当 vm.a 发生转移时,依赖让 vm.b 的绑定也会见更新。而且极端完美的是我们是声明式地创建这种依赖关系:计算属性之
getter
是清无副作用的,因此也是爱测试暨喻的。

计量属性 vs. $watch

Vue.js 提供了一个计 $watch,它用来观察
Vue 实例上的多寡变动。当部分数目要基于外数据变化时, $watch 很诱人
——
特别是一旦你来自 AngularJS。不过,通常还好之计是采用计算属性而非是一个命令式的 $watch 回调。考虑下例子:

<div id="demo">{{fullName}}</div>
  • 1

  • 1

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

面代码是命令式的双重的。跟匡属性对比:

var vm = new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

诸如此类再好,不是吧?

计算 setter

算算属性默认只是 getter,不过以待经常你吗可以提供一个 setter:

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

今昔于调用 vm.fullName = 'John Doe' 时,setter
会被调用,vm.firstName 和 vm.lastName 也会有相应更新。

有关计算属性背后的原理同技术细节详见算算属性的奥秘。

相关文章