Vue侦听器

Vue侦听器是根据组件状态做DOM更新或者异步更新其他级联状态的。计算属性的主要目标是根据已有数据计算出组件的状态,它是组件内部的计算,计算结果在组件内部应用。侦听器的主要目标是根据组件状态的变动,做级联的或者异步的操作或DOM更新,操作的影响范围比计算属性大得多。

javascript 复制代码
<script setup lang="ts">
import {reactive, ref, watch} from "vue"

   const obj=reactive({name:"obj",count:0});
   
   // count is formal parameter, it's change will not saved to obj.count
   watch(()=>obj.count,(count)=>{
      count=count+3;
      console.log("watch by obj.count by getter :"+count);
   });

   // obj is real parameter , it's change will be saved to obj
   watch(obj,(oldValue,newValue)=>{
       console.log("watch by obj by deep way :"+newValue.count);
   });

   watch(name,(oldName,newName)=>{
        console.log("oldName is "+oldName+", newName is "+newName);
   });

</script>

<template>
      <div>
            <button type="button" @click="obj.count++">测试侦听器</button>
      </div>
</template>

<style>

</style>

侦听器的标准格式如下:

javascript 复制代码
const data=ref({});

watch(data,(oldValue,newValue)=>{
      console.log(oldValue);
      console.log(newValue);
   },{
      immediate:true,  //default value is false, true value means watch callback function will be called immediately
      deep:true,    //default value is false, true value means watch is a deep watch
      flush:"post"   //default value is "pre", "post" means watch callback function can fetch data after Vue DOM updated completely
   });

侦听器默认情况下是懒执行、浅层侦听、在Vue组件更新之前被调用的。

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy3 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite