菏泽网站建设电话,抖店怎么推广,网站开发合同的付款方式,免费招聘模板下载watchEffect 函数#xff1a;自动收集依赖源#xff0c;不用指定监听哪个数据#xff0c;在监听的回调中用到哪个数据#xff0c;就监听哪个数据。
而 watch 函数#xff1a;既要指定监听的数据#xff0c;也要指定监听的回调。
watchEffect 函数#xff1a;类似于 co…watchEffect 函数自动收集依赖源不用指定监听哪个数据在监听的回调中用到哪个数据就监听哪个数据。
而 watch 函数既要指定监听的数据也要指定监听的回调。
watchEffect 函数类似于 computed 计算属性但是 watchEffect 注重的是过程回调函数的函数体所以不用写返回值。
而 computed 函数更注重计算出来的值回调函数的返回值所以必须要写返回值。
watchEffect 函数的使用
templateh2计数{{ sum }}/h2button clicksum点我加1/buttonhr /h2姓名{{ info.name }}/h2h2薪资{{ info.job.money }}/h2button clickinfo.name 风修改姓名/buttonbutton clickinfo.job.money增加薪资/buttonhr /h2年龄{{ info.age }}/h2button clickinfo.age修改年龄/button
/templatescript
// 引入 watchEffect 侦听属性
import { watchEffect, ref, reactive } from vue
export default {name: Home,setup() {// 创建 ref 数据let sum ref(0);// 创建 reactive 数据let info reactive({name: 张三,job: {money: 20},age: 18});// 监听所用数据的变化watchEffect(() {const x1 sum.value; // 使用 ref 数据const x2 info.name; // 使用 reactive 数据const x3 info.job.money; // 使用深层数据console.log(watchEffect函数用到的数据变了);console.log(x1, x2, x3);})// 返回数据return { sum, info }}
}
/script
注watchEffect 函数不需要指定监听哪个数据只要在 watchEffect 函数中用到的数据发生了变化watchEffect 函数就会执行。
