Vue3-Watch踩坑-watch监听无效

最新推荐文章于 2024-10-10 16:05:00 发布

qq_40441489

最新推荐文章于 2024-10-10 16:05:00 发布

阅读量7.3k

点赞数

分类专栏： vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_40441489/article/details/128004872

版权

本文探讨了Vue3中ref和reactive的区别，以及watch监听时可能遇到的问题。ref适合基本数据类型，reactive适用于深层响应式对象。在使用watch监听时，不加deep无法监听reactive对象的深层变化。同时，当在子组件中监听父组件通过v-model绑定的数据时，需要注意避免特定的bug。理解这些细节对于避免watch监听无效至关重要。

摘要由CSDN通过智能技术生成

ref 与 reactive

ref函数和reactive函数都是用来定义响应式数据

但是reactive更适合定义引用类型、ref适合定义基本数据类型（可接收基本数据类型和对象)

reactive

1、深层次响应式，本质是将传入的数据包装成一个Proxy对象
2、参数必须是对象或者数组，如果要让对象的某个元素实现响应式时，需要使用toRefs，这样每个都需要采用value方式访问

ref

1、函数参数可以是基本数据类型，也可以接受对象类型
2、如果参数是对象类型时，其实底层的本质还是reactive
3、ref响应式原理是依赖于Object.defineProperty()的get()和set()的

watch

在自身组件监听 reactive 对象

let a = reactive({
   test: 123, bg: 456, hh: {
   hhh: 78}})

// 定时器 1
setTimeout(() => {
   
  a.test = 456
}, 2000)
// 定时器 2
setTimeout(() => {
   
  a.hh.hhh = 56 
}, 4000)

// 定时器 3
setTimeout(() => {
   
  a = {
   }  
}, 6000)


// 
watch(a, () => {
   
  // 定时器1， 2 可以触发监听， 不需要deep也可以
  // 定时器3 不能触发监听， 因为对象的地址已经发生改变了
  console.log("change")
})

// 函数返回方式 采用deep可以监听, 不加deep不能监听 
watch(
  () => a,
  () => {
   
    console.log(" func change")
  },
  {

最低0.47元/天解锁文章