从新回归Vue之3.0(三)Watch,WatchEffect,生命周期
一,Watch和WatchEffect使用方法
类似于之前的Watch监听,推荐watch监听
1、watch和watchEffect都懒执行副作用,不过watchEffect比较频繁,在vue组件更新之前执行;
2、watch更具体地说明什么状态应该触发侦听器重新运行,watchEffect就没有这么友好;
3、watch访问侦听状态变化前后的值。
<template> <p>{{ count }}</p> <p>{{ originData.count }} {{ originData.user.name }}</p> <button @click="incriment">点击我count增加</button> </template> <script setup lang="ts"> import { ref, reactive, watchEffect, watch } from "vue"; // data const count = ref(0); const user = reactive({ name: "张三" }); const arr = reactive([1, 2, 3, 4]); const originData = reactive({ count: 0, user: { name: "张三", }, arr: [1, 2, 3, 4], }); // props // emit // methods const incriment = () => { console.log(originData.user); originData.count++; count.value++; originData.user.name = "李四"; }; //watch watch( [count, originData.user], (newVals, oldVals) => { console.log("newVals", newVals); console.log("oldVals", oldVals); }, { deep: true, immediate: true, } ); // defineExpose </script>
二,在setup中的生命周期钩子
因为 setup
是围绕 beforeCreate
和 created
生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup
函数中编写。
选项式 API Hook inside setup
beforeCreate Not needed* 不需要
created Not needed* 不需要
beforeMount onBeforeMount 挂载之前
mounted onMounted 页面加载完成时执行
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted 页面销毁时执行
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
activated onActivated
deactivated onDeactivated
import { onMounted, onActivated, onUnmounted, onUpdated, onDeactivated } from "vue";
// 生命周期
onMounted(() => {
console.log("组件挂载");
});
onUnmounted(() => {
console.log("组件卸载");
});
onUpdated(() => {
console.log("组件更新");
});
onActivated(() => {
console.log("keepAlive 组件 激活");
});
onDeactivated(() => {
console.log("keepAlive 组件 非激活");
});