总结：watch 监听属性 和computed 计算 属性
watch
- 类型：
vm.$watch( expOrFn, callback, [options]
- 参数
expOrFn :{string | function } 字符串和方法
callback: {Object | function } 对象和方法
[options] : {Object| options} 对象和参数
返回值 {function} unwatch 用法： 观察一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值 表达式只接收简单的键路径；复杂的表达式，用一个函数取代。 - 应用
监听prpos ,$emit或本组件的值执行异步操作 - 特点：
无缓存性，页面重新渲染时值不变化也会执行。 - 有deep immediate
computed :
- 类型：
{ [key: string]: Function | { get: Function, set: Function } }
1.参数
[key: string]: Function
{ get: Function, set: Function }
2. 应用
简化tempalte 里面的{{}}计算和处理props或$emit 的传值
3. 特点
具有缓存性 ，页面重新渲染值不变化 计算属性会立即返回之前的计算结果，而不必再次执行函数。
4. 有getter setter
watch 监听属性
监听自身属性变化 监听路由变化 一个数据影响多个数据
// data部分
a:1,
b:2,
c:,
d:4,
e:{
f:{
g:5
}
}
watch :{
a(val,oldval){
console.log(val,oldval)
}
// 方法名
b:'someMethods',
// 该回调会在任何被侦听的对象的property改变时被调用，不论其被嵌套多深
c:{
handler(val,old){
},
deep:true
},
// 该回调再侦听之后就立即被调用
d:{
handler:"somemethods",
immediate:true
}，
// 可以传入回调数组，他们会被逐一调用
e:[
'handle1',
handle2(){ },
{
handler:handle3(){ },
}
],
'e.f'(){ }
}
}
不要使用箭头函数来定义watcher函数
箭头函数绑定了父级作用域的上下文 ，this不会按照期望指向Vue实例
eg1
<template>
<div class="example">
{{message}}
<br>
<input v-model="question">
<p>
{{answer}}
</p>
</div>
</template>
<script>
export default {
name:"watchDemo",
data(){
return{
message:'lemon and oragnge?',
question:'',
answer:''
}
},
watch:{
question(){
this.answer =' qiu de ma dei'
this.debounce()
}
},
methods:{
debounce(){
if(this.question =='lemon'){
this.answer ='酸Q 酸 Q'
}else{
this.answer='我也要吃'
}
}
}
}
</script>
// vm.$watch 返回一个取消观察函数，用来停止触发回调
var unwatch = vm.$watch('a',cb)
// 之后取消观察
unwatch()
### 选项 deep
检查对象内部值的变化 ，监听数组是不需要的
### 选项 immediate
将立即以表达式的当前值触发回调
### 监听路由变化
watch :{
'$route':function(new,old){
}
}
computed 计算属性
一个数据影响多个数据
在一个计算属性中可以完成各种复杂的逻辑，包括运算，函数调用等，只要最终返回一个结果就可以。
每一个计算属性都包含了一个getter()和一个setter() get()取值的时候调用 set 重新赋值的时候调用
本质是方法 但是不能调用
不支持异步 异步操作无效无法监听 用于多对一的情况
get(getter): get函数中的值,被调用或被修改就会调用
set(setter):**说绑定的数据被修改后会返回最新的数据**
<template>
<div>
<input type="checkbox" v-model="checked">
</div>
</template>
<script>
export default {
name:"computedDemo",
data(){
return{
list:['lemon','orange','orange','mango']
}
},
// 完整写法
computed:{
checked:{
get(){
return this.list.every(x=>x=='flower') // list被调用就回调用
},
set(v){
console.log(v) // 含绘制是修改的具体值
}
}
},
// 简写 读取的时候
computed:{
checked(){
return this.list.every(x=>x=='flower') // list被调用就回调用
}
}
}
</script>
