12 计算属性computed: 当计算属性依赖的内容发生变更时，才会重新执行计算

骑猪看日落 2023-10-06 20:24 10阅读 0赞

#### \[基础\]vue计算属性-computed ####

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

这篇文章主要来学习一下Vue3中的计算属性`computed`。

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

## 编写基本页面和准备变量 ##

<!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:'willem.com' , 
                }
            },
            methods:{
          
                handleItemClick(){
          
                   this.message = this.message=='willem.com'?'willem笔记':'willem.com'
                }
            },
            template:`<h2> {
           {message}}</h2>`
        }) 
        const vm=app.mount("#app")
    </script>
    </html>

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

data中的代码如下：

data(){
        return{
            message:'willem.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'`，比如修改为码云笔记。

![在这里插入图片描述][6e79fe44104e4120971561ce3287807f.gif_pic_center]  
这时候问题产生了，你会发现 `getTotal( )` 方法被重新执行了。  
这就是这个问题的所在，这个问题其实可以用今天的主角`coumputed`计算属性来解决。

<!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:'willem.com',
                    price:10,
                    count:2
                }
            },
            methods:{
          
                getTotal(){
          
                    return Date.now()
                }
            },
            template:`<h2>{
           {message}}</h2><h2> {
           {getTotal()}}</h2>`
        });
        const vm=app.mount("#app");
    </script>
    </html>

## 编写计算属性 ##

还是获取当前的时间戳，但是写在了计算属性中。计算属性的关键字是`computed`，然后里边可以写计算用的方法，这里我起名叫做`total`，当然你可以起任何的名字。

computed:{
        total(){
            return Date.now()
        }
    },

然后我们把上面模板中的方法 `getTotal()` 换成计算属性 `total`。模板的代码如下：

template:`<h2>{
       {message}}</h2><h2> {
       {total}}</h2>`

这时候到浏览器中，用手动的方法，修改 `message` 的值，`total` 的值就不会进行改变了。

vm.message='mybj'

![在这里插入图片描述][f5b3150c3c4c4ebbb786deeb77ead388.gif_pic_center]  
通过这个例子，你会对普通方法和计算属性的区别有所了解，这时候我们作一下总结：

1、方法`methods`：只要页面重新渲染，就会重新执行方法  
2、计算属性`computed`: 当计算属性依赖的内容发生变更时，才会重新执行计算

那我们再来看计算属性改变的例子。

<!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:'willem.com',
                    price:10,
                    count:2
                }
            },
            computed:{
          
                total(){
          
                    return Date.now()
                }
            },
            template:`<h2>{
           {message}}</h2><h2> {
           {total}}</h2>`
        });
        const vm=app.mount("#app");
    </script>
    </html>

## 计算属性computed实例 ##

我们还是用单价 `X`数量=总和这个小例子，来说明具体计算属性的使用方法。修改当前代码，把计算属性中 `total()` 方法内容修改。不同的是我们这次加入一个按钮，每点击一下按钮，就会让数量`count`加1。

我们先来修改计算属性中的内容。

computed:{
        total(){
            return this.price * this.count
        }
    },

然后在模板中写一个按钮，每次点击按钮 `count` 数量进行增加。

methods:{
        addCount(){
            this.count++
        }
    },
    template:` 
        <h2>{
       {message}}</h2>
        <h2> {
       {total}}</h2>
        <button @click="addCount">再买一个</button>
    `

这时候我们再到浏览器中查看效果，当点击按钮的时候，计算属性会帮助我们完成模板的自动更新。

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

<!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:'willem.com',
                    price:10,
                    count:2
                }
            },
            methods:{
          
                addCount(){
          
                    this.count++
                }
            },
            computed:{
          
                total(){
          
                    return this.price * this.count
                }
            },
            template:` 
                <h2>{
           {message}}</h2>
                <h2> {
           {total}}</h2>
                <button @click="addCount">再买一个</button>
            `
        });
        const vm=app.mount("#app");
    </script>
    </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:'willem.com',
                    price:10,
                    total:0
                }
            },
            methods:{
          
                addCount(){
          
                    this.total++
                }
            },
            template:` 
                <h2>{
           {message}}</h2>
                <h2> {
           {total}}</h2>
                <button @click="addCount">再买一个</button>
            `
        });
        const vm=app.mount("#app");
    </script>
    </html>

[6e79fe44104e4120971561ce3287807f.gif_pic_center]: https://img-blog.csdnimg.cn/6e79fe44104e4120971561ce3287807f.gif#pic_center
[f5b3150c3c4c4ebbb786deeb77ead388.gif_pic_center]: https://img-blog.csdnimg.cn/f5b3150c3c4c4ebbb786deeb77ead388.gif#pic_center
[0515e6dcb34a41a4959c69c7507cbb8a.gif_pic_center]: https://img-blog.csdnimg.cn/0515e6dcb34a41a4959c69c7507cbb8a.gif#pic_center