<template> <input type="text" v-model="text1" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') watch(text1, (newVal, oldVal) => { console.log('监听单个数据', newVal, oldVal) }) </script>
<template> <input type="text" v-model="text1" /> <input type="text" v-model="text2" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') const text2 = ref('') watch([text1, text2], (newVal, oldVal) => { console.log('监听一组数据', newVal, oldVal) }) </script>
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> </template> <script setup> import { reactive, watch } from 'vue' const student = reactive({ name: '', age: '' }) watch(student, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', newVal) }) </script>
watch
還有第三個參數,deep
和immediate
,可以加上看看效果
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> </template> <script lang="ts" setup> import { reactive, watch } from 'vue' const student = reactive({ name: '', age: '' }) watch(() => student.name, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', newVal) }, { deep: true, immediate: true }) </script>
監聽物件某一個屬性的時候需要用箭頭函數
關於watchEffect
,官網是這麼介紹的:為了根據響應式狀態自動應用和重新應用副作用,我們可以使用watchEffect
方法,它立即執行傳入的一個函數,同時響應式追蹤其依賴,並在其依賴變更時重新運行該函數。也就是說,我們並不需要傳入一個特定的依賴來源,而且它會立即執行一遍回呼函數,如果函數產生了副作用,那它就會自動追蹤副作用的依賴關係,自動分析出反應源。光看概念可能比較模糊,先來看個最簡單的例子:
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> </template> <script lang="ts" setup> import { reactive, watchEffect } from 'vue' const student = reactive({ name: '', age: '' }) watchEffect(() => { console.log('name: ',student.name, 'age: ', student.age) }) </script>
副作用,那什麼是副作用呢,其實很簡單,就是在監聽之前,我得做一件事。
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> <h3>{{student.name}}</h3> </template> <script lang="ts" setup> import { reactive, watchEffect } from 'vue' const student = reactive({ name: '', age: '' }) watchEffect((oninvalidate) => { oninvalidate(() => { student.name = '张三' }) console.log('name: ', student.name) }, { // pre 组件更新前; sync:强制效果始终同步; post:组件更新后执行 flush: 'post' // dom加载完毕后执行 }) </script>
監聽之前讓student.name
賦值為'張三',無論你輸入什麼值,name
一直都是'張三'
我們用同步語句建立的監聽器,會自動綁定到元件實例上,並且會在元件卸載時自動停止,但是,如果我們在非同步回調裡建立一個監聽器,那它就不會綁定到目前元件上,必須手動去停止,防止記憶體洩漏。那怎麼去停止呢,其實我們只需要呼叫一下watch
或watchEffect
返回的函數
const stop = watchEffect(() => {}) // 停止监听 unwatch()
用了一遍 watch
和watchEffect
之後,發現他兩個主要有以下幾點差異:
watch
是惰性執行的,而watchEffect
不是,不考慮watch
第三個設定參數的情況下,watch
在元件第一次執行的時候是不會執行的,只有在之後依賴項變更的時候再執行,而watchEffect
是在程式執行到此處的時候就會立即執行,而後再回應其依賴變更執行。
watch
需要傳遞監聽的對象,watchEffect
不需要
以上是vue3中watch和watchEffect使用實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!