watch数据监控

babywenever

已于 2023-11-29 20:04:29 修改

阅读量50

点赞数

文章标签：前端 javascript vue.js

于 2023-11-29 19:43:16 首次发布

本文链接：https://blog.csdn.net/babywenever/article/details/134697553

版权

1. 使用watch,先指定一个要监控的数据，调用 handler(newValue,oldValue){}

2. 不设置 immediate: true 默认第一次是不触发的（从无到有的过程) ，默认为false

3. 当监控的数据是对象或者数组的引用数据类型，那么修改某个属性是监控不到的，需要当整个对象或数组发生改变才能监控到

4. 设置 deep:true 实现深度监控，不写的话改变某一个属性则监控不到，对象认为你没有改变

设置了就可以监控到，但是 newValue和oldValue是一样的，当改变整个对象newValue和oldValue才会不一样

5. watch 既可以是函数模式，也可以是对象模式

6.使用 vm.$watch 也可以实现监控,但不能实现深度监控和立即监控，建议写成对象形式

第一个参数是监控对象，第二个是函数

vm.$watch("lastName",function(newValue,oldValue){
             console.log("lastName",newValue,oldValue)
         })

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>计算属性和监视的使用和区别</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model="firstName" /> <br />
            名：<input type="text" v-model="lastName" />

            <!-- TODO:监控数据  -->
            {{ fullName2 }}
            <br>

            <!-- ! v-model可以对嵌套的对象属性也实现双向数据绑定操作  -->
            {{ userObj.name }}
            <br>
            {{ userObj }}
            <br>
            <input type="text" v-model="userObj.name">
        </div>
        <script>
            Vue.config.productionTip = false;
            let vm = new Vue({
                el: '#root',
                data: {
                    // 我们想对firstName进行监控，但是呢，vue将firstName初始化成china这个数据是需要一个过程的，原来从undefined我们将它赋值成china
                    firstName: 'china',
                    lastName: 'vane',
                    fullName2:'',
                    userObj:{
                        name:"lisi",
                        sex:"男"
                    }
                },
                // watch:监控
                watch:{
                    // firstName数据类型是字符串
                    firstName:{
                        // 1.watch是根据被监控的内容改变而触发的
                        // 2.如果不进行指定的设置，默认第一次是不触发的（从无到有的过程)
                        // 3.利用 immediate: true,可以实现对数据进行立即的监控操作，默认为false
                        handler(newValue,oldValue){
                            // 初始化时没有值
                            // 第一次为 china undefined
                            console.log(newValue,oldValue) 
                            this.fullName2=this.firstName+"-"+newValue  // china-china
                        },
                        immediate: true     // 默认为false
                    },
                    userObj:{
                        // userObj的数据类型是对象，我们在监控的是整个对象，但改变的不是整个，而仅仅是对象中的某个属性而已，所以整个对象它并不知道我已经改变了
                        handler(newValue,oldValue){
                            console.log(newValue,oldValue)
                            console.log("实现userObj.name的数据变化监控")
                        },
                        immediate: true,
                        deep:true   // 深度监控，默认为false
                    }
                }
            });
            console.log(vm)

            // $watch是存在于vm实例的 prototype原型链上的，它是函数类型，所以我们可以直接通过 vm.$watch进行函数的调用
            // watch 既可以是函数模式，也可以是对象模式
            // 监控数据，函数监控第一次是不触发的，如果想要第一次就触发，建议写成对象形式，并且设置immediate: true
            vm.$watch("lastName",function(newValue,oldValue){
                console.log("lastName",newValue,oldValue)
            })
        </script>
    </body>
</html>

babywenever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
watch数据监控

设置了就可以监控到，但是 newValue和oldValue是一样的，当改变整个对象newValue和oldValue才会不一样。3. 当监控的数据是对象或者数组的引用数据类型，那么修改某个属性是监控不到的，需要当整个对象或数组发生改变才能监控到。4. 设置 deep:true 实现深度监控，不写的话改变某一个属性则监控不到，对象认为你没有改变。6.使用 vm.$watch 也可以实现监控,但不能实现深度监控和立即监控，建议写成对象形式。5. watch 既可以是函数模式，也可以是对象模式。
复制链接

扫一扫