Vue watch响应数据实现方法解析

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：

<input type="text" v-model="cityName"/>

new Vue({
 el: '#root',
 data: {
  cityName: 'shanghai'
 },
 watch: {
  cityName(newName, oldName) {
   // ...
  }
 }
})

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
  cityName: 'nameChange'
  }
 }

immediate和handler

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

new Vue({
 el: '#root',
 data: {
  cityName: ''
 },
 watch: {
  cityName: {
  　　handler(newName, oldName) {
   　　// ...
  　　},
  　　immediate: true
  }
 }
})

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<input type="text" v-model="cityName.name"/>

new Vue({
 el: '#root',
 data: {
  cityName: {id: 1, name: 'shanghai'}
 },
 watch: {
  cityName: {
   handler(newName, oldName) {
   // ...
  },
  deep: true,
  immediate: true
  }
 }
})

设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
  'cityName.name': {
   handler(newName, oldName) {
   // ...
   },
   deep: true,
   immediate: true
  }
 }

这样只会给对象的某个特定的属性加监听器。

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件中watch props根据v-if动态判断并挂载DOM的问题

    问题复现:父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 <Chart :source="chartData"></Chart> import Chart from '../components/Chart' export default { name: 'Home', components: { Chart }, data () { return { chartData: [] } }, mounted () { setTimeo

  • Vuejs中的watch实例详解(监听者)

    最近刚刚追完庆余年,心思还总是在剧情里,然后就觉得在vuejs里watch就是监察院,一个不折不扣的特务机构.在Vue中watch被称为监听者,它随时观察这vue实例中每一个数据的变化,当数据发生改变,做出响应. 通过下面的示例代码来看一下这个监察院是怎么运作的: new Vue({ el:"#app", data(){ reutrn { candy:"" } }, //传说中的监察院start watch:{ candy:{ handler(newVal,oldV

  • 详解Vue中watch对象内属性的方法

    vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内

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

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

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

  • Vue 2.0 侦听器 watch属性代码详解

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

  • Vue使用watch监听一个对象中的属性的实现方法

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee

  • vue中watch和computed为什么能监听到数据的改变以及不同之处

    vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) Vue构造函数源码: //创建Vue构造函数 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyw

  • 详解Vue的watch中的immediate与watch是什么意思

    immediate immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为"undefined".如 当我们手动改变newValue.id的值后,输出如下: 如果不设置immediate,或者将immediate设为false的话,则刷新页面后不会立即监听此对象,也就是控制台不会有输出,必须要监听的对象有值改

  • vue 中使用 watch 出现了如下的报错的原因分析

    报错: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component definition. Did you reference the function correctly? 原因: watch 是一个对

  • Vue watch响应数据实现方法解析

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

  • vue keep-alive请求数据的方法示例

    背景 index页面:首页品牌入口 list页面:商品列表页面 product页面:商品详情页面 从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表.由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法.希望能给大

  • Vue scoped及deep使用方法解析

    众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • JS数组返回去重后数据的方法解析

    话不多说,请看代码: function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < data.length; i++) { if (!data[i].parent) { temp = data[i]; for (var j = 0; j < data.length; j++) { if (temp.DeliveryType == data[j].DeliveryType

  • Vue实现双向绑定的原理以及响应式数据的方法

    Vue实现双向绑定的原理以及响应式数据的方法

    一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 2.数组实现响应式: 对于数组则是通过继承重写数组的方法splice.pop.push.shift.unshift.sort.reverse.等可以修改原数组的方式实现响应式的,但是通过length以及直接

  • Vue.set()实现数据动态响应的方法

    Vue.set()实现数据动态响应的方法

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

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

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

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

  • Vue.js响应式数据的简单实现方法(一看就会)

    Vue.js响应式数据的简单实现方法(一看就会)

    目录 引言 基本概念 副作用函数 响应式数据 响应式数据的基本实现 实现思路 初步实现尝试 完善响应系统 泛化副作用函数名 修复漏洞 总结 引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri

随机推荐