Vue基础之侦听器详解

2024-04-02 19:04:59 412人浏览独家记忆

摘要

目录Vue中什么是侦听器侦听器的用法vue侦听器-watchvue侦听器-深度侦听和立即执行总结vue中什么是侦听器开发中我们在data返回的对象中定义了数据，这个数据可

vue中什么是侦听器

开发中我们在data返回的对象中定义了数据，这个数据可以通过插值语法等方式绑定到templat中。
当数据变化的时候，template里绑定的数据会自动进行更新来显示最新的数据。但是这种变化是在template中自动侦听data的值来进行变换的
在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用到侦听器watch了

官方定义：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

一个对象，键是要侦听的响应式 property——包含了 data 或 computed property，而值是对应的回调函数。值也可以是方法名，或者包含额外选项的对象。组件实例将会在实例化时调用 $watch()，参阅 $watch，以了解更多关于 deep、immediate 和 flush 选项的信息

侦听器的用法

选项：watch

类型：{ [key: string]: string | Function | Object | Array}

侦听器watch的配置选项：

默认情况下，watch只是在侦听数据的引用变化，对于数据内部属性的变化是不会做出响应的：

这个时候我们可以使用一个选项deep进行更深层的侦听；另外一个属性，是希望一开始的就会立即执行一次：这个时候我们使用immediate选项；这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次；

data的内容：


data() {
    return {
        info: {
            name: 'cgj'
        }
    }
}
watch: {
    info: {
        handler(newValue, oldValue) {
            console.log(newValue, oldValue)    
        }
        deep: true,
        immediate: true,
    }
}

另外一个是vue3文档中没有提到的，但是Vue2文档中有提到的是侦听对象的属性：


'info.name': function(newValue, oldValue) {
    console.log(newValue, oldValue)
}

还有另外一种方式就是使用 $watch 的api：

具体$watch可以查看官方的API查看（用的方式比较少）：实例方法 | vue.js


const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // 侦听顶级 property
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 字符串方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 侦听单个嵌套 property
    'c.d': function (val, oldVal) {
      // do something
    },
    // 该回调将会在侦听开始之后被立即调用
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  }
})
const vm = app.mount('#app')
vm.a = 3 // => new: 3, old: 1

vue侦听器-watch

目标: 可以侦听data/computed属性值改变

语法:


watch: {
    "被侦听的属性名" (newVal, oldVal){
    }
}

例子代码：


<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>
<style>
</style>

小结: 想要侦听一个属性变化, 可使用侦听属性watch

vue侦听器-深度侦听和立即执行

目标: 可以侦听data/computed属性值改变

语法:


watch: {
    "被侦听的属性名" (newVal, oldVal){
    }
}

例子代码:


<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style>
</style>

小结: immediate立即侦听, deep深度侦听, handler固定方法触发

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue基础之侦听器详解

本文链接: https://www.lsjlt.com/news/159266.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue基础之侦听器详解

目录vue中什么是侦听器侦听器的用法vue侦听器-watchvue侦听器-深度侦听和立即执行总结vue中什么是侦听器开发中我们在data返回的对象中定义了数据，这个数据可...

99+

2024-04-02
Vue基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

目录1、Vue 实例选项2、计算属性（computed）2.1、computed 的基本用法2.2、computed 作为函数传参2.3、计算属性和函数的区别3、侦听器（watch）...

99+

2022-11-13

vue计算属性侦听器 vue计算属性侦听器 vue过滤器
Vue基础中的侦听器是什么

Vue基础中的侦听器是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。vue中什么是侦听器开发中我们在data返回的对象中定义了数据，这个数据可以通过插值语法等方式绑定到te...

99+

2023-06-21
详解Vue3中的watch侦听器和watchEffect高级侦听器

目录1watch侦听器2watchEffect高级侦听器清除副作用：就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖停止跟踪 watchEffect 返回一个函数调用之后将...

99+

2022-11-13

Vue3 watch侦听器 vue3 watchEffect侦听器
Vue中侦听器的基本用法示例

