conputed属性

conputed类似与data，也可以用来存储属性，只不过data只能存储一些简单的属性，如字符串等等，而computed可以计算一些属性。

拼接字符串

直接页面拼接

例如现在页面中要显示一个两个data变量拼接的字符串，可以直接在页面中拼接字符串，代码可以如下:

<!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">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{title+"---"+des}}
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"阿呆",
            des:"战士"
        },
        methods:{},
        computed:{

        }
    })
</script>

第12行直接在页面中拼接字符串

缺点

计算操作尽量避免在页面中进行，会造成页面复杂混乱，因此计算操作应该放入computed中进行。

使用computed拼接字符串

computed的用法类似于methods中的用法，都需要先声明一个函数，如下代码:

<!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">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{title+"---"+des}}
        {{titleDes}}
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"阿呆",
            des:"战士"
        },
        methods:{},
        computed:{
            titleDes(){
                return this.title+"~~~~"+this.des
            }
        }
    })
</script>

25-29行在computed中首先声明一个titleDes这个类似于函数的结构，但是在computed中必须要有return返回计算之后的数值

计算价格

一个小案例，提供商品单价和数量，在页面商呈现总价格，并且更改数量时可以实时计算价格。

页面直接计算渲染

<!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">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>单价:{{price}}</div>
        <input type="text" v-model="num">
        <h1>总价:{{price*num}}</h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1,
            price:99
        }
    })
</script>

第14行直接在页面中计算价格

测试页面:

可以看到总价显示正常，但是计算价格这个步骤是在页面中完成的，这样会导致页面逻辑复杂，并且多次调用时需要重复计算，复用性降低。

methods计算总价

下面使用methods计算价格并且在页面中调用函数。

代码如下:

<!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">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>单价:{{price}}</div>
        <input type="text" v-model="num">
        <h1>总价:{{totalPrice()}}</h1>
        <h2>总价:{{totalPrice()}}</h2>
        <h3>总价:{{totalPrice()}}</h3>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1,
            price:99
        },
        methods:{
            totalPrice(){
                console.log("函数被调用")
                return this.price*this.num
            }
        }
    })
</script>

第14、15、16行分别直接调用方法来计算价格
26-29行为计算总价的函数

观察页面：

可以看到当总价格在页面中被多次引用时，对应的methods的方法也会被多次执行，这样就造成了重复计算问题。

问题：为什么在事件绑定methods方法时不需要加括号而在{{}}中调用methods方法时必须要加括号？

例如使用@click="function"绑定方法时可以不用括号，而在{{}}中调用方法时必须按照{{function()}} 来写。

原因是因为使用v-on绑定方法时会自动添加括号，而直接使用{{}}渲染时不会自动添加括号。

computed计算总价

使用computed计算属性来计算价格:

<!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">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>单价:{{price}}</div>
        <input type="text" v-model="num">
        <h1>总价:{{sumPrice}}</h1>
        <h2>总价:{{sumPrice}}</h2>
        <h3>总价:{{sumPrice}}</h3>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1,
            price:99
        },
        methods:{
            // totalPrice(){
            //     console.log("函数被调用")
            //     return this.price*this.num
            // }
        },
        computed:{
            sumPrice(){
                console.log("函数被调用")
                return this.price*this.num
            }
        }
    })
</script>

测试页面：

computed在被调用时当一个计算属性被重复引用，计算的函数只会调用一次并且将结果放入缓存中，节省了资源，提高了性能。

computed于methods的对比总结

相同点
- 使用方法都是先声明一个形如函数的结构，都可以使用return返回
不同点
- 语法结构:
  - 在页面中调用computed时直接使用函数名即可，并且必须使用return返回
  - 在页面中调用methods时需要在函数名后添加括号，return不是必要。
- 使用场景:
  - methods中的方法，当页面中数据发生变化时，会再次执行methods中的方法，所以一般页面中多次引用到同一个计算变量时，例如总价，如果调用methods中的方法，会造成重复计算变量，浪费性能。
  - computed中的数据一般都只需要计算一次，并且多次引用时不会重复计算，节省资源。
- 被调用
  - 在{{}}中调用methods方法需要添加()
  - 在{{}}中调用computed计算属性不需要使用()