vue watch 使用方法

方法一：直接写一个监听处理函数

方法二：监听数据后面加字符串形式方法名

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

方法一：直接写一个监听处理函数，每次监听到属性值（如cityName）变化，执行此函数

方法二：监听数据后面加字符串形式方法名，方法名在 methods 中定义

方法三：使用 immediate（立即）属性和 handler （处理者）方法，deep 深度监测。如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名

watch 特点

方法一：直接写一个监听处理函数

每次监听到属性值（如cityName）改变时，执行此函数

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

export default{data () {return {cityName: '上海'}  },watch: {cityName(newVal, oldVal){this.cityName = newVal}}
}

方法二：监听数据后面加字符串形式方法名

方法名在 methods 中定义

export default{data () {return {cityName: '上海'}  },watch: {cityName: 'nameChange'},methods: {nameChange(newVal, oldVal){this.cityName = newVal}}
}

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

watch 特点
- 当值第一次绑定时不会执行监听函数
- 只有值发生改变时才会执行监听函数
- 如果需要第一次绑定时执行监听函数，使用 immediate 属性 boolean 类型
使用方法
- 监听属性后面写成对象形式，包含 handler 方法和 immediate 属性
- immediate 属性表示 watch 首次绑定时，是否执行 handler 方法
- immediate 为 true 表示 watch 声明的时候，立即执行 handler 方法
- immediate 值为 false 则和一般 watch 用法一样，在数据发生变化时才执行 handler 方法

export default{data () {return {cityName: '上海'}  },watch: {cityName: {handler(newVal, oldVal){this.cityName = newVal},immediate: true}}
}

deep 深度监听

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

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

export default{data () {return {cityName: {id: 1, name: '上海'}}  },watch: {cityName: {handler(newVal, oldVal){console.log('newVal', newVal)console.log('oldVal', oldVal)},immediate: true,deep: true,}}
}

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

export default{data () {return {cityName: {id: 1, name: '上海'}}  },watch: {'cityName.name': {handler(newVal, oldVal){console.log('newVal', newVal)console.log('oldVal', oldVal)},immediate: true,deep: true,}}
}

数组（一维、多维）变化不需要通过深度监听
对象数组中对象属性变化需要进行深度监听
watch 中不要使用箭头函数，因为箭头函数中的 this 是指向当前作用域

vue watch 使用方法相关推荐

Vue 中定义方法页面上使用
vue中定义方法的格式为什么要这样定义最近在学习前段,特别是HBuildX 我看里面很多方式都是这样使用,所以想强加练习如何引用当然我们的editArticle也可以直接放到js中,如下: 都 ...
vue 2.0 filter html,vue.filter使用方法是什么
vue.filter使用方法:对值进行筛选加工,代码为[ {{ msg }} v-bind]. vue.filter使用方法: 在Vue中filter过滤器是一个非常强大的功能. 个人觉得称它为加工车 ...
非vue子页面调用vue父页面方法
由于要使用之前项目使用的页面,需要从非vue iframe子页面调用vue项目 1.父页面 <iframe :src="value.urlPath" frameborder= ...
vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用
vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用异步解决方案:async/await 多个await,同步拿到数据再处理多个接口处理拿到数 ...
vue学习笔记（四）- cmd无法识别vue命令解决方法
vue学习笔记(四)- cmd无法识别vue命令解决方法参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...
vue过滤器使用方法
vue过滤器使用方法过滤器分全局过滤器和局部过滤器.和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例. <!DOCTYPE htm ...
使用Vue三种方法实现简单计算器
使用Vue三种方法实现简单计算器代码实现了一个简单的计算器,用户可以在输入框中输入两个数字,选择一个操作符,并点击"等于"按钮,Vue.js会根据用户的输入进行计算,并将结果显示 ...
高德地图货车路径规划JS API以及WEB API在VUE中使用方法
做一个路径规划系统,使用到了高德地图的API以及VUE,而路径规划方面在高德地图中,货车的接口使用次数是极为有限的,研究了一段时间,所以使用的时候要谨慎一点次数. 本文记录一下高德地图的JS API和 ...
VUE的creat方法异步执行
遇见的问题是发现有个方法时灵时不灵 created() { //Vue的creat方法是异步的this.getUser();this.getApplyInfo(); },methods: {getUs ...
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结官方升级英文文档,中文文档相对滞后. 简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概 ...

vue watch 使用方法

方法一：直接写一个监听处理函数

方法二：监听数据后面加字符串形式方法名

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

vue watch 使用方法相关推荐

最新文章

热门文章