zoukankan      html  css  js  c++  java
  • vue3中watch函数

    watch

    监听普通类型

     let count = ref(1);
     const changeCount = () => {
    	 count.value+=1
     };
    
    watch(count, (newValue, oldValue) => { //直接监听
    	console.log("count改变了");
    });
    

    监听响应式对象

     let book = reactive({
         name: "js编程",
         price: 50,
     });
     const changeBookName = () => {
     	book.name = "c#"; 
     };
     watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
     	console.log('书名改变了')
     })
    

    监听多个参数执行不同的方法

    不过以上只是一些简单的例子,对于vue2中,watch可以监听多个源,并且执行不同的函数

    image-20210105112257382

    • 注:在群里请教别人时得知的方法,但是在官方文档中未找到,如有错误还望批评指正

    在vue3中同理也能实现相同的情景,通过多个watch来实现,但在vue2中,只能存在一个watch

    watch(count, () => {
    	console.log("count改变了");
    });
    watch(
        () => book.name,
        () => {
            console.log("书名改变了");
        }
    );
    

    监听多个参数执行相同的方法

    在vue2中可能存在需要执行同一事件的情况,解决方法通常是利用computed把他们存入一个对象中,监听这个对象的变化

    image-20210105114955921

    对于vue3,可以免去computed的操作

    watch([() => book.name, count], ([name, count], [preName, preCount]) => {
    	console.log("count或book.name改变了");
    });
    
  • 相关阅读:
    L1-050 倒数第N个字符串 (15分)
    Oracle存储过程的疑难问题
    Linux的细节
    Linux字符设备和块设备的区别
    Shell变量
    游标的常用属性
    Oracle中Execute Immediate用法
    Oracle中的sqlerrm和sqlcode
    Oracle把一个表的数据复制到另一个表中
    Oracle的差异增量和累积增量
  • 原文地址:https://www.cnblogs.com/genhao7/p/14234981.html
Copyright © 2011-2022 走看看