开发微信小程序的优点_浅谈vue.watch的触发条件是什么

2021-01-05

浅谈vue.watch的触发条件是什么       这篇文章主要介绍了浅谈vue.watch的触发条件是什么?具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

很多人习惯用watch,但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌,请谨慎使用watch。

示例1,下面会触发watch 吗?

 script 
 new Vue({
 data() {
 return {
 city: {id: 1, name: 'Beijing'}
 watch: {
 city() {
 console.log('city changed')
 created() {
 this.city = {id: 1, name: 'Beijing'}
 /script 

会触发,因为在created方法里面重新给city赋值了一个对象,city前后的指向不同了

示例2:

 script 
 new Vue({
 data() {
 return {
 city: {id: 1, name: 'Beijing'}
 watch: {
 city() {
 console.log('city changed')
 created() {
 this.city.name = 'Shanghai'
 /script 

不会触发, 因为created方法执行之后, city的指向没有变

如果我们期望捕获这种更新,应该这样写代码:

watch: {
 city: {
 handler: () = console.log('city changed'),
 deep: true
}

将选项deep设为true能让vue捕获对象内部的变化。

下面讨论一下watch一个数组:

 script 
new Vue({
 el: '#body',
 data() {
 return {
 cities: ['Beijing', 'Tianjin']
 watch: {
 cities() {
 console.log('cities changed')
 /script 

那下面哪些操作会触发cities的watch回调呢

this.cities = ['Beijing', 'Tianjin']
this.cities.push('Xiamen')
this.cities = this.cities.slice(0, 1)
this.cities.pop();
this.cities.sort((a,b)= a.localeCompare(b));
this.cities[0] = 'Shenzhen'
this.cities.splice(0, 1)
this.cities.length = 0

答案是只有最后三行不会触发。

补充知识:vue 深度watch与watch立即触发回调

基础用法

搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化。

 template 
 div 
 span 搜索 /span 
 input v-model="searchVal" / 
 /div 
 /template 
 script 
export default {
 data() {
 return {
 searchVal: ''
 watch: {
 // 在值发生变化之后,重新加载数据
 searchVal(newValue, oldValue) {
 if (newValue !== oldValue) {
 this.loadData()
 methods: {
 loadData() {
 // 重新加载数据,此处需要通过函数防抖
 /script 

立即触发

通过上面的代码,现在已经可以在值发生变化的时候触发加载数据了,但是如果要在页面初始化时候加载数据,我们还需要在created或者mounted生命周期钩子里面再次调用loadData方法。不过,现在可以不用这样写了,通过配置watch的立即触发属性,就可以满足了。

export default {
 watch: {
 // 在值发生变化之后,重新加载数据
 searchValue: {
 // 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
 handler(newValue, oldValue) {
 if (newValue !== oldValue) {
 this.loadData()
 // 配置立即执行属性
 immediate: true
}

深度监听

一个表单页面,需求希望用户在修改表单的任意一项之后,表单页面就需要变更为被修改状态。如果按照上例中watch的写法,那么我们就需要去监听表单每一个属性,太麻烦了,这时候就需要用到watch的深度监听deep

export default {
 data() {
 return {
 formData: {
 name: '',
 sex: '',
 age: 0,
 deptId: ''
 watch: {
 // 在值发生变化之后,重新加载数据
 formData: {
 // 需要注意,因为对象引用的原因, newValue和oldValue的值一直相等
 handler(newValue, oldValue) {
 // 在这里标记页面编辑状态
 // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
 deep: true
}

随时监听,随时取消,了解一下$watch

有这样一个需求,有一个表单,在编辑的时候需要监听表单的变化,如果发生变化则保存按钮启用,否则保存按钮禁用。

这时候对于新增表单来说,可以直接通过watch去监听表单数据(假设是formData),如上例所述,但对于编辑表单来说,表单需要回填数据,这时候会修改formData的值,会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch

export default {
 data() {
 return {
 formData: {
 name: '',
 age: 0
 created() {
 this.$_loadData()
 methods: {
 // 模拟异步请求数据
 $_loadData() {
 setTimeout(() = {
 // 先赋值
 this.formData = {
 name: '子君',
 age: 18
 // 等表单数据回填之后,监听数据是否发生变化
 const unwatch = this.$watch(
 'formData',
 () = {
 console.log('数据发生了变化')
 deep: true
 // 模拟数据发生了变化
 setTimeout(() = {
 this.formData.name = '张三'
 }, 1000)
 }, 1000)
}

根据上例可以看到,我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢,上例中this.$watch返回了一个值unwatch,是一个函数,在需要取消的时候,执行 unwatch()即可取消

以上这篇浅谈vue.watch的触发条件是什么就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866