<template>
<h1>我是watchEffect</h1>
<p>名称:{{ data.name }}</p>
<p>年龄:{{ data.age }}</p>
<p>薪资:{{ data.job.salary }}k</p>
<p>职位:{{ data.job.position }}</p>
<button @click="data.job.salary += 10">涨薪1万</button>
<div style="margin-bottom: 100px"></div>
</template>
watchEffect函数
1.watchEffect函数中用到哪个属性就监听哪个属性的变化
2.watchEffect函数和computed对比:
computed注重返回结果,需要返回值
watchEffect注重过程,不需要返回值
3.里面的属性改变时候就会重新执行watchEffect函数
4.watchEffect函数支持取消异步api的请求
const stop = watchEffect(() => {
// 异步api调用,返回一个操作对象
const apiCancel = apiRequest(props.userID)
onInvalidate(() => {
// 取消异步api的调用。
apiCancel.cancel()
})
})
5.停止watchEffect监听
执行stop()
用法示例
<script>
import { reactive } from "@vue/reactivity";
import { watchEffect } from "@vue/runtime-core";
export default {
setup() {
const data = reactive({
name: "测试vue3",
age: 4,
job: {
salary: 30,
position: "资深前端工程师",
},
});
watchEffect(() => {
data.name = "我叫李白";
console.log("哈哈哈999", data.job.salary);
});
return { data };
},
};
</script>