vue中的计算属性computed-CFANZ编程社区

vue中的计算属性computed

一、简介
computed与methods和watch最大的区别在于只有在当前属性发生变化后它才会被触发，大大提升优化程度。如果项目中有的数据常常要发生变化的，可以用computed来实现，比如搜索。

二、案例
①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;
        }
    }
})

0 条评论