【Vue学习笔记5】Vue3中的响应式：ref和reactive、watchEffect和watch

所谓响应式就是界面和数据同步，能实现实时更新。

Vue 中用过三种响应式解决方案，分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。

1. ref和reactive

vue3中实现响应式数据的方法是使用ref和reactive。

reactive更推荐去定义复杂的数据类型，ref 更推荐定义基本类型。

通过reactive定义响应式数据。

<template>
    <div>
        <h1 @click="add">{{ obj.count }} * 2 = {{ double }}</h1>
    </div>
</template>

<script setup>
import { computed, reactive, watchEffect } from 'vue';

let obj = reactive({   // reactive包括复杂数据类型，使其成为响应式数据。
    count: 1
})

function add() {   // 改变obj.count属性。与ref的不同。
    obj.count++
}

let double = computed(()=>obj.count*2)  // double会自动跟随obj.count变化

watchEffect(() => {
    console.log("数据被修改了",obj.count,double.value)  // 控制台可以看到double数据变化了（通过double.value）。
})

</script>

通过ref定义响应式数据。修改数据要通过.value。

<template>
    <div>
        <h1 @click="add">{{ count }} * 2 = {{ double }}</h1>
    </div>
</template>

<script setup>
import { computed, ref, watchEffect } from 'vue';

let count = ref(1)   // ref包裹简单数据类型，使其成为响应式数据，修改数据要通过.value

function add() {   // 改变count，通过count.value修改值（方式与reactive包裹的数据不同）
    count.value++;
}

let double = computed(()=>count.value*2)  // double会自动跟随count变化

watchEffect(() => {
    console.log("数据被修改了",count.value,double.value)  // 控制台可以看到double数据变化了
})

</script>

通过这两个例子，对比了ref和reactive的区别。

watchEffect 这个函数让我们在数据变化之后可以执行指定的函数。

2. watchEffect举个例子

使用 watchEffect，在数据变化之后，把数据同步到 localStorage 之上，实现 todolist 和本地存储的同步。修改 https://liuchunming.blog.csdn.net/article/details/130508826 第五小节的代码，在function useTodos()中添加如下两行的代码。

...
let todos = ref(JSON.parse(localStorage.getItem('todos')||'[]'));
watchEffect(()=>{    
    localStorage.setItem('todos',JSON.stringify(todos.value))
})
...

效果：
添加待办项后，todos这个响应式变量发生变化，watchEffect中的回调函数就会自动执行，将todos添加到localstorge中。
当清理待办项后，todos这个响应式变量也会发生变化，watchEffect中的回调函数就会自动执行，将todos添加到localstorge中。

3. watch举个例子

需求：在 loading 状态下，去修改浏览器的小图标 favicon。

通过watch监听favicon变化，修改href标签属性。

watch(WatcherSource, Callback, [WatchOptions]) 参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue, oldValue）。
[WatchOptions]：deep、immediate、flush可选。

对于WatchOptions的参数配置：

deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
post：dom更新渲染完毕后，执行回调函数。
sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

参考资料：https://blog.csdn.net/weixin_42349568/article/details/126760186

实现需求：

utils中新建一个favicon.js文件。我们把对图标的对应修改的操作封装成了 useFavicon 函数，并且通过 ref 和 watch 的包裹，我们还把小图标变成了响应式数据。

import { ref, watch } from "vue";

// 【知识点1】：变量和常量定义：
// let是ES6中新增的声明变量的关键字。 let声明的变量只在所处的块级作用域有效，也就是所声明的大括号内。let定义的变量不存在变量提升。
// var 声明变量，不具备这个块级作用域的特性。在大括号外也可以访问。使用var声明变量的时候，其作用域在所在的函数内，而且存在变量提升。
// const关键字。ES6中除了新增的声明常量的关键字，这里的常量就是值值不能变化的量。必须赋值否则就会报错。具有块级作用域，只在所处的块级作用域有效，也就是所声明的大括号内。

// 【知识点2】：JS中的=>代表箭头函数
// 当只有一个参数时，圆括号是可选的：(singleParam) => { statements } 可以写成singleParam => {statements }
// 没有参数的函数应该写成一对圆括号：() => { statements }
// statements简单的，也可以去掉大括号：el => el.href = `${icon}`

export default function useFavicon(newIcon) {  //export default只能有一个
    const favicon = ref(newIcon);
    const updateIcon = (icon) => { //更新icon
        document.head
            .querySelectorAll(`link[rel*="icon"]`)  //反引号``括起来的字符串叫模板字符串，里面可以放空格、换行符等，还可以放JS表达式${}
            .forEach(el => el.href = `${icon}`)
    }
    const reset = () => favicon.value = '/vite.svg' //重置icon, 通过修改faivcon.value
    watch(favicon, // 监听favicon变化
        (i) => {   // favicon变化后，执行的回调函数
            updateIcon(i);
        }
    )
    return { favicon, reset };
}

在关于页面，调用更换favicon的功能：

<template>
    <h1>这是关于页面</h1>
    <button @click="loadding">更换图标</button>
    <button @click="reset">重置图标</button>
</template>

<script setup>
import useFavicon from '../utils/favicon';
let {favicon, reset} = useFavicon();
function loadding(){
    favicon.value = "/geek-favicon-32x32.webp"
}
</script>

点击更换图标，herf变成/geek-favicon-32x32.webp：

点击重置图标，herf变回/vite.svg

4. watchEffect和watch区别

1. watchEffect 不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。
2. 就是 watch 可以获取到新值与旧值（更新前的值），而 watchEffect 是拿不到的。
3. 是 watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖（与computed同理），而后收集到的依赖发生变化，这个回调才会再次执行，而 watch 不需要，因为他一开始就指定了依赖