实例详解vue.js浅度监听和深度监听及watch用法

更新时间：2018年08月16日 11:06:20 作者：爱吃排骨

这篇文章主要介绍了vue.js浅度监听和深度监听及watch用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

第一个浅度监听：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  
 var vm=new Vue({
  el:"#app",
  data:{
   a:10,
   b:15
  }
 });
 vm.$watch("a",function(){
  alert('a变化了');
  this.b=100;
 });
 document.onclick=function(){
  vm.a=2
 }
 </script>
 </body>
</html>

第二个深度监听

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a|json}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  var vm = new Vue({
  el: "#app",
  data: {
   a: { id: "1", title: "width" },
   b: 15
  }
  });
  vm.$watch("a", function() {
  alert('a变化了');
  this.b = 100;
  }, { deep: true });
  document.onclick = function() {
  vm.a.id = "2";
  }
 </script>
 </body>
</html>

ps：下面看下vue中watch用法

对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写
<template>
　　//观察数据为字符串或数组
　　 <input v-model="example0"/>
　　 <input v-model="example1"/>
　　/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
　　 <input v-model="example2.inner0"/>
</template>
<script>
　　 export default {
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1,
　　　　　　　　　　　　innner1:2
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},
　　　　　　watch:{
　　　　　　　　example0(curVal,oldVal){
　　　　　　　　　　console.log(curVal,oldVal);
　　　　　　　　},
　　　　　　　　example1:'a'，//值可以为methods的方法名
　　　　　　　　example2:{
　　　　　　　　　//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　　handler(curVal,oldVal){
　　　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　　　},
　　　　　　　　　　deep:true
　　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　　a(curVal,oldVal){
　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　}
　　　　　　}
  }
</script>

您可能感兴趣的文章:

vue下载二进制流图片操作
这篇文章主要介绍了vue下载二进制流图片操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue设置一开始进入的页面教程
今天小编就为大家分享一篇vue设置一开始进入的页面教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
elementUI select组件value值注意事项详解
这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue3实现自定义指令拦截点击事件的示例代码
某些应用场景会给点击事件添加权限，不存在权限就拦截点击事件，有权限就继续正常触发点击事件。这样的效果是如何实现的呢，本文就来和大家详细讲讲
2023-02-02
vue项目中loadsh库常用方法说明
这篇文章主要介绍了vue项目中loadsh库常用方法说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue利用openlayers实现动态轨迹
这篇文章主要为大家介绍了vue利用openlayers实现动态轨迹，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
vue2.0的计算属性computed和watch的区别及各自使用场景解读
这篇文章主要介绍了vue2.0的计算属性computed和watch的区别及各自使用场景，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue实现图片轮播组件思路及实例解析
这篇文章主要介绍了Vue实现图片轮播组件思路及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
Vue实现鼠标经过文字显示悬浮框效果的示例代码
这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue+element tree懒加载更新数据的示例代码
这篇文章主要介绍了vue+element tree懒加载更新数据,文中给大家补充介绍了Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新的详细代码，感兴趣的朋友跟随小编一起看看吧
2022-09-09