Vue3理解(9)

侦听器

1.计算属性允许我们声明性地计算衍生值,而在有些情况下，我们需要状态变化时执行一些方法例如修改DOM。

2.侦测数据源类型，watch的第一个参数可以市不同形式的‘数据源’，它可以市一个ref(包括计算属性)，一个响应式对象，一个getter函数或者多给数据源组成的数组，不可以直接侦测一个响应式对象的属性值。

3.深层侦听器,直接给watch()传入一个响应式对象，会隐式地创建一个深层侦听器，该回调函数在所以嵌套的变更都会触发,深度侦测需要遍历所以被侦测的对象，当用于大型数据结构时，开销很大因此在必要时使用它。

4.即时回调的侦听器，watch默认时懒执行，只有当数据发生变化时才触发回调，但是有的场景需要侦听器在创建的时候立即执行一次可以使用 immediate:true 来强制侦听器立即执行。

5.watchEffect() 可以消除手动维护依赖列表的负担，如果你需要侦听一个数据结构中的几个属性，watchEffect()比深度侦听器更有效，因为它将只跟踪回调中使用到的属性，而不是递归跟踪所有属性，watchEffect仅会在其同步执行期间才会追踪依赖,在使用异步回调只有第一个await才会被追踪。

6.watch和watchEffect都能响应地执行有副作用的回调，它们之间主要是追踪响应式依赖的方式，watch只追踪明确的数据源，它不会追踪任何在回调中访问到的东西，另外，仅在数据源确实改变才会触发，watch会避免在发生副作用时追踪依赖因此，我们能更准确地控制回调函数的触发时机，watchEffect则会在副作用发生期间追踪依赖，它会在同时执行过程中，自动追踪所有能访问到的响应式属性，这更方便，而且代码往往更简洁，使得响应式依赖关系会不那么明确。

7.回调函数触发时机，当你更改了响应式状态，它可能会同时触发Vue组件更新和侦听器回调，默认情况下用户创建的侦听器会在Vue组件更新之前被调用,这意味侦听器中访问DOM是在Vue更新之前的状态，如果你想在Vue更新DOM之后需要指明 flush:'post' 选项。

8.停止侦听器，在setup()或者<script setup>中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件上自动卸载停止，因此你不必关系怎么停止一个侦听器，如果你为了防止内存泄漏需要手动停止它就调用watch或watchEffect返回的函数。

浅层侦听器 

<script setup>import {ref,watch} from "vue"const data = ref('')watch(data, async(newQuestion,oldQuestion)=>{console.log('数据发生了改变')})</script>

深层侦听器 

<script setup>import {ref,watch} from "vue"const data = reactive({count:0})watch(data, async(newQue/stion,oldQuestion)=>{console.log('数据发生了改变')},{deep:true}
)</script>

 模板引用

1.虽然Vue的声明性渲染模型抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素，实现这一点我们可以使用特殊的ref，它允许我们在一个特定的DOM元素或子组件实例被挂载后,获得对它得直接引用。

2.在v-for中的模板引用ref，对应的ref中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所以元素。

3.函数模板引用，除了使用字符串作为名字ref还可以绑定一个函数在每次组件更新时被调用。

4.组件上的ref，如果一个子组件使用选项式API或者没有使用<script setup>，被引用的组件实例和该子组件的this完全一致，这意味着父组件对子组件的被一个属性和方法都有完全的访问权，这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该在绝对需要时才使用组件引用。

<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>