经典vue面试题：谈一谈computed计算属性和watch监听属性的区别

最新推荐文章于 2024-05-13 18:32:27 发布

veggie_a_h

最新推荐文章于 2024-05-13 18:32:27 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/wanghe1111_/article/details/122692112

版权

前端面试同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

computed计算属性和watch监听的区别

computed属性

首先computed计算属性是用于在HTML模板中表达式更加简洁，易维护。

特点：

computed具有缓存功能，当与computed变量相关的变量值不发生改变时，一直用的是缓存中的值，只有当依赖变量值发生改变时，computed计算属性值才会发生更新；
computed变量不在data中定义，而是在computed对象中定义；

<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed计算属性</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <!-- 计算属性应用 -->
        <div>{{reverseString}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            msg: 'wanghe',
            msg1: 'baba'
        },
        methods: {},
        //计算属性的用法
        //计算属性是进行缓存了，而方法不存在缓存
        computed: {
            reverseString: function() {
                console.log(this.msg);
                return this.msg1.split('').reverse().join('');
            },
        }
    });
    </script>
</body>
</html>

watch属性

特点：

watch监听属性监听的是data中已经存在的变量，只有当变量值发生改变时，会触发watch监听属性中的相应的方法。
当需要在数据变化时执行异步或开销较大的操作时，这时watch是非常有用的
watch只能监听简单数据类型，当监听对象、数组等复杂数据类型时，其中的元素值改变也不会触发watch中监听对象的方法。
但是可以采用深度监听来监听对象的变化，设置deep: true，就可以解决特点3的问题来监听某个对象的属性，但是当对象嵌套的属性太深时开销太大。

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
    <title>侦听器</title>
</head>

<body>
    <div id="app">
        <div>
            <span>名：</span>
            <span><input type="text" name="" v-model="lastname" @input="handle"></span>
        </div>
        <div>
            <span>性：</span>
            <span><input type="text" name="" v-model="firstname" @input="handle"></span>
        </div>
        <div>
            {{getFullname}}
        </div>
        <div>{{obj}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {
                fullname: '',
                firstname: '',
                lastname: '',
                obj: {
                    name: "wh",
                    age: 23
                }
            },
            methods: {
                handle: function () {
                    this.fullname = this.firstname + this.lastname;
                    // 每次输入都让obj对象的age自增，对象的属性值的变化是不能触发obj监听方法的
                    this.obj.age++
                    // 注意!!!!!!!!只有当这个obj整个对象值改变时才会触发obj的watch监听方法
                    // this.obj = { mes: "值已经改变" }
                },
            },
            //加入监听器，监听器会一直监听属性的变化，一旦变化，就会执行对应的方法
            watch: {
                //val表示firstname的当前的最新值，只要值发生变化就会触发这个方法
                firstname: function (val) {
                    this.fullname = val + ' ' + this.lastname;
                },
                lastname: function (val) {
                    this.fullname = this.firstname + ' ' + val;
                },
                // 不采用深度监听不能够监听到对象属性值的改变
                // obj: function (val) {
                //     console.log(val);
                // },

                // 采用深度监听来监听对象属性值的改变
                obj: {
                    // handler为固定属性，不能改变名字
                    handler: function (val) {
                        console.log(oldval);
                        console.log(newVal);
                    },
                    // immediate: true代表在watch对象中声明了obj这个监听属性后会立即执行handler方法，在正常情况下只有当obj对象属性值改变时才会触发handler
                    immediate: true,
                    // 是否深度监听，默认值为false
                    deep: true
                },

            },
            //添加计算属性实现
            computed: {
                getFullname: function () {
                    return this.firstname + this.lastname;
                }
            },

        });
    </script>
</body>
</html>