vue3如何使用watch监听props中的数据

目录
  • 情况一:监听 props 中基本数据类型
  • 情况二:监听 props 中引用数据类型且父组件不改变地址指向
  • 情况三:监听 props 中引用数据类型且父组件改变地址指向
  • 总结
  • 写在最后

情况一:监听 props 中基本数据类型

父组件中对传入数据的处理

const handleClick = () => {
  testStr.value += 'P'
}

子组件中监听传入的数据

watch(
  () => props.testStr,
  (newVal, oldVal) => {
    console.log('监听基本类型数据testStr')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

不能使用

watch(
   props.testStr,
  () => {
    console.log('监听基本类型数据testStr')
  }
)

的形式,要使用 getter 函数返回值的形式才能触发监听

情况二:监听 props 中引用数据类型且父组件不改变地址指向

父组件中对传入数据的处理

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value.push({
    name: (name += '~'),
    age: (age += 1)
  })
}

子组件中监听传入的数据

watch(props.dataList, (newVal, oldVal) => {
  console.log('监听引用类型数据dataList')
  console.log('new', newVal)
  console.log('old', oldVal)
})

当父组件传入的是引用类型数据,且在父组件中没有改变该数据的引用地址时,在子组件中可以直接监听传入的数据

情况三:监听 props 中引用数据类型且父组件改变地址指向

父组件中对传入数据的处理

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value=[
  	{
    	name: (name += '~'),
    	age: (age += 1)
  	}
  ]
}

子组件中监听传入的数据

