1.computed有緩存，關(guān)聯(lián)的data里面的數(shù)據(jù)不變則不會(huì)重新計(jì)算吨掌，遇到雙向綁定的屬性值即v-model的屬性值需要使用 get()和set(),才能監(jiān)聽(tīng)
<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監(jiān)聽(tīng)引用類(lèi)型需要深度監(jiān)測(cè)斩个，而且是拿不到oldVal胯杭，值類(lèi)型不需要深度監(jiān)聽(tīng)
<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) // 值類(lèi)型，可正常拿到 oldVal 和 val
},
info: {
handler(oldVal, val) {
// eslint-disable-next-line
console.log('watch info', oldVal, val) // 引用類(lèi)型萨驶，拿不到 oldVal 歉摧。因?yàn)橹羔樝嗤藭r(shí)已經(jīng)指向了新的 val
},
deep: true // 深度監(jiān)聽(tīng)
}
}
}
</script>
