抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第十二课 计算属性-computed

计算属性的特性是:当计算属性依赖的内容发生变更时,才会重新执行计算。

编写基本页面和准备变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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:'baidu.com' ,
}
},
methods:{
handleItemClick(){
this.message = this.message=='baidu.com'?'百度':'baidu.com'
}
},
template:`
<h2> {{message}}</h2>
`
})
const vm=app.mount("#app")
</script>

</html>

有了基本的Vue基本结构后,先在data中声明两个变量,单价price和数量count。单价设置为10,数量设置为2个。data中的代码如下:

1
2
3
4
5
6
7
data(){
return{
message:'baidu.com' ,
price:10,
count:2
}
},

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

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

如果一切正常的话,这时候打开浏览器预览,可以看到页面上显示的是20
这种方法当然可以,但是显得不够优雅,也没有语义化。如果想进行语义化,可能想到的第一个办法就是写一个getTotal的方法。

1
2
3
4
5
6
methods:{
getTotal(){
return this.price * (this.count++);
}
},
template:` <h2> {{getTotal()}}</h2>`

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

methods方法无法满足的需求

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

1
2
3
4
5
methods:{
getTotal(){
return Date.now()
}
},

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

1
2
3
4
template:` 
<h2>{{message}}</h2>
<h2> {{getTotal()}}</h2>
`

这时候打开浏览器的控制台console,然后在里边通过手都的方式修改message的值vm.message='1111',比如修改为666。这时候问题产生了,你会发现getTotal( )方法被重新执行了。这就是这个问题的所在,这个问题其实可以用今天的主角coumputed计算属性来解决。

编写计算属性

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

1
2
3
4
5
computed:{
total(){
return Date.now()
}
},

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

1
2
3
4
template:` 
<h2>{{message}}</h2>
<h2> {{total}}</h2>
`

这时候到浏览器中,用手动的方法,修改message的值,total的值就不会进行改变了。
通过这个例子,你会对普通方法和计算属性的区别有所了解。这时候我们作一下总结:

  • 方法methods:只要页面重新渲染,就会重新执行方法
  • 计算属性computed: 当计算属性依赖的内容发生变更时,才会重新执行计算
    那我们再来看计算属性改变的例子。

    计算属性-computed实例

    我们还是用单价X数量=总和这个小例子,来说明具体计算属性的使用方法。修改当前代码,把计算属性中total( )方法内容修改。不同的是我们这次加入一个按钮,每点击一下按钮,就会让数量count加1。
    1
    2
    3
    4
    5
    computed:{
    total(){
    return this.price * this.count
    }
    },
    然后在模板中写一个按钮,每次点击按钮count数量进行增加。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    methods:{
    addCount(){
    this.count++
    }
    },
    template:`
    <h2>{{message}}</h2>
    <h2> {{total}}</h2>
    <button @click="addCount">再买一个</button>
    `
    这时候我们再到浏览器中查看效果,当点击按钮的时候,计算属性会帮助我们完成模板的自动更新。

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

评论