脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2中watch使用

老生常谈vue2中watch的使用

 更新时间：2024年01月31日 10:36:09   作者：coderkey  
watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下

一，监听基本普通属性：

字符串，布尔值，number

（1）把要监听的msg值看作方法名，来进行监听。

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
    // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
    msg(newVal,oldVal) {
      console.log('oldVal:',oldVal)   // coderkey
      console.log('newVal:',newVal)   // pink
    }
  }
};
</script>

（2）把要监听的msg值看作对象，利用hanler方法来进行监听

watch第一次绑定值的时候不会执行监听，如果需要第一次就执行监听 则需要设置：immediate: true

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
   //  如果需要第一次就执行监听 则需要设置：immediate: true
    msg: {
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)  
        console.log('newVal:',newVal)  
      },
      immediate: true
    }, 
  }
};
</script>

二，监听对象：

（1）监听对象需要用到深度监听，设置deep:true

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    obj:{
    //  注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    }
  }
};
</script>

（2）可以只监听对象的其中一个属性值 ’对象.属性‘ 的形式

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    // 函数执行后，获取的 newVal 值和 oldVal 值不一样
    'obj.name'(newVal,oldVal) {
      console.log('oldVal:',oldVal)    // coderkey
      console.log('newVal:',newVal)   // pink
    }, 
   /*  'obj.name':{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
    // 立即处理 进入页面就触发
      immediate: true
     }  */
  }
}
</script>

三，监听数组

（1）（一维、多维）数组的变化不需要深度监听

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     arr1:[1,2,4,5,6]
    }
  },
  methods: {
    btnClick() {
      this.arr1.unshift(0)
    },
  },
  watch: {
    arr1:{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)    // [0,1,2,4,5,6]
        console.log('newVal:',newVal)   // [0,1,2,4,5,6]
      },
      // immediate: true,
     } 
  }
}
</script>

多维数组

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     arr1:[1,2,4,[5,6]]
    }
  },
  methods: {
    btnClick() {
      this.arr1.push(0)
    },
  },
  watch: {
    arr1:{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
      // immediate: true,
     } 
  }
}
</script>

（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。

<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr1: [
				{
					name: 'coderkey',
					age: 22
				}
			],
			arr2: [
				{
					name: 'coderkey',
					age: 22,
					children: [
						{
							name: 'why',
							sex: 33
						}
					]
				}
			]
    }
  },
  methods: {
    btnClick() {
      this.arr1[0].name = 'pink'
      this.arr2[0].children[0].name = 'pink'
    },
  },
  watch: {
    arr1: {
			handler(newVal, oldVal) {
				console.log('newVal1', newVal);
				console.log('oldVal1', oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log('newVal2', newVal);
				console.log('oldVal2', oldVal);
			},
			deep: true
		}
  }
}
</script>

四，监听路由变化

// 方法一：
watch:{
  $router(to,from){
       console.log(to.path)
  }
}
// 方法二：
watch: {
   $route: {
     handler:  function (val, oldVal){
       console.log(val);
     },
     // 深度观察监听
     deep:  true
   }
},
// 方法三：
watch: {
   '$route' : 'getRoutePath'
},
methods: {
   getRoutePath(){
     console.log( this .$route.path);
   }
}

到此这篇关于老式常谈vue2中watch的使用的文章就介绍到这了,更多相关vue2中watch使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue列表循环从指定下标开始的多种解决方案

    Vue列表循环从指定下标开始的多种解决方案

    这篇文章主要介绍了Vue列表循环从指定下标开始的多种方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • VeeValidate在vue项目里表单校验应用案例

    VeeValidate在vue项目里表单校验应用案例

    这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • vue模版编译详情

    vue模版编译详情

    本文的初衷是想让更多哎学习的人知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑,需要的朋友可以参考一下
    2021-09-09
  • Vue 第三方字体图标引入 Font Awesome的方法

    Vue 第三方字体图标引入 Font Awesome的方法

    今天小编就为大家分享一篇Vue 第三方字体图标引入 Font Awesome的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+ElementUI容器无法铺满网页的问题解决

    Vue+ElementUI容器无法铺满网页的问题解决

    这篇文章主要介绍了Vue+ElementUI容器无法铺满网页的问题解决,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-08-08
  • Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例

    Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例

    本文主要介绍了Vue2+SpringBoot实现数据导出到csv文件并下载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • electron+vue 实现静默打印功能

    electron+vue 实现静默打印功能

    这篇文章主要介绍了electron+vue 实现静默打印功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • daisyUI解决TailwindCSS堆砌class问题详解

    daisyUI解决TailwindCSS堆砌class问题详解

    这篇文章主要为大家介绍了daisyUI解决TailwindCSS堆砌class问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • vue中对token有效期的深入理解

    vue中对token有效期的深入理解

    本文主要介绍了vue中对token有效期的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 详解vue 单页应用（spa）前端路由实现原理

    详解vue 单页应用（spa）前端路由实现原理

    这篇文章主要介绍了详解vue 单页应用（spa）前端路由实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论