文章目录

• • • 1、Vue3中为什么修改变量的值后，视图不更新？
    • 2、使用 ref 还是 reactive？
    • 3、reactive 为什么会有响应性连接丢失情况？
    • 4、watch的不同使用方法
    • 5、watchEffect和 watch 的区别
    • • 区别1：数据源的区别
      • 区别2：获取新值和旧值的区别
      • 区别3：惰性执行和非惰性（立即）执行的区别
    • 6、watchEffect和 watch 使用注意点
    • 7、使用ref修改DOM元素

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

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 的五种不同使用方法如下：

5、watchEffect和 watch 的区别

区别1：数据源的区别

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

区别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元素