watch(
  () => props.dataList,
  (newVal, oldVal) => {
    console.log('监听引用类型数据dataList')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

当父组件传入的是引用类型数据,且在父组件中通过赋值的形式,改变引用数据的引用地址时,在子组件中要使用 getter 函数返回值的形式,才能监听传入的数据

总结

  1. watch监听 props 中的基本类型数据,需要通过 getter 函数返回值的形式(()=>props.xxx)才能监听
  2. watch监听 props 中的引用类型数据,且父组件中没有改变地址指向时,可以直接监听
  3. watch监听 props 中的引用类型数据,且父组件中改变了地址指向时,需要通过 getter 函数返回值的形式(()=>props.xxx)才能监听
  4. 开发情景:要做瀑布流展示

定义变量:const dataList = ref([])

父组件从接口获取第一页数据,将数据存在dataList中:dataList.value = res.data注意:此时,已经改变引用类型数据 dataList 的地址指向

子组件通过watch监听传入的 dataList,并且调用 manageData() 方法处理 props.dataList 的数据结构:

watch(
  () => props.dataList,
  () => {
    console.log('监听引用类型数据dataList')
    manageData()
    ... // 相应逻辑处理
  }
)

注意:此时可以触发监听

用户下拉刷新操作后,继续发送接口,获取第二页,第三页等等后面的数据,父组件通过 push 操作,将获取到的数据 push 进 dataList 中:

for(let item of res.data){
	dataList.value.push(item)
}

注意:此时,虽然父组件传入的 dataList 的值修改了,但是子组件已经不能触发watch及其处理逻辑了
也就是说,manageData() 方法不能调用,没有做到对后续 push 进来的数据进行数据结构的修改,导致页面展示出现问题

解决办法:

一、使用 computed

const dataListTest = computed(() => {
  manageData()
  return props.dataList
})

二、使用 watchEffect

watchEffect(() => {
  manageData()
})

写在最后

最后的瀑布流展示中,我是直接修改了 props 中的数据,虽然从展示来说没有发现什么问题,但是在 Vue 的官网中是这样说的:

PS:本例子使用语法糖 script setup

到此这篇关于vue3如何使用watch监听props中数据的文章就介绍到这了,更多相关vue3监听props数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3源码分析侦听器watch的实现原理

    目录 watch 的本质 watch 的函数签名 侦听多个源 侦听单一源 watch 的实现 watch 函数 source 参数 cb 参数 options 参数 doWatch 函数 doWatch 函数签名 初始化变量 递归读取响应式数据 定义清除副作用函数 封装 scheduler 调度函数 设置 job 的 allowRecurse 属性 flush 选项指定回调函数的执行时机 创建副作用函数 执行副作用函数 返回匿名函数,停止侦听 总结 watch 的本质 所谓的watch,其本质就

  • 详解Vue3中侦听器watch的使用教程

    目录 watch 侦听器使用. 侦听器监听 reactive 监听多个参数执行各自逻辑 监听多个参数执行相同逻辑 上一节我们简单的介绍了一下vue3 项目中的计算属性,这一节我们继续 vue3 的基础知识讲解. 这一节我们来说 vue3 的侦听器. 学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,换汤不换药的东西. 侦听器是常用的 Vue API 之一,它用于监听一个数据并在数据变动时做一些

  • 一文搞懂Vue3中watchEffect侦听器的使用

    目录 watchEffect 侦听器 watchEffect 侦听器使用 watchEffect 监听基本数据 watchEffect 监听复杂数据 watchEffect 啥时候执行 关闭 watchEffect 监听 上一节我们学习了 watch 侦听器的基础用法,用来监听页面数据的变化,那么今天呢,我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器.这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用.这个就不详细说了,简单过一下子. watc

  • 详解Vue3中的watch侦听器和watchEffect高级侦听器

    目录 1watch侦听器 2watchEffect高级侦听器 清除副作用:就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新 1watch侦听器 watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb(newVal,oldVal) watch第三个参数一个options配置项是一个对 { immediate:true //是否立即调用一次 deep:t

  • Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • Vue3源码解析watch函数实例

    目录 引言 一.watch参数类型 1. 选项options 2. 回调cb 3. 数据源source 二.watch函数 三.watch的核心:doWatch 函数 引言 想起上次面试,问了个古老的问题:watch和computed的区别.多少有点感慨,现在已经很少见这种耳熟能详的问题了,网络上八股文不少.今天,我更想分享一下从源码的层面来区别这八竿子打不着的两者.本篇针对watch做分析,下一篇分析computed. 一.watch参数类型 我们知道,vue3里的watch接收三个参数:侦听

  • vue3如何使用watch监听props中的数据

    目录 情况一:监听 props 中基本数据类型 情况二:监听 props 中引用数据类型且父组件不改变地址指向 情况三:监听 props 中引用数据类型且父组件改变地址指向 总结 写在最后 情况一:监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick = () => { testStr.value += 'P' } 子组件中监听传入的数据 watch( () => props.testStr, (newVal, oldVal) => { cons

  • Vue3.0中如何监听props方法

    目录 Vue3.0如何监听props 第一种 第二种 vue3.0监听props做数据回显 Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个props export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(

  • React在组件中如何监听redux中state状态的改变

    目录 在组件中监听redux中state状态的改变 解决方式 React和redux的状态处理 在组件中监听redux中state状态的改变 解决方式 1.在组件中引入store 2.在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过) 组件完整代码如下: import React, { Component } from 'react' import CSSModules from 'react-css-modules'  imp

  • 基于Android 监听ContentProvider 中数据变化的相关介绍

    如果ContentProvider的访问者需要知道ContentProvider中的数据的变化情况,可以在ContentProvider发生数据变化时调用getContentResolver().notifyChange(uri,null)来通知注册在此URI上的访问者. 复制代码 代码如下: public class PersonContentProvider extends ContentProvider[ public Uri insert(Uri uri,ContentValues va

  • vue监听页面中的某个div的滚动事件并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点,现在的目标是,要监听这个xq-box滚动事件,右边一旦开始滚动,就要知道滚动到哪个子div,并让左边的目录树中对应的节点高亮显示.要怎么做呢? 1.首先,先写好大概的页面布局,这里要注意,右边xq-box的子div要绑定"'xqItem'+序号"的id,为了下面用js能获取到匹配的dom元

  • vue中watch监听对象中某个属性的方法

    目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne

  • Java实现日志文件监听并读取相关数据的方法实践

    目录 项目需求 Apache Commons-IO 核心知识 代码实现 总结 项目需求 由于所在数据中台项目组需要实现监听文件夹或者日志文件并读取对应格式的脏数据的需求,以便在文件.文件夹发生变化时进行相应的业务流程:所以在这里记录下相关业务的实现及技术选型. Apache Commons-IO 首先需要添加对应依赖: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • Vue使用watch监听一个对象中的属性的实现方法

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee

  • 微信小程序在其他页面监听globalData中值的变化

    前言 这几天去面试,多次碰到同一个知识点.而且有一次面试挺有趣的,是关于小程序的.共有3个问题. 1.小程序中Page.watch()方法是做什么用的? 2.小程序中如何在其他页面中监听到globalData中值的变化? 3.如果在app.js执行登录部分的代码,由于时序问题,如何处理其他页面请求时未获取到身份识别标记的情况.(session,userid等).(大意是:怎么能够保证其他页面请求是在登录之后?) 知识点 有经验的同学可能一下子就看出来了,这其实说的是同一个东西,那就是Object

随机推荐