??博主：初映CY的前說(前端領(lǐng)域) ,??本文核心：watch()與computed的使用【vue2中watch|computed概念詳解】，本文將介紹在vue3中怎么使用這兩者技能
【前言】vue2當(dāng)中有這兩個(gè)技能，那么vue3中的watch與computed是怎么用呢？
?一、watch
1.檢測(cè)reactive內(nèi)部數(shù)據(jù)
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面條'">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj, (newValue, oldValue) => {
// 注意1：監(jiān)聽對(duì)象的時(shí)候，新舊值是相等的
// 注意2：強(qiáng)制開啟深度監(jiān)聽，配置無效
console.log('觸發(fā)監(jiān)聽');
console.log(newValue === oldValue) // true
})
return { obj }
},
}
</script>
注意點(diǎn)：對(duì) reactive 自身的修改則不會(huì)觸發(fā)監(jiān)聽。
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby = { eat: '面條' }">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj.hobby, (newValue, oldValue) => {
// obj.hobby = { eat: '面條' }
console.log('對(duì) reactive 自身的修改不會(huì)觸發(fā)監(jiān)聽')
})
return { obj }
},
}
</script>
一定得注意不能修改reactive本身，修改本身不觸發(fā)
2.監(jiān)聽 ref 數(shù)據(jù)
- 2.1監(jiān)聽一個(gè) ref 數(shù)據(jù)
<template>
<p>{{ age }}</p>
<button @click="age++">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
// 監(jiān)聽 ref 數(shù)據(jù) age，會(huì)觸發(fā)后面的回調(diào)，不需要 .value
watch(age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age }
},
}
</script>
- 2.2監(jiān)聽多個(gè) ref 數(shù)據(jù)
可以通過數(shù)組的形式，同時(shí)監(jiān)聽 age 和 num 的變化。
<template>
<p>age: {{ age }} num: {{ num }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const num = ref(0)
const handleClick = () => {
age.value++
num.value++
}
// 數(shù)組里面是 ref 數(shù)據(jù)
watch([age, num], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age, num, handleClick }
},
}
</script>
立即觸發(fā)監(jiān)聽屬性：
{
immediate: true,
}
<template>
<p>{{ age }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const handleClick = () => {
age.value++
}
watch(
age,
(newValue, oldValue) => {
console.log(newValue, oldValue) // 18 undefined
},
{
immediate: true,
}
)
return { age, handleClick }
},
}
</script>
開啟深度監(jiān)聽 ref 數(shù)據(jù)
?? 問題：修改 ref 對(duì)象里面的數(shù)據(jù)并不會(huì)觸發(fā)監(jiān)聽，說明 ref 并不是默認(rèn)開啟 deep 的。見下
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面條'">修改 obj.hobby.eat</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
// 注意：ref 監(jiān)聽對(duì)象，默認(rèn)監(jiān)聽的是這個(gè)對(duì)象地址的變化
watch(obj, (newValue, oldValue) => {
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
面對(duì)這樣的沒有觸發(fā)watch我們解決辦法有三個(gè)：
- 解決 1：當(dāng)然直接修改整個(gè)對(duì)象的話肯定是會(huì)被監(jiān)聽到的（注意模板中對(duì) obj 的修改，相當(dāng)于修改的是 obj.value）。
-`{{ obj.hobby.eat }}
- 解決 2：開啟深度監(jiān)聽 ref 數(shù)據(jù)。
watch(
obj,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
)
就加上一句話，故此沒有截圖
- 解決 3：還可以通過監(jiān)聽 ref.value 來實(shí)現(xiàn)同樣的效果。
因?yàn)?ref 內(nèi)部如果包裹對(duì)象的話，其實(shí)還是借助 reactive 實(shí)現(xiàn)的，可以通過 isReactive 方法來證明。
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面條'">修改 obj</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
watch(obj.value, (newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
- 監(jiān)聽普通數(shù)據(jù)
監(jiān)聽響應(yīng)式對(duì)象中的某一個(gè)普通屬性值，要通過函數(shù)返回的方式進(jìn)行（如果返回的是對(duì)象/響應(yīng)式對(duì)象，修改內(nèi)部的數(shù)據(jù)需要開啟深度監(jiān)聽）。
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面條'">修改 obj</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
hobby: {
eat: '西瓜',
},
})
// 把 obj.hobby 作為普通值去進(jìn)行監(jiān)聽，只能監(jiān)聽到 obj.hobby 自身的變化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
) */
// 如果開啟了深度監(jiān)聽，則能監(jiān)聽到 obj.hobby 和內(nèi)部數(shù)據(jù)的所有變化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
) */
// 能監(jiān)聽影響到 obj.hobby.eat 變化的操作，例如 obj.hobby = { eat: '面條' } 或 obj.hobby.eat = '面條'，如果是 reactive 直接對(duì) obj 的修改則不會(huì)被監(jiān)聽到（ref 可以）
watch(
() => obj.hobby.eat,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
)
return { obj }
},
}
</script>
?二、computed
作用：computed 函數(shù)用來定義計(jì)算屬性，上述的基礎(chǔ)概念都是同vue2一樣的，關(guān)于vue2中這兩個(gè)知識(shí)點(diǎn)的定義大家可以移步：【vue2】計(jì)算與偵聽的用法。
<template>
<p>firstName: {{ person.firstName }}</p>
<p>lastName: {{ person.lastName }}</p>
<input type="text" v-model="person.fullName" />
</template>
<script>
import { computed, reactive } from 'vue'
export default {
name: 'App',
setup() {
const person = reactive({
firstName: '初',
lastName: '映',
})
// 也可以傳入對(duì)象，目前和上面等價(jià)
person.fullName = computed({
get() {
return person.firstName + '*' + person.lastName
},
set(value) {
console.log(value,'value');//為上述get的返回值
const newArr = value.split('*')
person.firstName = newArr[0]
person.lastName = newArr[1]
},
})
return {
person,
}
},
}
</script>
文章來源：http://www.zghlxwxcb.cn/news/detail-409299.html
至此本文結(jié)束，愿你有所收獲！
期待大家的關(guān)注與支持! 你的肯定是我更新的最大動(dòng)力?。。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-409299.html
到了這里，關(guān)于【vue3】關(guān)于watch與computed的用法看這個(gè)就ok的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
