【vue3】wacth监听,监听ref定义的数据,监听reactive定义的数据,详解踩坑点

这篇具有很好参考价值的文章主要介绍了【vue3】wacth监听,监听ref定义的数据,监听reactive定义的数据,详解踩坑点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

假期第二篇,对于基础的知识点,我感觉自己还是很薄弱的。
趁着假期,再去复习一遍

之前已经记录了一篇【vue3基础知识点-computed和watch】
今天在学习的过程中发现,之前记录的这一篇果然是很基础的,很多东西都讲的不够细致

话不多说,进入正题:

vue2

vue2中的watch写法,(vue3可以向下兼容vue2的写法)

<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script >

import { ref, watch } from 'vue';
export default {
name:'demo',
watch: {
  // vue2简单写法
  sum(newVal, oldVal) {
    console.log('sum的值变化了', newVal, oldVal);
  }
  //vue2完整写法
  sum:{
    handler(newVal,oldval){
    console.log('sum的值变化了', newVal, oldVal);
    },
    deep:true,
    immediate:true
  }
},
setup(){
  let sum = ref(0)
  return {
    sum
  }
}
}

</script>

watch监听reactive,Vue3,vue.js,前端,javascript
虽然vue3中可以使用vue2的写法,但是混合使用会导致代码风格不一致,增加维护成本。而且我们只是习惯了vue2的写法,全都使用vue3的写法,其实就是一个熟悉的过程,vue3 的 < script setup> 语法和 Composition API组合式api还是很香的,慢慢来吧

组合式api其实就是一堆内置的函数,需要用什么就引入对应的函数,如ref、wacth等

vue3

1、监听ref定义的单个响应式数据

<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>
<script >
import { ref, watch } from 'vue';
export default {
name:'demo',
setup(){
  let sum = ref(0)
  //第一个参数,要监听的数据
  //第二个参数,回调函数,两种写法:箭头函数或者普通函数都可以
  //(在vue3中,wathc的回调函数可以写成箭头函数,因为setup中this是undefined,没有响应式的this上下文)

  //箭头函数写法
  watch(sum,(newVal,oldval)=>{
    console.log('sum变了',newVal,oldval)
    unde
  })
  // 普通函数写法
    watch(sum,function(newVal,oldval){
    console.log('sum变了',newVal,oldval)
  })
  return {
    sum
  }
}

}

2、监听ref定义的多个响应式数据

<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <button @click="sum++">点我+1</button>
    <h2>当前招呼语:{{msg}}</h2>
    <button @click="msg+='wow'">点我打招呼</button>
  </div>
</template>
<script >
import { ref, watch } from 'vue';
export default {
name:'demo',
setup(){
  let sum = ref(0)
  let msg = ref('hello')
//vue2中watch是配置项,只能写一个;vue3中watch是函数,可以调用n次
watch(sum,(newVal,oldVal)=>{
  console.log('sum变了',newVal,oldVal);
})
watch(msg,(newVal,oldVal)=>{
  console.log('msg',newVal,oldVal);
})
  return {
    sum,
    msg
  }
}
}
</script>

这种写法虽然可以多次调用watch函数,但是还有更简化的写法

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
    <h2>当前招呼语:{{ msg }}</h2>
    <button @click="msg += 'wow'">点我打招呼</button>
  </div>
</template>
<script >
import { ref, watch } from "vue";
export default {
  name: "demo",
  setup() {
    let sum = ref(0);
    let msg = ref("hello");
//第一个参数为数组,第二个参数为回调函数
    watch([sum, msg], (newVal, oldVal) => {
      console.log("sum或msg变了", newVal, oldVal);
    });
    return {
      sum,
      msg,
    };
  },
};
</script>

watch监听reactive,Vue3,vue.js,前端,javascript
watch监听reactive,Vue3,vue.js,前端,javascript
vue3 watch中的参数,第三个就是配置项

注意点:监听ref定义的数据不需要写deep:true,简单数据类型不需要深度监听,ref定义的对象,本质上还是调用了reactive将其包装成响应式对象,所以ref定义的对象默认开启了深度监听

