1.computed有缓存，关联的data里面的数据不变则不会重新计算，遇到双向绑定的属性值即v-model的属性值需要使用 get()和set(),才能监听
<template>
<div>
<p>num {{num}}</p>
<p>double1 {{double1}}</p>
<input v-model="double2"/>
</div>
</template>
<script>
export default {
data() {
return {
num: 20
}
},
computed: {
double1() {
return this.num * 2
},
double2: {//双向绑定的值需要使用get()和set()
get() {
return this.num * 2
},
set(val) {
this.num = val/2
}
}
}
}
</script>
2.watch监听引用类型需要深度监测，而且是拿不到oldVal，值类型不需要深度监听
<template>
<div>
<input v-model="name"/>
<input v-model="info.city"/>
</div>
</template>
<script>
export default {
data() {
return {
name: '双越',
info: {
city: '北京'
}
}
},
watch: {
name(oldVal, val) {
// eslint-disable-next-line
console.log('watch name', oldVal, val) // 值类型，可正常拿到 oldVal 和 val
},
info: {
handler(oldVal, val) {
// eslint-disable-next-line
console.log('watch info', oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
},
deep: true // 深度监听
}
}
}
</script>
