vue watcheffect,vue中watch的使用方法
主要介绍了VUE3中手表和watchEffect的用法的详细讲解，通过示例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。
Watch watchEffect和watchEffect都是监听器，只是写法和用法不同。
看ref型和反应型的时候手表函数的写法是不一样的。
当观察器监听引用类型时：
脚本
从“vue”导入{ref，watch}
导出默认值{
setup() {
const state=ref(0)
手表(状态，(新值，旧值)={
Console.log(`原始值为$ {oldvalue } `)
Console.log(`新值是$ {newvalue } `)
/* 1秒后打印结果：
原始值为0。
新值为1。
*/
})
//1秒后将状态值设置为1
setTimeout(()={
状态.值
}, 1000)
}
}
/脚本
当手表监听反应型时：
脚本
从“vue”导入{反应式，观察式}
导出默认值{
setup() {
常量状态=反应性({count: 0})
watch(()=state.count，(newValue，oldValue)={
Console.log(`原始值为$ {oldvalue } `)
Console.log(`新值是$ {newvalue } `)
/* 1秒后打印结果：
原始值为0。
新值为1。
*/
})
//1秒钟后，将state.count的值设置为1
setTimeout(()={
状态.计数
}, 1000)
}
}
/脚本
WatchEffect它与watch的区别主要在于以下几点：
您不需要手动传递依赖项。每次初始化时，都会执行一个回调函数来自动获取依赖关系。不能得到原始值，只能得到改变后的值脚本。
从“vue”导入{reactive，watchEffect}
导出默认值{
setup() {
const state=reactive({ count: 0，name: zs })
watchEffect(()={
console.log(状态.计数)
console.log(state.name)
/*初始化时打印：
0
零偏移(zero shift)
1秒钟内打印：
一个
限位开关（Limit Switch）
*/
})
setTimeout(()={
状态.计数
state.name=ls
}, 1000)
}
}
/脚本
根据以上特点，我们可以选择使用哪个监听器。
此外，watch和watchEffect侦听器可以在同一个页面中多次使用。当分别听取多个变量时，
关于VUE3中watch和watchEffect的详细用法，本文就到这里。更多关于VUE3 watch和watchEffect的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。