【uni-app框架】Vue之watch对象监听仅当对象地址发生改变的时候才会监听【普通监听和深度监听区别】

青旅半醒 2021-09-20 06:36 668阅读 0赞

参考watch的深度监听玩法：[https://blog.csdn.net/qq\_17757973/article/details/78721553][https_blog.csdn.net_qq_17757973_article_details_78721553]

深度监听参考官方：[https://cn.vuejs.org/v2/api/\#watch][https_cn.vuejs.org_v2_api_watch]

<template>
    	<view>
    		<button type="primary" @tap="click">点击改变</button>
    	</view>
    </template>
    
    <script>
    	import marketAssetTradeFormDialog from "@/common/components/app/market/market-asset-trade-form-dialog.vue"
    	export default {
    		data() {
    			return {
    				name:"kirin",
    				obj:{
    					age:18,
    					sex:"man"
    				}
    			}
    		},
    		watch: {
    			name(newValue, oldValue) {
    				console.log("name",newValue,oldValue)
    			},
    			【引用类型】必须改变obj的指向【地址】才能监听成功【仅改变内部属性值是不会监听】
    			obj(newValue, oldValue) {
    				console.log("obj",newValue,oldValue)
    			}
    		},
    		methods: {
    			click() {
    				this.name = "change"
    				this.obj = {name:123}
    			}
    		},
    		components: {
    			marketAssetTradeFormDialog
    		}
    	}
    </script>

[https_blog.csdn.net_qq_17757973_article_details_78721553]: https://blog.csdn.net/qq_17757973/article/details/78721553
[https_cn.vuejs.org_v2_api_watch]: https://cn.vuejs.org/v2/api/#watch

发表评论取消回复

表情：

评论列表（有 0 条评论，668人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 深度监听watch（如何watch监听一个对象内部的变化）

. 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2. 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能...

布满荆棘的人生/ 2024年04月19日 13:08/ 0 赞/ 15 阅读

相关 vue2.0中watch总结：普通监听和深度监听

watch:\{\} 是一个对象，一定要当成对象来用，可监听数据，是vue中数据发生变化进行处理的函数，它有三个选项第一个handler：其值是一个回调函数。即监听到变

分手后的思念是犯贱/ 2023年08月17日 17:38/ 0 赞/ 63 阅读

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 204 阅读

相关 vue—watch深度监听（deep:true）

1、监听数字如下图：第一个输入框绑定了data中的num，使用watch监听num的变化，可以发发现是可以正常监听的。 ![在这里插入图片描述][watermark

拼搏现实的明天。/ 2022年12月21日 03:15/ 0 赞/ 255 阅读

相关 vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-m

向右看齐/ 2022年12月11日 06:29/ 0 赞/ 141 阅读

相关 Watch 监听

第一种普通监听 <input type="text" v-model="userName"/> data (){ return {

快来打我*/ 2022年12月05日 00:58/ 0 赞/ 164 阅读

相关 vue 2.0 watch 监听对象的变化

导读使用 `Vue` 中的 `watch` 方法监听对象，设置 `deep:true` 可以进行深度监听，当对象中的属性发生变化时，会调用 `handler` 方法。

矫情吗；*/ 2022年01月07日 13:47/ 0 赞/ 600 阅读

相关【uni-app框架】Vue之watch对象监听仅当对象地址发生改变的时候才会监听【普通监听和深度监听区别】

参考watch的深度监听玩法：[https://blog.csdn.net/qq\_17757973/article/details/78721553][https_blog.

青旅半醒/ 2021年09月20日 06:36/ 0 赞/ 669 阅读

相关 watch监听

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+攻爆jí腚メ/ 2021年09月17日 10:42/ 0 赞/ 347 阅读

相关 watch监听中立即监听和深度监听

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属

谁践踏了优雅/ 2021年08月13日 18:23/ 0 赞/ 462 阅读