【vue核心技术实战精讲】1.11 侦听器watch的用法

ladymorgana

已于 2024-06-17 08:52:36 修改

阅读量318

点赞数 5

分类专栏：架构师之路-java 文章标签： vue.js 前端 javascript

于 2024-04-01 11:24:33 首次发布

本文链接：https://blog.csdn.net/ladymorgana/article/details/137223853

版权

架构师之路-java 专栏收录该内容

214 篇文章 16 订阅

订阅专栏

文章目录

前言
本节内容
- 1、`侦听器`

前言

上节,我们学习了

Vue指令之v-model双向数据绑定点击进入上一节

本节内容

侦听器场景：异步操作（开销较大）

1、`侦听器`

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

基本的数据类型：使用watch直接监听
复杂数据类型 Object Array：要深度监视

1.1、【监听】基本的数据类型

示例

<body>
    <div id='app'>
        <input type="text" v-model='msg'>
        <h3>{{msg}}</h3>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               msg:'',
               stus:[{name:'jack'}]
            },
            watch: {
                // key是属于data对象的属性名 value:监视后的行为 newV :新值 oldV:旧值
                'msg':function(newV,oldV){
                    console.log(newV,oldV);
                    if(newV === '100'){
                        console.log('hello');
                    }
                    
                }
            },
        })
    </script>
</body>

效果

1.2、【监听】复杂数据类型

示例

<body>
    <div id='app'>
        <h3>{{stus[0].name}}</h3>
        <button @click='stus[0].name = "Tom"'>改变</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               msg:'',
               stus:[{name:'jack'}]
            },
            watch: {
                // 深度监视： Object |Array
                "stus":{
                    deep:'true',
                    handler:function(newV,oldV){
                        console.log(newV[0].name);

                    }
                }
            },
        })
    </script>
</body>