watch(source: WatchSource, cb: WatchCallback, options?: WatchOptions): StopHandle
source: 监听的源(可以是响应式数据、计算属性或ref等)
cb: 当源发生变化时被调用的回调函数
options(可选): 一个对象,包含额外的选项配置
返回一个停止监听的函数

    let sum = ref(0);
    let msg = ref("hello");
    //监听单个
     watch(sum, (newVal, oldVal) => {
      console.log("sum变了", newVal, oldVal);
    },{
      immediate:true
    });
   //监听多个

    watch([sum, msg], (newVal, oldVal) => {
      console.log("sum或msg变了", newVal, oldVal);
    },{
      immediate:true
    });

3、监听reactive定义的单个响应式数据的全部属性

<template>
  <div>
<h2>姓名:{{person.name}}</h2>
<h2>性别:{{person.sex}}</h2>
<button @click="person.name+='~'">姓名变了</button>

<button  @click="person.sex+='!'">性别变了</button>
  </div>
</template>
<script >
import {reactive,watch } from "vue";
export default {
  name: "demo",
  setup() {
   
    let person = reactive({
      name:'莲花',
      sex:'男'
      
    })
        watch(person, (newVal, oldVal) => {
      console.log("person变了", newVal, oldVal);
    });

    return {
      person
    };
  },
};
</script>

这有个踩坑点,recative定义的响应式数据,交给watch进行监听,此处无法正确的获得oldValue,watch默认只能追踪到响应式数据属性的变化,但并不会记录变化前的旧值
watch监听reactive,Vue3,vue.js,前端,javascript
如果reactive定义的数据嵌套很深,在vue2中需要开启深度监听才能监听到,但是vue3中却不需要

<template>
  <div>
<h2>姓名:{{person.name}}</h2>
<h2>性别:{{person.sex}}</h2>
<h2>工作:{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='!'">性别变了</button>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {
  name: "demo",
  setup() {
    let person = reactive({
      name:'莲花',
      sex:'男',
      job:{
        job1:{
          work:'侦探'
        }
      }      
    })
        watch(person, (newVal, oldVal) => {
      console.log("person变了", newVal, oldVal);
    });
    return {
  
      person
    };
  },
};
</script>

reactive定义的数据强制开启了深度监听,即使写deep:false,配置也无效,无法手动关闭深度监听
watch监听reactive,Vue3,vue.js,前端,javascript
4、监听reactive定义的单个响应式数据中的某一个属性

如果这样写,是没有效果的

<template>
  <div>
