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从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
一次编写,随处运行
2006/10/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
js获取div高度的代码
2008/08/09 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python数据化运营的重要意义
2019/11/25 Python
python默认参数调用方法解析
2020/02/09 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
高中运动会入场词
2014/02/14 职场文书
股权转让协议书
2014/04/12 职场文书
在职员工证明书
2014/09/19 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang