Vue中对watch的理解(关键是immediate和deep属性)

目录
  • watch是什么?
  • watch的使用

watch是什么?

watch:侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

watch的使用

watch基础语法

watch: {
    被监听的数据: {
        handler(数据改变后的值, 数据改变之前的值) {
            相关代码逻辑...
        }
    }
}
  • 被监听的数据:data中定义的数据;
  • 数据改变后的值:该数据改变后的新值;
  • 数据改变之前的值:该数据改变之前的值。

$watch()监听某个值(双向绑定)的变化,一旦发生变化,就调用引号里的方法,从而达到change事件监听的效果!!

首先确认 watch是一个对象,一定要当成对象来用。 对象就有键,有值。 
键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是变化后的值,第二个是原始值。 
值也可以是函数名:不过这个函数名要用单引号来包裹。 
值是包括选项的对象:选项包括有三个,如下

  • 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  • 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  • 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

对于immediate和deep,我有以下两点理解:

1,immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为“undefined”。如

当我们手动改变newValue.id的值后,输出如下:

如果不设置immediate,或者将immediate设为false的话,则刷新页面后不会立即监听此对象,也就是控制台不会有输出,必须要监听的对象有值改变时控制台才会有输出。

2,deep设为true后,就可以深入监听了。简单点说,就是可以监听到对象里面的值的变化了。比如上面这个例子中,对象是“student”,这个对象里面的值有:id:1和studentName:‘李疆’,即

然后我们在<input>中绑定student.studentName,如下

正常情况下,watch是不能直接监听到student对象中的studentName的,也就是说在页面改变studentName的值,控制台是不会有任何反应的。但是,如果我们设置deep为true后,此时在页面改变studentName的值,控制台就会输出studentName的值,也就是能够监听到student对象中的studentName。好像有点绕,,

先看一下运行结果:

附上代码:

<template>
  <div class="about">
    <!-- <h1>This is an about page</h1> -->
    <p>username:<input type="text" v-model="username"> {{username}}</p>
    <p>password:<input type="text" v-model="password"> {{password}}</p>
    <p>age:<input type="text" v-model="age"> {{age}}</p>
    <p>student.id:<input type="text" v-model="student.id"> {{student.id}}</p>
    <p>student.studentName:<input type="text" v-model="student.studentName"> {{student.studentName}}</p>

  </div>
</template>
<script>
export default {
  data(){
    return{
      username:'lijiang',
      password:'123',
      age:21,
      student:{
        id:1,
        studentName:'李疆'
      }
    }
  },
  methods:{
     Test:function(newValue,oldValue){
           console.log('newValue:%s,oldValue:%s',newValue,oldValue);
     }
  },
  watch:{
    username:function(newValue,oldValue){
      console.log('username newValue:'+newValue+',username oldValue:'+oldValue);
    },

    password:'Test',

    age:{
      handler:function(newValue,oldValue){
        console.log('age newValue:'+newValue+',age oldValue:'+oldValue);
      },
      immediate:true //第一次刷新页面时就会执行
    },

    student:{
      handler:function(newValue,oldValue){
        console.log('student newValue.id:'+newValue.id+',student oldValue:'+oldValue);
      },
      immediate:true,
      deep:true
    },

    'student.studentName':'Test'
  }
}
</script>

例2

watch的用法-immediate属性

watch的用法-deep属性

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

时间: 2022-11-06

如何理解Vue中computed和watch的区别

概述 我们在 Vue 项目中多多少少都会有用到 computed 和 watch,这两个看似都能实现对数据的监听,但还是有区别.所以以下通过一个小栗子来理解一下这两者的区别. computed 计算属性 计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,简言之:这个属性依赖其他属性,由其他属性计算而来的. <p>姓名:{{ fullName }}</p> ... ... data: { firstNam

深入理解vue.js中$watch的oldvalue与newValue

$watch中的oldvalue和newValue 大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue. 顾名思义,这两个对象就是对象发生变化前后的值. 但是在使用过程中我发现这两个值并不总是预期的.下面来一起看看详细的介绍: 定义data的值 data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京'

深入对Vue.js $watch方法的理解

博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了.咱们先来看一下对于$watch方法在vue.js的API中是怎么解释的吧:观察 Vue 实例变化的一个表达式或计算属性函数.回调函数得到的参数为新值和旧值.表达式只接受监督的键路径.对于更复杂的表达式,用一个函数取代.官方示例: // 键路径 vm.$watch('a.b.c', function (newVal, oldVal) { /

Vue响应式原理Observer、Dep、Watcher理解

开篇 最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的.自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果

详细分析vue响应式原理

前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程 文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员 响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响

vue响应式原理与双向数据的深入解析

了解object.defineProperty 实现响应式 清楚 observe/watcher/dep 具体指的是什么 了解 发布订阅模式 以及其解决的具体问题 在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别是: 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 提示:以下是本篇文章正文内容,下面案例可供参考 vue-响应式是什么? Vue 最独特的特性之一

Vue响应式原理的示例详解

Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v

Vue响应式原理模拟实现原理探究

目录 前置知识 数据驱动 数据响应式的核心原理 Vue 2.x Vue 3.x 发布订阅和观察者模式 发布/订阅模式 观察者模式 Vue响应式原理模拟实现 Vue Observer对data中的属性进行监听 Compiler Watcher Dep 测试代码 前置知识 数据驱动 数据响应式——Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象组成的.当更改它们时,视图会随即自动更新. 双向绑定——数据改变,视图改变:视图改变,数据也随之改变 数据

一篇文章带你彻底搞懂VUE响应式原理

目录 响应式原理图 编译 创建compile类 操作fragment 获取元素节点上的信息 获取文本节点信息 操作fragment 响应式 数据劫持 收集依赖 响应式代码完善 Dep类 全局watcher用完清空 依赖的update方法 需要注意的一个地方 双剑合璧 总结 首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图 一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.

Vue响应式原理及双向数据绑定示例分析

目录 前言 响应式原理 双向数据绑定 前言 之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理 是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助

详解VUE响应式原理

目录 1.响应式原理基础 2.核心对象:Dep与Watcher 3.收集依赖与更新依赖 3.1 收集依赖 3.2 更新依赖 4.源码调试 4.1 测试的页面代码 1.对象说明 2.Dep与Watcher的关系 3.最终的关系结果 4.2  源码调试 1.收集依赖的入口函数:initState(页面初始化时执行); 2.初始化computed和watch时,生成Watcher实例化对象 总结 1.响应式原理基础 响应式基本原理是基于Object.defineProperty(obj, prop,

Vue响应式原理详解

Vue 嘴显著的特性之一便是响应式系统(reactivity system),模型层(model)只是普通JavaScript对象,修改它则更新视图(view). Vue 响应式系统的底层细节 如何追踪变化 把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象的所有属性,并使用Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty是仅ES5支持,并无法shim的特性,这也就是为什么Vu

Vue响应式原理深入解析及注意事项

前言 Vue最明显的特性之一便是它的响应式系统,其数据模型即是普通的 JavaScript 对象.而当你读取或写入它们时,视图便会进行响应操作.文章简要阐述下其实现原理,如有错误,还请不吝指正.下面话不多说了,来随着小编来一起学习学习吧. 响应式data <div id = "exp">{{ message }}</div> const vm = new Vue({ el: '#exp', data: { message: 'This is A' } }) vm