[vue3]HTML Learn Data Day 9

怎么感觉ai学的比我快多了，算了，这是好事。它要是学的不快，有鞭子吃。

原文地址：https://www.cnblogs.com/Reisentyan/p/19837728

1. `reactive` (深层响应式对象)

reactive 可以理解为 ref 的"对象专属版"。ref 通常用于基本数据类型（如数字、字符串），而 reactive 专门用于复杂引用类型（如 Object、Array、Map 等）。

js 复制代码

import { reactive } from 'vue'
const contain = reactive({ name: "www", age: 20 });
// 修改时直接 contain.age = 21 即可，不需要 .value

2. `toRefs` 与 `toRef` (响应式解构)

当我们解构一个响应式对象时，直接解构会丢失响应式：

复制代码

let { name, age } = contain; // 这里的 name 和 age 只是普通变量，不再响应式

解决方案：使用 toRefs 如果改成 let { name, age } = toRefs(contain)，它们就会变成响应式的 ref 对象。

补充注意点： 因为解构出来的值变成了 ref，所以在 <script> 中修改它们时，必须加上 .value：

js 复制代码

let { name, age } = toRefs(contain);
name.value = "newName"; // 必须加 .value

toRef：用于只转换对象中的某一个属性：let temp = toRef(contain, "age")

3. `computed` (计算属性)

js 复制代码

import { computed, ref } from 'vue'

const name = ref('Alice');
const getName = computed(() => {
  console.log('计算了一次');
  return name.value + ' - User';
});

计算属性 vs 方法（函数）：

方法： 如果在模板里调用多次 getName() 函数，模板每次更新都会重新执行函数。
计算属性： 具有缓存特性 。只有当它依赖的数据（name）发生改变时，它才会重新计算。如果依赖没变，无论调用多少次，都会直接返回上一次缓存的结果，性能更好。

补充遗漏点：计算属性不仅能"读"，还能"写" 默认情况下 computed 是只读的，不能直接修改 getName.value = 'xxx'。但如果你确实需要修改，可以传入一个带有 get 和 set 的对象：

js 复制代码

const fullName = computed({
  get() { return firstName.value + ' ' + lastName.value },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

4. `watch` (监视数据的变化)

watch 可以监视以下四种数据源：

ref 定义的数据
reactive 定义的数据
一个 Getter 函数（即返回一个值的函数）
包含上述内容的数组

基础写法与停止监视：

js 复制代码

// watch 返回一个停止函数
const stopWatch = watch(count, (newVal, oldVal) => {
    console.log(`count 变了，新值：${newVal}`);
});

// 调用这个函数即可永久解除该监视器（一次性的操作，关了就不能用旧的重新开）
stopWatch();

监视对象的细节（深度监视）：

监视 reactive 定义的对象： 默认是**强制开启深度监视（deep: true）**的。无论嵌套多深，只要里面变了都会触发，且新值和旧值指向同一个对象。

监视对象中的某个特定属性： 必须写成 Getter 函数形式。

js 复制代码

// 假设 lab 是一个 reactive 对象
watch(() => lab.info.temp, (newTemp) => {
  console.log('温度变化了：', newTemp);
});

补充遗漏点：watchEffect 是什么？ watchEffect 不需要你手动指定要监视谁，你直接写一个回调函数，函数里用到了哪个响应式变量，它就会自动监视哪个变量。并且它在组件初始化时会立即执行一次 （相当于 watch 的 immediate: true）。

js 复制代码

watchEffect(() => {
    // 只要这段代码里用到的 ref/reactive 变了，就会重新执行
    console.log(`当前名字是：${contain.name}`); 
});

5. 标签 `ref` 属性 (获取 DOM 或组件实例)

在 Vue 中尽量不要使用原生 JS 去 document.getElementById，而是使用 ref 获取。

模板部分：

html 复制代码

<h2 ref="isme">我是一个标题</h2>
<ChildComponent ref="childRef" />

逻辑部分：

js 复制代码

import { ref, onMounted } from 'vue'

// 变量名必须和模板上的 ref 属性值完全一致
const isme = ref(); 
const childRef = ref();

onMounted(() => {
    console.log(isme.value); // 获取到真正的 <h2> DOM 元素
    // 补充：如果用在组件标签上，可以获取到子组件的实例（可以调用子组件暴露的方法）
    console.log(childRef.value); 
});

[vue3]HTML Learn Data Day 9