<h2>姓名:{{person.name}}</h2>
<h2>性别:{{person.sex}}</h2>
<h2>工作:{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='!'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {
  name: "demo",
  setup() {   
    let person = reactive({
      name:'莲花',
      sex:'男',
      job:{
        job1:{
          work:'侦探'
        }
      }      
    })
        watch(person.name, (newVal, oldVal) => {
      console.log("person.name变了", newVal, oldVal);
    });
    return {  
      person
    };
  },
};
</script>

控制台中会提示:这样不能监听,只能监听ref定义的值,或reactive生成的响应式对象,或者是一个数组,而person.name只是reactive生成的响应式对象中的一个属性

watch监听reactive,Vue3,vue.js,前端,javascript
那么监听reactive生成的响应式对象中的一个属性,写法应该是这样的:

先写一个函数,函数有返回值,想监听谁就返回谁

<template>
  <div>
<h2>姓名:{{person.name}}</h2>
<h2>性别:{{person.sex}}</h2>
<h2>工作:{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='!'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {
  name: "demo",
  setup() {
    let person = reactive({
      name:'莲花',
      sex:'男',
      job:{
        job1:{
          work:'侦探'
        }
      }      
    })
    watch(
   () => person.name,
  (newValue, oldValue) => {
    console.log(`person变了 发生了变化: ${oldValue} -> ${newValue}`);
  }
    )
    return {  
      person
    };
  },
};
</script>

watch监听reactive,Vue3,vue.js,前端,javascript
5、监听reactive定义的单个响应式数据中的某一些属性

<template>
  <div>
<h2>姓名:{{person.name}}</h2>
<h2>性别:{{person.sex}}</h2>
<h2>工作:{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='!'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {
  name: "demo",
  setup() {
   
    let person = reactive({
      name:'莲花',
      sex:'男',
      job:{
        job1:{
          work:'侦探'
        }
      }
      
    })
    watch(
    //第一个参数改为数组
    //newValue, oldValue也会变成数组格式
         [ () => person.name,() => person.sex],
         (newValue, oldValue) => {
         console.log(`person的name或sex变了 `,newValue, oldValue);
       }
    )  
    return {  
      person
    };
  },
};
</script>

watch监听reactive,Vue3,vue.js,前端,javascript

6、特殊情况,监听job,job是person中的对象,直接这样写是监听不到的,原因是改的内容层次比较深,我们要改的是job中job1中的work

   let person = reactive({
      name:'莲花',
      sex:'男',
      job:{
        job1:{
          work:'侦探'
        }
      }
      
    })
    watch(
          () => person.job,
         (newValue, oldValue) => {
         console.log(`person的job变了 `,newValue, oldValue);
       }
    )  

这个时候就需要配置项中配置deep了

      watch(
          () => person.job,
         (newValue, oldValue) => {
         console.log(`person的job变了 `,newValue, oldValue);
       },{deep:true}
    )  

watch监听reactive,Vue3,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-728586.html

到了这里,关于【vue3】wacth监听,监听ref定义的数据,监听reactive定义的数据,详解踩坑点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数

    专栏介绍: 凉哥作为 Vue 的忠实粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他

    2024年01月24日
    浏览(44)
  • vue全家桶进阶之路31:Vue3 数据和方法的双向绑定ref、reactive、toRefs

    ref 在 Vue 3 中,你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中,你可以使用 ref 、 reactive 和 computed 等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子: 在这个例子中,我们使用 ref 函数来定义了一个名为 mes

    2023年04月19日
    浏览(52)
  • vue3 #ref #reactive

    一、ref 函数将简单类型的数据包装为响应式数据 import { ref } from \\\'vue\\\'  const count = ref(10) 一、reactive函数将复杂类型的数据包装为响应式数据 import { reactive} from \\\'vue\\\'  const obj= reactive({     name : \\\'zs\\\',     age : 18 })

    2024年02月22日
    浏览(48)
  • Vue3 ref与reactive

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月24日
    浏览(58)
  • vue3使用ref和reactive

    目录 ​​​​​​​ vue3使用ref和reactive的方法 1.ref 2.reactive Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例: 1.示例 2.示例说明 vue3使用ref和reactive的方法 Vue 3引入了两个新的API, ref 和 reactive ,用于创建响应式对象。这两个方法都位于 Vue.prototype 上,因此可以在组件实例

    2024年02月08日
    浏览(47)
  • Vue3的ref和reactive

    目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据,返回值是一个对象 模版中使用ref数据,省略.value,js代码中不能省略 获取ref创建数据的值要加上.value   reactive创建响应式 reac

    2024年01月24日
    浏览(47)
  • vue3 ref 和 reactive 区别

    最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到 响应式数据问题,经百度查找相关笔记 ,在此记录一下,在实战中成长吧。 出现的问题 : 定义一个默认数组并且 for 循环展示,后端返回数据并且赋值到数组中,但是展示的值并不会修改 原因 : 在 js 中

    2023年04月09日
    浏览(62)
  • vue3 自动引入 ref reactive...

    npm i unplugin-auto-import -D vite.config.js Q : typescript 报错:‘reactive’ is not defined. A : TS 未识别到 vue api,没有相应的模块声明文件, 在 vite 中配置并生成 auto-imports.d.ts ,并在 tsconfig.json 中引入 vite.config.js tsconfig.json Q: eslint 无法识别报错 error ‘reactive’ is not defined no-undef A: 未配置

    2024年01月25日
    浏览(40)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(58)
  • 谈谈Vue3中的ref和reactive

    一、是什么? ref和reactive是Vue3中用来实现 数据响应式的API 一般情况下, ref 定义基本数据类型, reactive 定义引用数据类型 (我喜欢用它来定义对象,不用它定义数组,原因后面讲) 我理解的 ref本质上是reactive的再封装 二、先聊reactive reactive定义引用数据类型(以对象和数

    2023年04月21日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包