vue监听用法

最新推荐文章于 2025-05-30 09:08:25 发布

little达

最新推荐文章于 2025-05-30 09:08:25 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

原文链接：https://www.csdn.net/tags/NtTaAgxsMjkzMDgtYmxvZwO0O0OO0O0O.html

本文详细介绍了如何在Vue组件中使用简单和深度监听功能，包括监听name属性变化和obj对象内部属性变动，并通过点击按钮触发自定义函数。适合Vue开发者理解数据绑定和监听机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    {{ name }}
    <br>
    {{obj.age}}
    <br>
    {{arr}}
    <button @click="fn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "zs",
      obj:{
        age:18,
        gender:'女'
      },
      arr:[1,2,4]
    }
  },
  watch:{
  // 1、简单监听
	name(newVal){
 	 	console.log('监听到了' + newVal);
		},
   // 2、复杂监听
   // 2.1、深度监听
   obj:{
  		deep:true,//深度监听
  		immediate:true,//立即监听
  		handler(newVal){
    		console.log('监听到了' +newVal.age);
 	 },
 	// 2.2、监听对象里的属性
 	'obj.age'(newVal){
  		console.log('监听到了' +newVal);
	},
	
},

  	}
  }

  </script>