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

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

参考watch的深度监听玩法：https://blog.csdn.net/qq_17757973/article/details/78721553

深度监听参考官方：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>