vue3中watch的使用方法和注意事项

末蓝、 2022-09-02 01:13 48阅读 0赞

这里实例平时用到的几种监听  
1、监听父组件传来的参数props  
2、监听从父组件传来props里的某一个参数  
3、监听data的数据  
4、监听多个参数  
5、深度监听

直接上代码

<template>
      <div class="component">
      </div>
    </template>
    
    <script> // 引入 watch import { defineComponent, reactive, toRefs, watch } from 'vue' export default defineComponent({ props: { checkedListData: { type: Array }, wordData: { type: Array, default: () => ([]) }, type: { type: String, default: '分类' } }, setup (props, context) { const data = reactive({ tableData: [] }) // 监听父组件传来的参数 watch(props, (val) => { // 监听从父组件接收的所有参数，只要有参数变化就会触发 console.log('props接收的值', val) }, { deep: true }) // 监听从父组件传来的某一个参数 watch(() => props.type, (val) => { // 只监听父元素传来的type参数，type变化才会触发 console.log('type', val) }, { deep: true }) // 监听data的数据 watch(() => data.tableData, val => { console.log('tableData的数据改变了') }, { deep: true, // 深度监听 immediate: true }) //监听多个参数 watch([()=> data.tableData,()=> data.type],(newValue, old) => { console.log(1111,newValue[1],old[1]) }); return { ...toRefs(data) } } }) </script>
    
    <style lang="scss" scoped> </style>

补充如果在watch调用方法，就需要把watch写到该方法的下面，

const fn=()=>{ }
    watch()

注意，设置了 deep: true 表示是深度监听  
注意，在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java中静态方法的使用场景和注意事项

在Java编程中，静态方法（Static Method）具有以下特点和使用场景： 1. **没有特定对象调用**：静态方法可以直接通过类名调用，无需先创建对象。 2. **

曾经终败给现在/ 2024年10月22日 16:09/ 0 赞/ 143 阅读

相关 Java中IO流的使用方法和注意事项

在Java中，IO（Input/Output）流是用来处理系统输入输出的。以下是一些常用的IO流以及使用方法和注意事项： 1. ** FileInputStream 和 Fi

迈不过友情╰/ 2024年09月22日 09:42/ 0 赞/ 155 阅读

相关 Vue中computed和watch使用场景和方法

始学习网站：[https://blog.csdn.net/qq\_32614411/article/details/81745967][https_blog.csdn.n...

港控/mmm°/ 2024年04月17日 05:22/ 0 赞/ 99 阅读

相关 vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）

简述：vue中的watch属性大家都比熟悉，是vue的监听属性，监听数据的变化触发执行函数，可以监听数据和路由，这里给大家总结了一下watch在vue2和vue3中的使用详细

快来打我*/ 2023年10月04日 23:39/ 0 赞/ 164 阅读

相关 vue3使用vue-seamless-scroll注意事项

1.安装vue-seamless-scroll 插件 npm install vue-seamless-scroll --save 2.引用并注册 imp

蔚落/ 2022年10月17日 01:55/ 0 赞/ 68 阅读

相关 CTE的使用方法和注意事项

我先简单介绍一下CTE(Common Table Expression)是什么 ,然后简要介绍下用法和注意事项什么是CTE:Common Table Expression:

忘是亡心i/ 2022年09月18日 10:47/ 0 赞/ 444 阅读

相关 vue3中watch的使用方法和注意事项

这里实例平时用到的几种监听 1、监听父组件传来的参数props 2、监听从父组件传来props里的某一个参数 3、监听data的数据 4、监听多个参数 5、

末蓝、/ 2022年09月02日 01:13/ 0 赞/ 49 阅读

相关方法的使用注意事项

方法使用注意事项：　　1、方法不能定义在另一个方法的里面　　2、写错方法名字　　3、写错了参数列表　　4、方法的返回值是void，方法中可以省略retu

以你之姓@/ 2022年04月24日 02:08/ 0 赞/ 534 阅读

相关 Vue中需要注意的事项

1、在子component中的data不能是一个对象，必须是一个函数，然后该函数返回一个对象 data(){ retrun { swipe

绝地灬酷狼/ 2022年02月26日 01:10/ 0 赞/ 451 阅读

相关 @RequestBody 的使用方法和注意事项

使用@RequestBody注解时，是用于接收Content-Type为application/json类型的请求,数据类型是JSON：\{"aaa":"111","bbb":

落日映苍穹つ/ 2021年09月18日 03:02/ 0 赞/ 648 阅读