vue全解：computed和watch

进阶属性
复习options里面有什么

image.png

会被vue监听

option.data傳給vue后呢，data会被vue监听，对象会被篡改，本来的n会被变成getter和setter。

会被vue实例代理

newVue会得到一个vm，vm就是data的一个代理

每次对data的读写都会被Vue监控

不管读本身还是读代理，vue发现只要你对他进行修改都会更新ui

这节课讲

data变化时除了更新ui，还能做啥
修改另一个属性，

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');

image.png
image.png
image.png image.png
image.png
image.png
image.png

关于缓存

如果依赖的属性没有变化，就不会重新计算
getter/setter默认不会做缓存，vue做了特殊的处理

image.png

2.0watch 侦听

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

2.1何为变化

image.png

实例

2.2语法

文档

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

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

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

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

复杂类型存的是地址

image.png

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: ...})
//其中'xxx'可以改为一个返回字符串的函数

2.2用watch实现一个撤销功能

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

image.png
image.png
image.png
image.png

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

image.png
image.png

2.3用watch模拟computed

image.png image.png
image.png
image.png
image.png

2.4watch的deep和immediate属性

如果object.a变了，object变不变呢》
用deep:true就是变了
用deep:false就是没变
deep的意思是，监听object的时候往深了看
只要object里面的元素变了，虽然object的地址没变
但是vue会通知你object变了，因为里面的元素变了
感觉类似冒泡

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

面试题computed和watch的区别

思路：英文翻译成中文。各自描述，用代码举例

computed就是计算属性的意思，watch就是监听的意思
computed是用来计算一个值的，这个值在调用的时候不需要加括号，它会根据依赖自动缓存，如果依赖不变，computed不会自动计算
watch是用来监听的，监听的某个属性变化了，就去执行这个函数，它有两个选项：immediate和deep，
immediate，它表示在第一次渲染的时候是否要执行这个函数，
deep意思就是我们监听一个对象，是否要看这个对象里面的属性的变化
这就是computed和watch的区别