vue中computed和watch之间的差异

最近项目中使用了vue框架，之前并没有接触过，所以也是一边做一边成长。

踩的坑不少，但是谁还不是踩坑成长的呢~
不管坑是大是小，现在都拿出来做一个分享，既方便自己以后的学习，也可以引来同行们的互相吐槽(๑╹◡╹)ﾉ"""

今天总结的是computed和watch之间的差异对比，如有不对的地方还请各位同行指正~

1、写法上的区别

• 在vue的生命周期的钩子函数里面，经常有mounted updated created
• computed：{} 这里注意英文写法是有"ed"结尾的
• watch : {} 这里没有"ed"结尾，此处要注意不要惯性的写成watched

2、用法上的差异

• computed：是把所有需要依赖其他值计算的值写成对象的key值。
  例如

例1：
var vm = new Vue({
 data: { a: 1 },
 computed: {
    //是最后需要计算的值，而这个值依赖this.a
    //那么这个值要写在对象的key值的位置
    aDouble: function () {
      return this.a * 2
    }
  }
})

这时候模板渲染的{{aDouble}}这个值是2

※ 通过计算的aDouble这个变量不需要在data里面声明，如果声明了就会报错

• watch：把监听的值写成对象的key值
  例如

例2：
var vm = new Vue({
  data: {
    a: 1
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
})
vm.a = 2 // => new: 2, old: 1

这时候如果this.a发生了改变，那么监听a变量发生变化的function就会被执行

※ 需要监听的这个变量需要在data里面声明，如果不声明就会报错

3、是否利用缓存

• computed：拿上面的 例1 代码来说吧~
  如果this.a的值不改变，那么当我们访问this.aDouble的时候，其实拿到的值并不是通过this.a*2计算过后的值，而是拿到的this.aDouble缓存的值，这个缓存的值第一次是哪里来的呢 ---> vue实例第一次被创建的时候算出来的

计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
来自：https://segmentfault.com/q/1010000009263244?sort=created dodomonster的回答。

• watch：拿上面的 例2 代码来说吧~
  只要a的值发生了变化，就会触发事件

---

给第一次写技术文章的自己：

• 尽管computed和watch的区别在网上已经有很多的答案了，我也是参考了大神们的答案，但是为什么还是写下来了呢，因为我发现在写文章的时候，我会对这个知识点理解的更加深刻。

• 而且在平台上发表文章的时候我本着严谨的态度在措辞上斟酌了很久，并且也会查一些延伸的知识，对相关的技术用语描述也比较谨慎。

• 还学了一点点的markdown的语法，多学一点总是有好处的嘛~

• 现在看到满篇的加粗，斜体，引用，分割线，代码块引用，无序列表，以后学着让自己的文章的排版会更加流畅，清晰。