vue中watch的用法汇总


Posted in Vue.js onDecember 28, 2020

在vue中,使用watch来响应数据的变化。watch的用法大致有三种。

1. 常用用法

<input type="text" v-model="name"/>
new Vue({
 el: '#app',
 data: {
  name: '咸鱼'
 },
 watch: {
  name(newVal,oldVal) {
   // ...
  }
 } 
})

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

watch: {
  name: 'nameChange'
 }

2 .立即执行(immediate和handler)

第一种用法watch有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

new Vue({
 el: '#app',
 data: {
  name: ''
 },
 watch: {
  name: {
  handler(newVal,oldVal) {
   
// ...
  
},
  
immediate: true
  }
 } 
})

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

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

3 .深度监听

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

<input type="text" v-model="person.name"/>
new Vue({
 el: '#app',
 data: {
  person: {id: 1, name: '咸鱼'}
 },
 watch: {
  person: {
   handler(newVal,oldVal) {
   // ...
  },
  deep: true,
  immediate: true
  }
 } 
})

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

watch: {
  'person.name': {
   handler(newVal,oldVal) {
   // ...
   },
   deep: true,
   immediate: true
  }
 }

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

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

以上就是vue中watch的用法汇总的详细内容,更多关于vue watch用法的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue实现广告栏上下滚动效果
Nov 26 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vuex的使用步骤
Jan 06 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
Vue实现省市区三级联动
Dec 27 #Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
You might like
php 将excel导入mysql
2009/11/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP $_FILES函数详解
2011/03/09 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php字符串操作常见问题小结
2016/10/11 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python新手如何理解循环加载模块
2020/05/29 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
营销与策划应届生求职信
2013/11/04 职场文书
机关门卫制度
2014/02/01 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js