vue中的计算属性computed

一、简介computed与methods和watch最大的区别在于只有在当前属性发生变化后它才会被触发，大大提升优化程度。如果项目中有的数据常常要发生变化的，可以用computed来实现，比如搜索。二、案例①index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&lt

我吃饭很慢.

3352人浏览 · 2022-02-09 21:41:27

我吃饭很慢. · 2022-02-09 21:41:27 发布

一、简介

1、计算属性是vue实例中的一个配置选项：computed。computed与methods、watch最大的区别在于只有在当前属性发生变化后它才会被触发，大大提升优化程度。
2、通常里面都是一个个计算相关的函数，函数里可以写大量的逻辑，最后返回计算出来的值，即我们可以把复杂计算过程写到一个计算属性中去，让它动态的计算。项目中有的数据常常要发生变化的，可以用computed来实现，比如搜索。
3、计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。如果你不希望有缓存，请用方法来替代。这也是和methods的区别。
4、computed和watch都是观察页面的数据变化的。
5、computed只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存。而watch每次都需要执行函数，methods也是每次都需要执行。数据变化时执行异步操作，这个时候使用watch是合适的

二、案例

①index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- cdn是一种引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 这里用link印入 -->
    <link rel="stylesheet" href="styles.css">
    <title>vue-cdn</title>
</head>

<body>
    <div id="vue-app">
        <h1>computed 计算属性</h1>

        <!-- 可以直接绑定的是一个表达式 -->
        <button @click="a++">Add to A</button>
        <button @click="b++">Add to B</button>
        <p>A - {{ a }}</p>
        <p>B - {{ b }}</p>

        <!-- methods (两者比较像)-->
        <!-- 如果使用的是methods，点addToA的时候，addToB也会执行，methods是只要你一个数据发生变化了，其他的方法都会执行，虽然操作了addToA，而addToB的值没变化，但是也会走里面的方法 -->
        <!-- <p>Age + A = {{ addToA() }}</p>
        <p>Age + B = {{ addToB() }}</p> -->

        <!-- computed -->
        <p>Age + A = {{ addToA() }}</p>
        <p>Age + B = {{ addToB() }}</p>
    </div>
</body>
<script src="app.js"></script>

</html>

②app.js

new Vue({
    el: "#vue-app",
    data() {
        return {
            a: 0,
            b: 0,
            age: 21
        };
    },

    methods: {
        // addToA() {
        //     return this.a + this.age;
        // },
        // addToB() {
        //     return this.b + this.age;
        // }
    },
    //computed对数据的变化有优化，它只会调整已经变化的，没有发生变化的它不会走，提升项目优化程度，搜索最好也使用计算属性
    computed: { //方法可以没有返回值，但是computed一定要有返回值
        addToA() {
            console.log('addToA');
            return this.a + this.age;
        },
        addToB() {
            console.log('addToB');
            return this.b + this.age;
        }
    }
})