12. [基础]vue计算属性-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'
,比如修改为码云笔记
。
这时候问题产生了,你会发现getTotal( )
方法被重新执行了。这就是这个问题的所在,这个问题其实可以用今天的主角coumputed
计算属性来解决。
编写计算属性
还是获取当前的时间戳,但是写在了计算属性中。计算属性的关键字是computed
,然后里边可以写计算用的方法,这里我起名叫做total
,当然你可以起任何的名字。
computed:{ total(){ return Date.now() } },
然后我们把上面模板中的方法getTotal()
换成计算属性total
。模板的代码如下:
template:` <h2>{{message}}</h2> <h2> {{total}}</h2> `
这时候到浏览器中,用手动的方法,修改message
的值,total
的值就不会进行改变了。
vm.message='mybj'
通过这个例子,你会对普通方法和计算属性的区别有所了解,这时候我们作一下总结:
- 方法
methods
:只要页面重新渲染,就会重新执行方法 - 计算属性
computed
: 当计算属性依赖的内容发生变更时,才会重新执行计算
那我们再来看计算属性改变的例子。
计算属性 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> `
这时候我们再到浏览器中查看效果,当点击按钮的时候,计算属性会帮助我们完成模板的自动更新。
好了,我们总结一下,这节我们主要学习了 Vue 中的计算属性,重点在于理解计算属性和普通 methods 方法的区别,当你明白了两者的区别后,在工作中就可以清楚的知道什么时候该用计算属性,什么时候该用 vue 的方法了。
码云笔记 » 12. [基础]vue计算属性-computed