12. [基础]vue计算属性

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196849.html

编写基本页面和准备变量
methods 方法无法满足的需求
编写计算属性
计算属性 computed 实例

这篇文章主要来学习一下 Vue3 中的计算属性computed。计算属性的特性是：当计算属性依赖的内容发生变更时，才会重新执行计算。我相信这时候你还不能很好的理解这句话的意思，所以需要通过实际的代码来进行演示。

编写基本页面和准备变量

我们新建一个Demo12.html，然后把Demo11.html的内容拷贝过来，然后进行精简，只留最基本的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo12-Vue 中的计算属性</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
        data(){
            return{
                message:'mybj123.com' , 
            }
        },
        methods:{
            handleItemClick(){
               this.message = this.message=='mybj123.com'?'':'mybj123.com'
            }
        },
        template:`
            <h2> {{message}}</h2>
        `
    }) 
    const vm=app.mount("#app")
</script>
</html>

有了基本的 Vue 基本结构后，我们先在 Data 中生命两个变量，单价(price)和数量（count），单价设置为 10，数量设置为 2 个。data 中的代码如下：

data(){
    return{
        message:'mybj123.com' , 
        price:10,
        count:2
    }
},

然后我们在模板template中打印出两个变量的综合price * count。

template:` <h2> {{price * count}}</h2>`

如果一切正常的话，这时候打开浏览器预览，你应该可以看到页面上显示的是20。

这种方法当然可以，但是显得不够优雅，也没有语义化。如果你想进行语义化，你可能想到的第一个办法就是写一个getTotal的方法。

methods:{
    getTotal(){
        return this.price * this.count
    }
},
template:` <h2> {{getTotal()}}</h2>`

这时候你再次查看浏览器，依然可以得到同样的结果。也许你还看不出来什么问题，但此时他确实存在一些问题，问题就是只要页面中有一个值重新渲染了，他都会重新执行。

methods 方法无法满足的需求

如何看出这个问题呢？我们可以稍微修改一下代码，让每次得到的值都不同。这时候可以使用获得时间戳的方法，来获得当前的时间戳。

methods:{
    getTotal(){
        return Date.now()
    }
},

我们同时在模板中，打印出message的值，代码如下：

template:` 
    <h2>{{message}}</h2>
    <h2> {{getTotal()}}</h2>
`

这时候打开浏览器的控制台console，然后在里边通过手动的方式修改message的值vm.message='1111'，比如修改为。

12. [基础]vue计算属性 1

好了，我们总结一下，这节我们主要学习了 Vue 中的计算属性，重点在于理解计算属性和普通 methods 方法的区别，当你明白了两者的区别后，在工作中就可以清楚的知道什么时候该用计算属性，什么时候该用 vue 的方法了。

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/