Vue3 学习总结补充（一）

1、Vue3中为什么修改变量的值后，视图不更新？

<template><div>app</div><div class="container">{{ msg1 }}{{ msg2 }}</div><button @click="say()">按钮</button>
</template><script setup>
import { reactive, ref } from 'vue'let msg1 = 'hi'
let msg2 = ref('hello')
const say = () => {console.log(msg1) // himsg1 = 'hi vue3' // 这里修改 msg1的值，console.log('msg1', msg1) // 这里可以获取到修改后的值，hi vue3，但是视图中的 msg1 没有更新，原因是 msg1不是响应式的。msg2.value = 'hello vue3 ' // 这里修改 msg2的值console.log('msg2', msg2) // 这里可以获取到修改后的值，hello vue3，视图中的 msg2 也会更新，原因是 msg2是响应式的。
}
</script>

2、使用 ref 还是 reactive？

• reactive 可以转换【复杂数据类型】(例如：对象、数组等) 成为响应式数据，但是不支持简单数据类型（例如：字符串、数值、布尔值）；
• ref 可以转换【简单数据类型】或【复杂数据类型】 为响应式数据，但是操作的时候需要 .value。

如果能确定数据是复杂数据类型，并且定义的属性也是知道的，则可以使用 reactive 转成响应式数据，如果不满足以上条件，则使用 ref。

代码如下：

    // 1. 明确login对象有两个字段，需要使用 reactiveconst login = reactive({username: '',password: ''})// 2. 后台返回的数据对象const data = ref(null)const res = await axios.get('/login')data.value = res.data // 把不是响应式的 res 赋值给 响应式data中的value，data仍然是响应式的。// 3. 思考：为什么以下方式不可行？const data = reactive({ })const res = await axios.get('/login')data = res // 由于res 不是响应式的，然后把不是响应式的 res 赋值给 响应式的data ，那么data就不是响应式的了。

3、reactive 为什么会有响应性连接丢失情况？

响应性连接丢失的意思是：一个响应式对象原本是响应式的，但随意通过 “赋值”操作，把一个非响应式的数据，赋值给响应式的数据对象，这个响应式对象就变成了非响应式数据对象了。

reactive API有两个限制性情况：

• 情况1：reactive 仅支持复杂数据类型（对象、数组等），对简单数据类型（字符串、数值、布尔值）等原始类型不支持。

• 情况2：因为Vue 的响应式系统是通过属性访问进行跟踪的，必须始终保持对该响应式对象的相同引用。所以不可以随意地“替换（赋值）”一个响应式对象，因为这将导致对初始引用的响应性连接丢失。

  也就是说：如果重新赋值或解构赋值，就会丢失原来响应式对象的引用地址，然后变成了一个新的引用地址，因为这个新的引用地址指向的对象是没有经过 reactive 处理的，所以就是一个普通对象，而不是响应式对象。

❌ 响应性连接丢失 代码举例1：

    const data = reactive({ })const res = await axios.get('/login')data = res // 由于res 不是响应式的，然后把不是响应式的 res 赋值给 响应式的data ，那么data就不是响应式的了

❌ 响应性连接丢失 代码举例2：

// 将响应式对象的属性直接赋值或解构赋值时，或是将该属性传入一个函数时，也会失去响应性连接let dataCount = reactive({ count: 0 })// 响应式对象的属性直接赋值时，响应式对象的属性响应性连接丢失，也就是说：dataCount.count 失去响应式连接，但不会影响 dataCount (dataCount仍然是响应式数据对象)
let num = dataCount.count // 响应式对象的属性值 直接赋值给了 num
num++// 响应式对象属性解构时，响应式对象属性（dataCount.count）响应性连接丢失,但不会影响 dataCount
let { count } = dataCount // 响应式对象的属性解构赋值
count++// change函数接收一个普通数字,将无法跟踪 dataCount.count 的变化, dataCount.count失去响应性连接
const change = (item) => {console.log(item)
}
change(dataCount.count)

4、watch的不同使用方法

watch 第一个参数：不同形式的数据源，

• 可以是 ref（含计算属性）
• 一个getter函数
• 一个响应式对象
• 或多个数据源组成的数组。

注意: watch不能侦听到响应式对象的属性值，比如：watch(data.count,()=>{ })，可以提供一个getter函数进行返回响应式对象的属性值。

watch 第二个参数：回调函数，当数据源发生变化时，执行回调函数

watch 第三个参数【可选】：是一个配置项，

• deep 用于强制深度遍历
• immediate 用于立即执行第二个参数中的回调函数
• flush 用于调整回调函数的刷新时机
• onTrack / onTrigger 调试侦听器的依赖

watch 的五种不同使用方法如下：

