vue2中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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言
(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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言


二,监听对象:

(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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言
(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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言


三,监听数组

(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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言
多维数组

<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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言

(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>

vue2 watch,Vue2 Vue3,前端,javascript,开发语言

vue2 watch,Vue2 Vue3,前端,javascript,开发语言


四,监听路由变化文章来源地址https://www.toymoban.com/news/detail-531708.html

// 方法一:

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的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 【前端面经】Vue3和Vue2的区别

    Vue是一种非常流行的JavaScript框架,因其易用性和灵活性在开发人员中备受欢迎。Vue2是Vue框架的上一个重要版本,于2016年发布。但是,Vue3是最新版本的Vue框架,于2020年正式发布并带来了一些重大变化。本文将探讨Vue3和Vue2之间的主要区别。 Vue3的一个显着优势是其更小的代码

    2024年02月02日
    浏览(81)
  • 前端系列——vue2+高德地图web端开发(使用和引入)

    本人非专业前端开发,其实是搞后端的,但是正好接了一个项目需要我负责全栈,所以写了这个系列的文章,如果以后项目可以开源我会放出来的 本次我们要实现的是vue2+高德地图的网页开发 本文需要大家系统学过vue以及初步了解高德地图的情况下理解起来会十分省力 高德

    2024年01月16日
    浏览(46)
  • Vue2和vue3中双向数据绑定的原理,ES6的Proxy对象代理和JavaScript的Object.defineProperty,使用详细

    简介: Object.defineProperty大家都知道,是vue2中双向数据绑定的原理,它 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; 而Proxy是vue3中双向数据绑定的原理,是ES6中一种用于创建代理对象的特殊对象,

    2024年02月15日
    浏览(46)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(47)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(71)
  • 前端开发攻略---从源码角度分析Vue3的Propy比Vue2的defineproperty到底好在哪里。一篇文章让你彻底弄懂响应式原理。

    Vue的响应式到底要干什么? 无非就是要知道当你 读取 对象的时候,要知道它读了。要做一些别的事情 无非就是要知道当你 修改 对象的时候,要知道它改了。要做一些别的事情 所以要想一个办法, 把读取和修改的动作变成一个函数 ,读取和修改的时候分别调用对应的函数

    2024年04月17日
    浏览(46)
  • Vue2 Watch监听

    在Vue2中,我们可以使用watch来监听一个数据的变化,并且在数据变化时执行一些操作。这个特性是Vue2非常强大的一个功能,可以帮助我们监控一个或多个数据的变化,然后做出相应的反应。 要使用watch,我们需要在Vue组件的选项中声明一个watch对象,如下: watch对象的每个属

    2024年02月17日
    浏览(51)
  • 【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:vue2从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2023年04月15日
    浏览(46)
  • 前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别

    🖥️ 前端经典面试题 吊打面试官 专栏:Vue2和Vue3的区别 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答点 二、深入回答 监测机制

    2024年01月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包