2024年Web前端最新vue中的计算属性和侦听器_7)，阿里前端hr面

最新推荐文章于 2024-06-26 08:55:23 发布

2401_84413092

最新推荐文章于 2024-06-26 08:55:23 发布

阅读量367

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84413092/article/details/138732112

版权

程序员专栏收录该内容

192 篇文章 1 订阅

订阅专栏

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

vue中的计算属性和侦听器

**
computed（计算属性）
在模板中放入太多的逻辑不但难以维护，就连作者自身在看到代码的时候可能都难以理解。vue开发了计算属性，计算属性是依赖于本身的响应式以来进行缓存的，只在响应式的依赖中发生改变时他们才重新求值，所从根本上大大减少了麻烦的逻辑和运算复杂度。
代码示例：

<template>
    <div id="app">
        <p>{{ reversedMessage }}</p>
        <p>{{ reversedMessage }}</p>
        <input type="text" v-model="message" />
        <p>{{ getReversedMessage() }}</p>
        <p>{{ getReversedMessage() }}</p>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            message: "Hello"
        };
    },
    computed: {
        reversedMessage() {
            console.log("reversedMessage");
            // 当message值改变时，触发更新
            return this.message
                .split("")
                .reverse()
                .join("");
        }
    },
    methods: {
        getReversedMessage() {
            console.log("getReversedMessage");
            return this.message
                .split("")
                .reverse()
                .join("");
        }
    }
};
</script>

在这里插入图片描述
我们从上述的代码中可以看出来reversedMessage使用了两次，但是却只输出了一次“reversedMessage”。调用了两次getReversedMessage()方法，输出了两次“getReversedMessage”。
我们调用了两次方法在程序内部只进行了一次运算然后将数据做了缓存，而后就不再进行新的运算，直接从中获取即可，只有当messasge改变的时候才会重新计算。所以就算再复杂的运算逻辑只要message不变也就是数据的多次调用罢了。这样就很大程度上减小了开销不论是时间方面还是内存方面。
watch（侦听器）
这个方法一般用不到，但是当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
代码示例：

<template>
    <div>
        <p>data {{message}}</p>
        <input type="text" v-model="data" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: undefined,


###  总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)