<template><div>app</div><div>{{ count }}</div><button @click="count++">累加</button>
</template><script setup>
import { ref, reactive, watch } from 'vue'const count = ref(0)
const obj = reactive({name: 'xiaozhu',age: 18,info: {height: 180,weight: 70,},
})// 使用方法1：第一个参数为 ref
watch(count, (newVal, oldVal) => {console.log('newVal', newVal) // 累加后 新的值console.log('oldVal', oldVal) // 累加前 旧的值
})// 使用方法2：第一个参数为 getter函数
watch(() => obj.age,(newVal, oldVal) => {console.log('newVal', newVal) // 20console.log('oldVal', oldVal) // 18}
)
setTimeout(() => {obj.age = 20
}, 1000)// 使用方法3：第一个参数为 一个响应式对象中的 简单数据类型
watch(() => obj.name, // name为obj对象中的一个字符串类型(newVal, oldVal) => {console.log('改变了')console.log('obj.name', obj.name) // 筱竹console.log('newVal', newVal) // 筱竹console.log('oldVal', oldVal) // xiaozhu}
)
setTimeout(() => {obj.name = '筱竹'
}, 1000)// 使用方法4：第一个参数为 一个响应式对象中的 复杂数据类型时，需要开启深度监听（设置deep选项）
watch(() => obj.info, // info 为obj对象中的一对象类型(newVal, oldVal) => {console.log('obj.info.height', obj.info.height) // 筱竹console.log('newVal', newVal) // 筱竹console.log('oldVal', oldVal) // xiaozhu},{ deep: true } // 开启深度监听
)
setTimeout(() => {obj.info.height = 175
}, 1000)// 使用方法5：第一个参数为 多个数据源组成的数组
watch([count, obj], () => {console.log('count.value', count.value) // 点击 累加按钮后，count+1console.log('obj.info.weight', obj.info.weight) // 65
})
setTimeout(() => {obj.info.weight = 65
}, 1000)
</script>

5、watchEffect和 watch 的区别

区别1：数据源的区别

• watch 是需要侦听一个数据源（ref、响应式对象等），当依赖数据更新时执行回调函数；
• watchEffect 不需要设置侦听的数据源，而是自动收集依赖数据，当依赖数据更新时会立即执行回调函数

<template><div>app</div><div>{{ count }}</div><button @click="count++">累加</button>
</template><script setup>
import { ref, reactive, watch, watchEffect } from 'vue'const count = ref(0)//  watchEffect 和 watch 区别1：// watchEffect 不需要设置侦听的数据源，就可以自动收集依赖（以下可以自动收集 ref 数据源）
watchEffect(() => {console.log('count.value', count.value) 
})// watch 需要设置侦听的数据源，只有设置了数据源，才能侦听数据源的变化
watch(count, (newVal, oldVal) => {console.log('newVal', newVal) console.log('oldVal', oldVal) 
})
</script>

区别2：获取新值和旧值的区别

• watch 在回调函数中获取到 新值（变化后的值）和 旧值（变化之前的值）；
• watchEffect 在回调函数中 只可以获取到新值（变化后的值），不能获取到 旧值（变化之前的值）；

//  watchEffect 和 watch 区别2：// watchEffect 只能拿到 新值
watchEffect(() => {console.log('count.value', count.value) // 只能拿到 新值
})// watch 可以获取到 新值和 旧值
watch(count, (newVal, oldVal) => {console.log('newVal', newVal) // 累加后 新的值console.log('oldVal', oldVal) // 累加前 旧的值
})

区别3：惰性执行和非惰性（立即）执行的区别

• watch 的回调函数具有一定的惰性 当第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate 选项为true时可以变为非惰性（可以立即执行），页面首次加载就会执行；
• watchEffect 的回调函数可以立即执行，没有惰性，页面的首次加载就会执行；

//  watchEffect 和 watch 区别3：
const todoId = ref(1)
const data = ref(null)// watchEffect 中的回调函数会立即执行，不需要指定 immediate: true
watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})// 在 watch 中想要立即执行回调函数，就需要 设置 immediate: true
// watch 默认是惰性的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

6、watchEffect和 watch 使用注意点

【注意点1】： 侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，必须手动停止侦听，以防止内存泄漏。例如：

// 它会自动停止 （ watch同理 ）
watchEffect(() => {})// 这个则不会！ （ watch同理 ）
setTimeout(() => {watchEffect(() => {})
}, 100)// 要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：
const unwatch = watchEffect(() => {})// 当该侦听器不再需要时
unwatch()

【注意点2】： 需要异步创建侦听器的情况很少，请尽可能选择同步创建，如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：

// 需要异步请求得到的数据
const info = ref(null)watchEffect(() => {if (info.value) {// 数据加载后执行某些操作...}
})

7、使用ref修改DOM元素

<template><div ref="ref_item">app</div><input type="button" value="修改DOM元素" @click="change()" />
</template><script setup>
import { ref, onMounted } from 'vue'const ref_item = ref(null)// 注意： 获取元素需要在Vue3 生命周期钩子 onMounted中获取，如果在 setup 中是获取不到的，因为setup中类似Vue2声明周期钩子函数中的beforeCreate和 created ，此时DOM还没生成，所以获取不到DOM。
onMounted(() => {// 获取DOM元素console.log('ref_item.value.innerText', ref_item.value.innerText) // app
})const change = () => {// 修改DOM元素的值ref_item.value.innerText = '你好 Vue3'console.log('ref_item.value.innerText', ref_item.value.innerText) // 你好 Vue3
}
</script>