七、Vue 监听属性

文章目录

一、简介
二、基本语法
- 简单监听
- 深度监听
三、与计算属性的区别
- 计算属性（computed）的特点
- 监听属性和计算属性的不同应用场景
四、在组件中的应用
- 组件内监听属性
- 父子组件通信中的监听属性
五、注意事项
- 异步操作
- 不要过度使用

在这里插入图片描述

一、简介

在 Vue.js 中，监听属性（watch）是一个强大的特性，它允许我们观察和响应 Vue 实例数据的变化。当被监听的数据发生改变时，我们可以执行特定的操作，比如更新其他数据、发起网络请求或者进行一些复杂的逻辑判断。

二、基本语法

简单监听

监听属性是一个对象，它的键是要监听的数据属性名，值是一个函数。例如，我们有一个 Vue 实例，其中有一个message数据属性，想要监听它的变化，可以这样写：

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello'
    },
    watch: {
        message: function (newValue, oldValue) {
            console.log('message属性发生了变化，旧值是' + oldValue + ',新值是' + newValue);
        }
    }
});

在这个例子中，当message的值改变时，监听函数就会被调用。函数接收两个参数，newValue是变化后的新值，oldValue是变化前的旧值。这样我们就能清楚地知道数据是如何变化的。

深度监听

当我们要监听的对象是一个复杂的嵌套对象时，默认情况下，Vue.js 只会浅层地监听对象的属性。如果想要深度监听对象内部属性的变化，需要设置deep: true。例如：

var vm = new Vue({
    el: '#app',
    data: {
        user: {
            name: 'John',
            age: 30
        }
    },
    watch: {
        user: {
            handler: function (newValue, oldValue) {
                console.log('user对象发生了变化，旧值是', oldValue, ',新值是', newValue);
            },
            deep: true
        }
    }
});

这里我们深度监听了user对象，当user对象内部的name或者age等属性发生变化时，监听函数都会被触发。

三、与计算属性的区别

计算属性（computed）的特点

计算属性主要用于根据已有的数据属性计算出一个新的值，并且这个值会被缓存。只有当它依赖的属性发生变化时，计算属性才会重新计算。例如：

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'John',
        lastName: 'Doe'
    },
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName;
        }
    }
});

在这个例子中，fullName是一个计算属性，它依赖于firstName和lastName。当firstName或者lastName改变时，fullName会重新计算。但是如果多次访问fullName，只要它依赖的属性没有变化，就会返回缓存的值。

监听属性和计算属性的不同应用场景

计算属性适合于将一些复杂的逻辑用于生成一个新的数据属性，并且这个属性的值在很大程度上依赖于其他数据属性的稳定状态。而监听属性更侧重于在数据发生变化时执行一些副作用，比如发送网络请求或者操作 DOM。例如，当用户的购物车数据发生变化时，我们可以用监听属性来发送一个更新购物车信息的网络请求；而计算购物车商品总价这样的功能，使用计算属性就更为合适。

四、在组件中的应用

组件内监听属性

在 Vue 组件中，监听属性的使用方式和在 Vue 实例中类似。例如，我们有一个简单的组件，用于显示用户信息并监听用户年龄的变化：

<template>
    <div>
        <p>姓名：{{ user.name }}</p>
        <p>年龄：{{ user.age }}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {
                name: 'Alice',
                age: 25
            }
        };
    },
    watch: {
        'user.age': function (newValue, oldValue) {
            console.log('用户年龄发生了变化，旧值是' + oldValue + ',新值是' + newValue);
        }
    }
};
</script>

在这里，当组件内user.age的值改变时，监听函数就会被触发，我们可以在控制台看到相应的信息。

父子组件通信中的监听属性

在父子组件通信中，监听属性也发挥着重要的作用。例如，父组件传递一个数据属性给子组件，子组件可以通过监听这个属性来响应父组件数据的变化。假设父组件有一个message属性传递给子组件：

<!-- 父组件 -->
<template>
    <div>
        <input v - model="message">
        <child - component :message="message"></child - component>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            message: '初始消息'
        };
    }
};
</script>
html
<!-- 子组件 -->
<template>
    <div>
        <p>收到的消息：{{ message }}</p>
    </div>
</template>
<script>
export default {
    props: {
        message: String
    },
    watch: {
        message: function (newValue, oldValue) {
            console.log('收到的消息发生了变化，旧值是' + oldValue + ',新值是' + newValue);
        }
    }
};
</script>