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 default {
  // vue2中使用watch
  watch: {
    sum: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("总合 sum 变化:", newValue, oldValue);
      },
    },
  },
  setup() {
    let sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

<style>
</style>

Vue3使用watch

watch有三个参数:

参数1:监听的参数

参数2:监听的回调函数

参数3:监听的配置(immediate)

情况1

监视ref所定义的一个响应式数据

<template>
  <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
// 监视ref所定义的一个响应式数据
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    // 监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum ==> ", newValue, oldValue);
    });
    return {
      sum,
    };
  },
};
</script>

情况2

监视ref所定义的多个响应式数据

<template>
  <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div>
  <hr />
  <div>
    msg:{{ msg }}
    <button @click="msg += '~'">改变msg</button>
  </div>
</template>
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    let msg = ref("watch使用"):
    // 情况2:监视ref所定义的多个响应式数据
    watch([sum, msg], (newValue, oldValue) => {
      console.log("sum/msg ==> ", newValue, oldValue);
    },{immediate:true});
    return {
      sum,
      msg,
    };
  },
};
</script>

情况3

监视reactive所定义的一个响应式数据

注意:

  • 这里无法正确获取oldValue
  • 强制开启了深度监听(deep配置不生效)
<template>
  <div>
     <h3>情况3::监视reactive所定义的一个响应式数据</h3>
      <div>姓名:{{person.name}}</div>
      <div>年龄:{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>
<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
        // 情况3、监视reactive所定义的一个响应式数据
    /*
      若watch监视的是reactive定义的响应式数据,则无法正确获得oldvalue!
      若watch监视的是reactive定义的响应式数据,则强制开启了深度监视
    */
    watch(person,(newValue, oldValue) => {
        console.log("person ==> ", newValue, oldValue);
      },{immediate:true,deep:false}//这里的deep配置不再奏效
    );
    return {
      person,
    };
  },
};
</script>

情况4

监视reactive所定义的一个响应式数据中的某个属性

<template>
  <div>
     <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名:{{person.name}}</div>
      <div>年龄:{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>
<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况4、监视reactive所定义的一个响应式数据中的某个属性
    watch(()=>person.name,(newValue, oldValue) => {
        console.log("person.name ==> ", newValue, oldValue);
      });

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

情况5

监视reactive所定义的一个响应式数据中的某些属性

<template>
  <div>
     <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名:{{person.name}}</div>
      <div>年龄:{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>
<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况5、监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
        console.log("person.name/person.age ==> ", newValue, oldValue);
    });
    return {
      person,
    };
  },
};
</script>

特殊情况

watch监听reactive中对象的嵌套对象

<template>
  <div>
      <div>姓名:{{person.name}}</div>
      <div>年龄:{{person.age}}</div>
      <div>薪资:{{person.job.joblist.money}} K</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.joblist.money ++">提薪</button>
  </div>
 </template>
<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 特殊情况、监视reactive所定义嵌套对象
    watch(()=>person.job,(newValue, oldValue) => {
        console.log("person.job对象发生变化 ==> ", newValue, oldValue);
    },{deep:true});//此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效

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

总结

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

(0)

相关推荐

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

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

  • vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • VUE3中watch和watchEffect的用法详解

    watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

  • VUE3中watch监听使用的不同情况总结

    目录 watch介绍 watch监听的不同情况 1 监听单个refimpl数据 2 监听多个refimpl数据 3 监听proxy数据 4 监听proxy数据的某个属性 5 监听proxy数据的某些属性 总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据,副作用函数,配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

  • vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • 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中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

  • vue watch普通监听和深度监听实例详解(数组和对象)

    下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console

  • Unity InputFiled TMP属性和各种监听示例详解

    目录 实践过程 Input Field Settings Control Settings InputField(TMP)事件监听 实践过程 Input Field Settings Font Asset:字体文件资源 Point Size:控制的字大小 Character Limit:字符限制,当输入内容超过指定数量,不再接收新输入的内容.通常用户登录页面我们都会限制不要输入太多. Content Type:输入类型(Standard--标准,可以输入任何字符:Auto corrected--

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip

  • Javascript添加监听与删除监听用法详解

    本文实例讲述了Javascript添加监听与删除监听的用法.分享给大家供大家参考.具体分析如下: js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习. 在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦,删不掉,后来看了一下才发现,参数需要完全对应,什么叫完全对应呢,换句话说: 复制代码 代码如下: $('.video')[0].

随机推荐