首页 > 其他分享 >vue3 watch 用法

vue3 watch 用法

时间:2023-10-25 13:56:25浏览次数:27  
标签:log watch 用法 num oldValue vue3 ref newValue

<script setup>
    import { ref,computed,watch } from 'vue'
     
      const num = ref(1)
      const name = ref('ming')
      const obj = ref({name:'小明',age:30})
      //watch  简单类型
      // watch(num,(newValue,oldValue) => {
      //   console.log(newValue,oldValue) 
      // })

      //watch  简单类型 复杂类型
      // watch([num,name],(newValue,oldValue) => {
      //   console.log(newValue,oldValue,9900) 
      // })  

      //立即执行和侦听所有属性
      //  watch(obj,(newValue,oldValue) => {
      //   console.log(newValue,oldValue,9900) 
      // },{immediate:true,deep:true})  

      //精确侦听 对象中的某个属性
      watch(()=>obj.value.age,(newValue,oldValue)=>{
        console.log(newValue,oldValue,9900) 
      })



</script>

<template>
  
   <!-- <div style="float:left;width: 100%;">{{ num }}</div><br> -->
   <button @click="obj.age++" >{{obj.age}}</button>
   <button @click="num--" >按钮--</button>
</template>

<style scoped>
 
</style>

 

标签:log,watch,用法,num,oldValue,vue3,ref,newValue
From: https://www.cnblogs.com/xm666/p/17787050.html

相关文章

  • C#之System.Text.Json的用法
    System.Text.Json是C#中的一个JSON序列化和反序列化库,它在.NETCore3.0及更高版本中提供了内置支持。以下是System.Text.Json的用法详解:JSON序列化JSON序列化是将.NET对象转换为JSON字符串的过程。usingSystem;usingSystem.Text.Json;publicclassPerson......
  • [Vue]computed和watch的区别
    computed和watch之间的区别: 1.computed能完成的功能,watch都可以完成。 2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。两个重要的小原则: 1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。 2.所有不......
  • C#中Math.Round(指定四舍五入)、Math.Ceiling和Math.Floor的用法
    1.Math.Round:四舍六入五取偶Math.Round(17.475728155339805,2,MidpointRounding.AwayFromZero)=17.48Math.Round(0.0)//0Math.Round(0.1)//0Math.Round(0.2)//0Math.Round(0.3)//0Math.Round(0.4)//0Math.Round(0.5)//0Math.Round(0.6)//1Math.Round(0.7)//1Math.Round(0......
  • C# Linq to Enitty Lamda中日期格式化,请使用SqlFunctions.DateName及SqlFunctions的其
    vardata=db.Invoice.Select(i=>newInvoiceVM{InvoiceId=i.InvoiceId,GroupIds=SqlFunctions.DateName("yyyy",i.BillDate)+"-"+SqlFunctions.DateName("MM",i.BillDate),Description=i.Description,CreateDate=i.Cre......
  • vue3 elementplus table表格内添加checkbox和行号
    1.仅添加复选框<el-table-columntype="selection"width="55"></el-table-column>2.添加复选框和文字行号在一列<el-table-column><template#header><el-checkboxv-model="selectAll"@change="han......
  • vue3 动态加载组件
    <el-dropdownstyle="margin:0px"><el-buttontype="primary">视图</el-button><template#dropdown><el-dropdown-menu><el-dropdown-itemv-for="dropItemindropI......
  • 分区函数 Partition By 与 row_number() 的用法 & 排序rank()的用法详解(获取分组(分
    partitionby关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partitionby用于给结果集分组,如果没有指定那么它把整个结果集作为一个分组,分区函数一般与排名函数一起使用。准备测试数据:createtable......
  • 可重入锁ReentrantLock在性能测试常见用法
    在进行Java多线程编程的过程中,始终绕不开一个问题:线程安全。一般来说,我们可以通过对一些资源加锁来实现,大多都是通过synchronized关键字实现。在做性能测试时,如果TPS或者QPS要求没有特别高,synchronized一招鲜基本也能满足大部分的需求了。对于一招鲜无法很好解决的问题,就需要......
  • 记录--vue3实现excel文件预览和打印
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成......
  • Vue3中使用富文本编辑器
    在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能npm地址:https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/5.1.12?activeTab=readme官网:Editor 1.安装pnpmadd@wangeditor/editor#或者npminstall@wangeditor/editor--save......