watch 侦听器

电玩女神 2022-11-02 00:00 186阅读 0赞

[vue官方文档-watch讲解][vue_-watch]

`侦听字符串` 和 `侦听对象的属性` 的区别

## 第 1 章：watch 侦听器 基本用法 ##

<template>
      <div class="watch">
        <input type="text" v-model="name" />
        <p>{ {  name }}</p>
        <input type="text" v-model="info.age" />
        <p>{ {  info }}</p>
      </div>
    </template>
    
    <script type="text/javascript">
    export default { 
      data () { 
        return { 
          name: '张三',
          info: { 
            age: 20
          }
        }
      },
      watch: { 
        // 情形一：监听字符串，新旧值都可以打印
        name: function (newValue, oldValue) { 
          console.log('name', newValue, oldValue);
        },
        /** * 情形二：深度监听对象里面的属性，只能打印新值，拿不到旧值 * 因为对象是引用类型，两个对象都是同一个引用地址 * 所以打印的结果都是一样的 */
        info: { 
          handler: function (newValue, oldValue) { 
            console.log('新值age', newValue);
            console.log('旧值age', oldValue); // oldValue 和 newValue 一样
          },
          deep: true
        }
      }
    }
    </script>

[vue_-watch]: https://cn.vuejs.org/v2/guide/computed.html

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue2向Vue3过度核心技术watch侦听器

目录 1 watch侦听器 1.1 作用： 1.2 语法： 1.3 侦听器代码准备

以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 59 阅读

相关 Vue3 计算属性和侦听器实战（computed、watch）

当我们在Vue 3中使用计算属性（computed）和侦听器（watch）时，主要目标是实现对数据的响应式处理和对数据变化的监视。计算属性用于处理数据的计算逻辑，而侦听器用于在

妖狐艹你老母/ 2024年03月23日 21:48/ 0 赞/ 64 阅读

相关 Vue - 侦听器 watch 和计算属性 computed

推荐：[Vue汇总][Vue] Vue - 侦听器 watch 和计算属性 computed 代码： <!DOCTYPE html> <html la

「爱情、让人受尽委屈。」/ 2022年12月20日 02:31/ 0 赞/ 167 阅读

相关 watch 侦听器

[vue官方文档-watch讲解][vue_-watch] Vue中计算属性和watch的区别侦听字符串和侦听对象的属性用法的区别第 1 章：watch 侦听

快来打我*/ 2022年11月02日 00:55/ 0 赞/ 155 阅读

相关 watch 侦听器

[vue官方文档-watch讲解][vue_-watch] `侦听字符串` 和 `侦听对象的属性` 的区别第 1 章：watch 侦听器基本用法 <tem

电玩女神/ 2022年11月02日 00:00/ 0 赞/ 187 阅读

相关 vue 计算属性 computed 和侦听器 watch 使用示例

vue 计算属性和侦听器 > 完整代码示例：[demo-计算属性-方法-侦听器][demo-_-_-] 计算属性什么是计算属性？ > 本质还是属性，但是它的属

痛定思痛。/ 2022年09月16日 03:51/ 0 赞/ 247 阅读

相关 Vue之侦听器watch

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侦听器</title> <s

╰+哭是因爲堅強的太久メ/ 2022年05月23日 12:50/ 0 赞/ 210 阅读

相关 Vue的计算属性computed、方法methods、侦听器watch的区别

1. 方法总和methods内的函数如何触发？机制：methods内的函数和普通的函数没有区别。触发：methods内的函数执行的时候，才能触发；注意：当页面渲染的

骑猪看日落/ 2022年04月18日 04:53/ 0 赞/ 387 阅读

相关计算属性computed和侦听器watch

计算属性和侦听器 [计算属性][Link 1] > 个人理解： > > computed用来监控自己定义的变量，该变量不在data里面声明，直接在com

淡淡的烟草味﹌/ 2022年03月25日 02:59/ 0 赞/ 315 阅读

相关 vue中的计算属性computed和侦听器watch

computed称为计算属性，computed基本用于以下这个情况：也就是说reversedMessage只取决于message，并且computed中的reversedM

深藏阁楼爱情的钟/ 2021年09月29日 12:06/ 0 赞/ 468 阅读