偵聽器

1.計算屬性允許我們聲明性地計算衍生值,而在有些情況下，我們需要狀態(tài)變化時執(zhí)行一些方法例如修改DOM。

2.偵測數(shù)據(jù)源類型，watch的第一個參數(shù)可以市不同形式的‘數(shù)據(jù)源’，它可以市一個ref(包括計算屬性)，一個響應式對象，一個getter函數(shù)或者多給數(shù)據(jù)源組成的數(shù)組，不可以直接偵測一個響應式對象的屬性值。

3.深層偵聽器,直接給watch()傳入一個響應式對象，會隱式地創(chuàng)建一個深層偵聽器，該回調函數(shù)在所以嵌套的變更都會觸發(fā),深度偵測需要遍歷所以被偵測的對象，當用于大型數(shù)據(jù)結構時，開銷很大因此在必要時使用它。

4.即時回調的偵聽器，watch默認時懶執(zhí)行，只有當數(shù)據(jù)發(fā)生變化時才觸發(fā)回調，但是有的場景需要偵聽器在創(chuàng)建的時候立即執(zhí)行一次可以使用 immediate:true 來強制偵聽器立即執(zhí)行。

5.watchEffect() 可以消除手動維護依賴列表的負擔，如果你需要偵聽一個數(shù)據(jù)結構中的幾個屬性，watchEffect()比深度偵聽器更有效，因為它將只跟蹤回調中使用到的屬性，而不是遞歸跟蹤所有屬性，watchEffect僅會在其同步執(zhí)行期間才會追蹤依賴,在使用異步回調只有第一個await才會被追蹤。

6.watch和watchEffect都能響應地執(zhí)行有副作用的回調，它們之間主要是追蹤響應式依賴的方式，watch只追蹤明確的數(shù)據(jù)源，它不會追蹤任何在回調中訪問到的東西，另外，僅在數(shù)據(jù)源確實改變才會觸發(fā)，watch會避免在發(fā)生副作用時追蹤依賴因此，我們能更準確地控制回調函數(shù)的觸發(fā)時機，watchEffect則會在副作用發(fā)生期間追蹤依賴，它會在同時執(zhí)行過程中，自動追蹤所有能訪問到的響應式屬性，這更方便，而且代碼往往更簡潔，使得響應式依賴關系會不那么明確。

7.回調函數(shù)觸發(fā)時機，當你更改了響應式狀態(tài)，它可能會同時觸發(fā)Vue組件更新和偵聽器回調，默認情況下用戶創(chuàng)建的偵聽器會在Vue組件更新之前被調用,這意味偵聽器中訪問DOM是在Vue更新之前的狀態(tài)，如果你想在Vue更新DOM之后需要指明 flush:'post' 選項。

8.停止偵聽器，在setup()或者<script setup>中用同步語句創(chuàng)建的偵聽器，會自動綁定到宿主組件實例上，并且會在宿主組件上自動卸載停止，因此你不必關系怎么停止一個偵聽器，如果你為了防止內存泄漏需要手動停止它就調用watch或watchEffect返回的函數(shù)。

淺層偵聽器?

<script setup>import {ref,watch} from "vue"const data = ref('')watch(data, async(newQuestion,oldQuestion)=>{console.log('數(shù)據(jù)發(fā)生了改變')})</script>

深層偵聽器?

<script setup>import {ref,watch} from "vue"const data = reactive({count:0})watch(data, async(newQue/stion,oldQuestion)=>{console.log('數(shù)據(jù)發(fā)生了改變')},{deep:true}
)</script>

?模板引用

1.雖然Vue的聲明性渲染模型抽象了大部分對DOM的直接操作，但在某些情況下，我們仍然需要直接訪問底層DOM元素，實現(xiàn)這一點我們可以使用特殊的ref，它允許我們在一個特定的DOM元素或子組件實例被掛載后,獲得對它得直接引用。

2.在v-for中的模板引用ref，對應的ref中包含的值是一個數(shù)組，它將在元素被掛載后包含對應整個列表的所以元素。

3.函數(shù)模板引用，除了使用字符串作為名字ref還可以綁定一個函數(shù)在每次組件更新時被調用。

4.組件上的ref，如果一個子組件使用選項式API或者沒有使用<script setup>，被引用的組件實例和該子組件的this完全一致，這意味著父組件對子組件的被一個屬性和方法都有完全的訪問權，這使得在父組件和子組件之間創(chuàng)建緊密耦合的實現(xiàn)細節(jié)變得很容易，當然也因此，應該在絕對需要時才使用組件引用。

<script setup>import {ref,onMounted} from "vue"const input= ref(null)onMounted(()=>{input.value.focus()})
</script>
<template><input :ref="input">
</template>

<script setup>import {ref,onMounted} from "vue"const input= ref(null)onMounted(()=>{input.value.focus()})
</script>
<template><input :ref="(el)={}">
</template>

?