computed vs watch

computed(计算属性)

模板内的表达式非常便利，但设计他们的初衷适用于简单运算的，放入太多逻辑会让模板过重难以维护

假设我们现在需要将用户已有的信息返回到页面
下面代码有三种做法

methods和computed和watch看起来都能达到很多相同效果，但还是有区别的
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，注意如果某个依赖(比如非响应式属性)在该实例范畴之外，则计算属性不会被更新

代码示意

computed既然被称为属性，那我们是不是可以像修改属性一样修改它的值呢

 #### 例2

筛序男女
点击显示对应数据

 computed实现 

watch

watch可以在数据变化的时候执行一个函数
自动传入之前的值和改变后的值,所以非常适合实现历史记录功能
假设我们现在有这么一个需求:
记录每一次数据的变化并且可以返回上一步

代码

例2

我们用watch做上面返回用户信息的例子

先不说其他的，首先代码就要比computed要多很多，所以一个功能如果既可以用computed和watch，建议优先用computed做.

deep

deep属性根据我们的需求来判断，某个对象是否变了

watch完整用法

不要用箭头函数，此时的this是全局对象

watch:{
    data2:function(newValue,oldValue){},//新值，旧值
    data3(){},
    data4:[f1,f2],
    data5:'methodName',//方法名
    data6:{handler:fn,deep:true,immediate:true},
    'object.a':function(){}
}
vm.$wathc('dataName',function(){
    console.log('dataName变了')
},{immeiate:'true'})//也可以加到钩子里，将VM(实例名)换成this就行了

总结:
1. computed计算属性，依赖数据不变的情况下这个值不会重新被计算，可以不加括号，可以缓存
2. watch 监听，监听数据的变化执行一个函数，可以接受新值和旧值，有两个选项:immeiate:表示是否在第一次渲染的时候执行这个函数,deep可以往深看。