compted与watch之间有什么不同点

最近不少小伙伴私底下和我聊了下vue中的computed与watch之间的差别，今天小编和大家一起谈论一下二者之间的差别，希望对各位小伙伴有所帮助。

自己的理解：

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控，

比如：

watch:{
goodsList.price(newVal,oldVal){    //监控商品列表中是商品价格}
}
}

监听appversionName用下面的方式，将对象和属性用引号的方式：‘对象名.属性名’（newVal,oldVal）{}

watch: {
  "dialogForm.appversionName"(newVal, oldVal) {
    console.log("新值："+newVal,"旧值："+ oldVal);
  }
},

在了解二者差别之前我们先复习一下vue的一些属性，请看下图：

computed -计算属性

不需要加括号

被计算出来的属性就是计算属性

gettersetter用法

new Vue({
    data:{
      user:{
        email:"fangyihang@qq.com",
        nickname:"fangfang",
        phone:'13333333'
      }
    },
    //不如用computed来计算displayName
    template:`
      <div>
        {{user.nickname || user.email || user.phone}}
      </div>  
      `
  }).$mount('#app');

关于缓存

如果依赖的属性没有变化，就不会重新计算

getter/setter默认不会做缓存，vue做了特殊的处理

watch 侦听

当数据变化时，执行一个函数

何为变化

语法

obj原本是{a:'a'}，现在obj={a:'a'}

obj变了没有，obj.a变了没有

简单类型看值，复杂类型（对象）看地址

因为在内存中，简单类型存的是值

复杂类型存的是地址

watch:{
 不能用o1: ()=>{}//这种不能用，这里的this是全局对象
o2: function(value, oldValue){}
o3(){}
o4:[f1, f2]
o5: 'methodName'
o6: {handler:fn, deep: true, immediate: true},
'object.a': function(){}
}
vm.$watch('xxx', fn, {deep: ..., immediate: ...})

用watch实现一个撤销功能

按下按钮后会计算且显示计算历史的页面

利用撤销模式的开关来控制watch是否监听n，不过这有个问题，watch是异步的，当执行完了undo函数后才执行watch，所以在undo函数中对撤销模式的开关是没有用的

2.3用watch模拟computed

watch的deep和immediate属性

如果object.a变了，object变不变呢？

用deep:true就是变了

用deep:false就是没变

deep的意思是，监听object的时候往深了看

只要object里面的元素变了，虽然object的地址没变

但是vue会通知你object变了，因为里面的元素变了

感觉类似冒泡  immediate，它表示在第一次渲染的时候是否要执行这个函数

面试题computed和watch的区别

computed就是计算属性的意思，watch就是监听的意思；

computed是用来计算一个值的，这个值在调用的时候不需要加括号，它会根据依赖自动缓存，如果依赖不变，computed不会自动计算；

computed是依赖数据变化才去计算，watch主动处理数据变化；

compted没法处理异步的数据，watch可以直接处理异步；

watch是用来监听的，监听的某个属性变化了，就去执行这个函数，它有两个选项：immediate和deep；

immediate，它表示在第一次渲染的时候是否要执行这个函数，

deep意思就是我们监听一个对象，是否要看这个对象里面的属性的变化,

各自适用的场景：

watch适合处理：

一个数据影响多个数据，更适合处理数据相互独立的场景，主动监听

computed适合处理：

一个数据受多个数据的影响/多个数据影响一个数据，数据相互不独立的场景，也可以（get set）

这就是computed和watch的区别以及各自适用的场景。