从新回归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 函数中编写。

选项式 APIHook inside setup
beforeCreateNot needed* 不需要
createdNot needed* 不需要
beforeMountonBeforeMount 挂载之前
mountedonMounted 页面加载完成时执行
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted 页面销毁时执行
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated

 

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 组件 非激活");
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值