目录前言一、侦听器的基本用法二、侦听器的格式三、实现刚进入页面就触发监听和深度监听深度监听深度监听返回侦听对象子属性的值最后前言 Vue 通过 watch 选项提...

99+

2024-04-02
Java基础 Servlet监听器详解

Java基础 Servlet监听器详解 1 概念：Servlet监听器，用来监听web容器的一些对象状态的变化，主要是ServletContext、HttpSession、HttpServletRequestl三类对象状态。Ser...

99+

2023-05-31

java servlet ava
vue基础之ElementUI表格详解

目录ElementUI 表格示例：一个基本的表格el-table的属性el-table-column的属性多级表头获取表格，重点说下！！！单选多选排序筛选自定义列展开行总...

99+

2024-04-02
Vue中侦听器怎么用

这篇文章将为大家详细讲解有关Vue中侦听器怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。前言Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变...

99+

2023-06-20
vue基础之详解ElementUI的表单

目录ElementUI表单一个简单的案例表单的主要组件表单组件的使用行内的表单对齐方式表单验证自定义的验证规则表单内组件尺寸控制总结form模块的属性form模块的方法Form Me...

99+

2024-04-02
Vuewatch侦听对象属性详解

目录1. Vue watch 概述2. Vue 对象的监听方法1. Vue watch 概述 Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。方法格式的侦听器...

99+

2023-05-17

Vue watch 侦听对象 Vue watch 侦听对象属性
vue3.0中的watch侦听器实例详解

目录前言侦听器和计算属性的区别vue3如何使用watch呢？基本使用监听多个响应式数据侦听reactive定义的响应式数据监听reactive定义的响应式数据的某一个属性配置选...

99+

2024-04-02
老生常谈Vue中的侦听器watch

目录一、侦听器watch1.1.初识侦听器watch1.2.Vue的data的watch1.3.Vue的watch侦听选项一、侦听器watch （思维导图不太完善，因为是按照自己看...

99+

2022-11-13

Vue侦听器watch Vue侦听器 Vue watch
怎么使用Vue的watch侦听器

小编给大家分享一下怎么使用Vue的watch侦听器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！侦听器watch 函数名就是要侦听的元素的名字传入的参数第一个是变化后的新值newval，第二个是变化前的旧值old...

99+

2023-06-22
Vue中的侦听器及使用场景

目录基本示例深层侦听器即时回调的侦听器回调的触发时机this.$watch()停止侦听器基本示例计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变...

99+

2023-05-18

Vue侦听器的作用 Vue侦听器使用
计算属性和侦听器详情

目录1、计算属性1.1 基础例子1.2 计算属性缓存 vs 方法1.3 计算属性 vs 侦听属性1.4 计算属性的 setter2、侦听器1、计算属性模板内的表达式非常便利，但是设...

99+

2024-04-02
Java基础之容器Vector详解

目录一、前言二、Vector简介三、Vector源码四、总结五、Vector遍历方式一、前言知识补充：Arrays.copyOf函数： public static int[] ...

99+

2024-04-02
python基础之装饰器详解

目录一、前言二、高阶函数三、函数嵌套四、装饰器4.1 被装饰方法带返回值4.2 被装饰方法带参数4.3 验证功能装饰器4.4 验证功能装饰器——带参数一、前言装...

99+

2024-04-02
Java基础之StringBuffer详解

目录一、前言二、用法三、结果四、长度容量五、IStringBuffer接口六、value和capacity一、前言 StringBuffer是可变长的字符串 1.append 追加...

99+

2024-04-02
Vue2和Vue3如何使用watch侦听器详解

watch:侦听数据变化（某个值的change事件） vue2.x data（）{ return{ num:10 } }， watc...

99+

2024-04-02
详解Vue3中侦听器watch的使用教程

目录watch 侦听器使用。侦听器监听 reactive监听多个参数执行各自逻辑监听多个参数执行相同逻辑上一节我们简单的介绍了一下 vue3 项目中的计算属性，这一节我们继续 vue...

99+

2024-04-02