Vue : 监视属性

简介: Vue : 监视属性


一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
 
    <style>
        .classdiv {
            border: 1px solid green;
            margin: 5px;
        }
    </style>
</head>
<body>
        <div id="app">
            <div class="classdiv">
                <p>{{count}}</p>
                <p>{{user.name}}</p>
                <input type="button" value="增加count" @click="addCount">
                <input type="button" value="修改user.name" @click="updateName">
            </div>
        </div>
</body>
<script>
        var vue = new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },
                    updateName () {
                        this.user.name = '张三';
                    }
                },
                // 定义监听器
                watch : {
                    count :{
                        handler(newValue, oldValue) {
                            console.log(newValue, oldValue);
                        }
                    },
                    'user.name' : function(newVal,oldVal) {
                        console.log(newVal,oldVal);
                    }
                }
            });
</script>
</html>

       点击 '增加count', 上面的数字一次一次的在增加至9, 后台:

监听属性

       想要监听上述的count的值的修改, 就要在vm中加入监听属性:

        var vue = new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },
                    updateName () {
                        this.user.name = '张三';
                    }
                },
                // 定义监听器
                watch : {
                    count :{
                        handler(newValue, oldValue) {
                            console.log(newValue, oldValue);
                        }
                    },
                    'user.name' : function(newVal,oldVal) {
                        console.log(newVal,oldVal);
                    }
                }
            });

       下面的watch 即为Vue的监听器, 监听器里面的内容是一个一个对象, 对象的名字就是我们要监视的data中的对象.

handler

       监听器中的一个方法, 为handler, 这个是用来处理件监听的事件, newValue为新的值, oldValue为旧的值, 监听器会获取被修改的状态, 然后将新旧值赋值给newValue和oldValue.

       监听前置条件, 监听的属性被修改了, 就会执行handler.

       是否可以监听到计算属性?

       计算属性同样可以被监听, 例如有一个监听属性为info, 那么使用watch监听:

        var vue = new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                computed : {
                    computedCount : {
                        get() {
                            return this.count + 1;
                        }
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },
                    updateName() {
                        this.user.name = '张三';
                    }
                },
                // 定义监听器
                watch : {
                    count :{
                        handler(newValue, oldValue) {
                            console.log('监听了count属性');
                            console.log(newValue, oldValue);
                        }
                    },
                    computedCount : {
                        handler(newValue, oldValue) {
                            console.log('监听了computedCount计算属性');
                            console.log(newValue, oldValue);
                        }
                    },
                    'user.name' : function(newValue,oldValue) {
                        console.log(newVal,oldVal);
                    }
                }
            });

immediate

       上述的count, 还是computedCount都是在被修改的时候被监听, 但是可以设置immediate, 然后data中的对象在第一次初始化的时候也被监听.

       使用watch时有一个特点,就是当data中的属性进行第一次绑定时,不会执行监听器,只有值发生改变时才会执行handler监听。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

                watch : {
                    count :{
                        immediate: true,
                        handler(newValue, oldValue) {
                            console.log('监听了count属性');
                            console.log(newValue, oldValue);
                        }
                    }
                }

       true表示初始化也要执行监听, false反之

vm.$watch('xxx')

       除了在创建vm实例的时候去定义watch, 还可以在创建vue实例之后去实现一个监听器, 就如标题那样 :

        var vm= new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                computed : {
                    computedCount : {
                        get() {
                            return this.count + 1;
                        }
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },
                    updateName() {
                        this.user.name = '张三';
                    }
                },
                // 定义监听器
                // watch : {
                //     count :{
                //         immediate: true,
                //         handler(newValue, oldValue) {
                //             console.log('监听了count属性');
                //             console.log(newValue, oldValue);
                //         }
                //     },
                //     computedCount : {
                //         handler(newValue, oldValue) {
                //             console.log('监听了computedCount计算属性');
                //             console.log(newValue, oldValue);
                //         }
                //     },
                //     'user.name' : function(newValue,oldValue) {
                //         console.log(newVal,oldVal);
                //     }
                // }
            });
    vm.$watch('count', {
        immediate: true,
        handler(oldValue, newValue) {
            console.log(newVal, oldVal);
        }
    });

       如果你在创建vue实例的时候就知道要监视什么属性, 那么你可以在创建实例的时候定义监视器, 反之如果你不知道要监视什么属性, 那么你就可以在创建实例之后, 去个性的选择自己需要监视的属性.

扩展点


深度监视

       如果监视的是对象的一个属性, 例如:

       我要监视user中的id, 该如何监视, 最简单的方法, 就是直接监视user,

    vm.$watch('user', {
        immediate: true,
        handler(oldValue, newValue) {
            console.log(newVal, oldVal);
        }
    });
<body>
    <div id="app">
        <div class="classdiv">
            <p>我是user的id</p>
            <input type="button" value="修改user.id" @click="updateId">
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: '博子妹妹'
            }
        },
        methods: {
            updateId() {
                this.user.id++;
            }
        }
    });
    vm.$watch('user', {
        immediate: true,
        handler(oldValue, newValue) {
            console.log(oldValue, newValue);
        }
    });
</script>

点击之后, 发现后台并不会打印oldValue和newValue,

       分析:  因为他监视的是这个user的内存地址, 修改user的id里面的value并不会对其地址造成影响, 只有在替换掉整个user的时候才会触发监视, 例如将data中的user改为:

       user = {id = 2, name = '博子妹妹'}

       解决, 可以写成user.id来监视:

    vm.$watch('user.id', {
        immediate: true,
        handler(oldValue, newValue) {
            console.log(newValue, oldValue);
        }
    });

       这就是监视某个属性的某个值.

       但是这种方法只针对于id这一个变量有用, 假设我的user中包含很多个键值对, 例如:

a : 1,

b : 2,

c : 3,

d : 4

        data: {
            user: {
                id: 1,
                name: '博子妹妹',
                a: 1,
                b: 2,
                c: 3,
                d: 4
            }
        }

       假设我要监视这里面的所有数据, 只要这里面的键值对发生了修改, 就需要去监听他, 该如何操作:

       解决: 在监听器中添加deep属性:

    vm.$watch('user', {
        deep : true,
        immediate: true,
        handler(oldValue, newValue) {
            console.log(newValue, oldValue);
        }
    });

深度监视:

(1).Vue中的watch默认不监测对象内部值的改变 (一层)

(2).配置deep:true可以监测对象内部值改变(多层)。

       备注:

(1).Vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

监视的简写

       如果监视里面是没有immediate还有deep属性的时候, 就可以使用简写, 简写也就是把对应要监听的属性写成方法的形式, 假设我们要监听data中的count属性:

        watch: {
            count(newValue, oldValue) {
                console.log(newValue, oldValue);
            }
        }

        如果是创建vue实例之后:

正常写法:

    vm.$watch('count', {
        deep: true,
        immediate: true,
        handler(oldValue, newValue) {
            console.log(newValue, oldValue);
        }
    });

简写:

    vm.$watch('user', function (newValue, oldValue) {
        console.log(newValue, oldValue);
    });

computed和watch之间的区别

1.computed能完成的功能,watch都可以完成。

2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。

       两个重要的小原则:

1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。

2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等》,最好写成箭头函数,

这样this的指向才是vm 或 组件实例对象。

目录
相关文章
|
6天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
5天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
5天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
11 2
|
5天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
6天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
6天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
6天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
9天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9