vue3监听变量（包括对象、数组的特殊用法）

您所在的位置：网站首页 › Vue监听对象中的对象 › vue3监听变量（包括对象、数组的特殊用法）

vue3监听变量（包括对象、数组的特殊用法）

2024-04-05 21:51| 来源: 网络整理| 查看: 265

vue3中我们一般使用watch监听数据，正常使用情况如下：

let data = ref('') watch(data,value => { console.log('data',value) })

当监听的变量为引用型数据时我们需要进行深度监听，否则无法监听，如下：

let data = reactive({}) watch(data,value => { console.log('data',value) },{ deep:true })

当监听对象里面的某个变量时需要使用箭头函数，如下：

let data = reactive({test:""}) watch(() => data.test,value => { console.log('data',value) },{ deep:true })

当监听数组或对象时，不要修改引用地址，即不重新赋值，若要清空数组，应通过 arr.length = 0 实现，否则无法监听，如下所示：

let data = reactive([{a:"1"},{a:"2"}]) setTimeout(() => { // 错误示例 // data = [{a:"1"}] // 正确示例 data.length = 0 data.push({a:"1"}) },1000) watch(data,value => { console.log('data',value) },{ deep:true })

【本文地址】

vue3监听变量（包括对象、数组的特殊用法）

vue3监听变量（包括对象、数组的特殊用法）

今日新闻

推荐新闻