vue 核心之一 计算属性computed 和侦听属性watch

对于很多初学vue的初级前端开发工程而言，在了解了vue双向数据绑定v-model、模板语法、实例创建等基础的知识之后，对于一些复杂的数据操作还无从下手。

首先，什么是计算属性？

在vue官方文档中，对计算属性的初衷是由于模板内部的表达式虽然已经很便利，但是它只能进行简单的运算，而且面对复杂逻辑的时候，模板过重并且难以维护，所以官方给的建议是对于任何复杂的逻辑都应当使用计算属性。

那么，我们为什么要使用计算属性呢？它到底有什么好处，可以给我们带来哪些便利呢？

我们一起来看下以下代码

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  }
})

对于初学着来说，如果要拆分对message进行处理或者其他的复杂操作，我们可能会想到上面这种形式去处理，但是如果说，要实行for循环呢？

有人会说，我可以在`methods: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}`

这样写，

但是，如果我需要这个message动态的去改变呢？

为了适应复杂的业务逻辑，计算属性cumputed就横空出世了，虽然cumputed和methods可以完成同样的事情，但是copmputed是基于依赖进行缓存的，然而methods需要每一次的去进行计算。

我们可以改写这个例子

<div id="app">
  <h1>{{ reversedMessage}}"</h1>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 app 实例
      return this.message.split('').reverse().join('')
    }
  }
})

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。此时你可以动态的去修改message的值，可以动态的看到reversedMessage再动态的更新。

其次：计算属性是没有setter的，默认的情况下只有getter

不过你可以添加一个setter进去。

例子：

<div id="app">{{ allName }}</div>
// 用computed实现
var vm = new Vue({
  el: '#app',
  data: {
    her: '尼古拉斯赵四',
    he: '刘英'
  },
  computed: {
    allName: function () {
        get: function () {
          return this.her+ ' 的女儿是' + this.lastName
        },
         // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.her= names[0]
          this.he= names[names.length - 1]
        }
    }
  }
})

现在运行vm.allName时，setter也会执行，vm.her和vm.she也会被更新

Watch

虽然计算属性很强大，但是面对复杂的业务需求和奇特的产品经理（虽然很多时候你都想狠狠地胖揍他一顿）的时候，我们也需要一个自定义的侦听器去检测数据的动态变化，当数据进行异步或者数据的开销比较庞大的时候，这个时候watch就显得比较有用了

`<div id="app">

<button @click="add">add</button>

<p>点击次数:{{num}}</p>

</div>

var vm = new Vue({

el: '#app',

data: {

num: 10

},

watch: {

// 监听数据的变化做出对应的改变，并不会生成新的属性
num (val) {
    if (val< 5) this.alert()
}

},

methods: {

alert () {
  alert('点击次数达到'+this.number+'次啦')
},
add () {
  this.number -= 1
}

}

})`

当你点击的时候执行add方法，改变num的值，而watch正在监听num的变化，此时当num<5时,即刻执行alert方法，点击次数到达了4次啦。

在我们需要依赖动态的去改变data的值之后进行逻辑其他逻辑操作的时候以及我们需要监听数据结构层次比较高的时候可以使用deep属性进行深度监听。

好了，喜欢的朋友请关注下方公众号，每天不定期更新更多前沿前端技术内容。