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

2024-04-11 05:40:46

在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深度监听。

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

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组件中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
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中的immediate与watch是什么意思

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

开篇最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的.自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果
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响应数据实现方法解析

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

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

许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.
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会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri

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

相关推荐

随机推荐