vue 的 watch监听

最新推荐文章于 2024-04-28 01:22:19 发布

栗栗子~

最新推荐文章于 2024-04-28 01:22:19 发布

阅读量159

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45807943/article/details/122455405

版权

vue 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>

栗栗子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 的 watch监听

<body><div id="app"> <input type="button" value="更改名字" @click="change"></div><script src="vue.js"></script><script> new Vue({ el: '#app', data: { food: { id:.
复制链接

扫一扫

专栏目录