[基本]vue计算属性-创建computed基本页面和创建计算属性computed实例，这些实例在准备变量methods方法时不令人满意
在本文中，您将主要学习Vue3的计算属性computed。
计算属性的特性如下：
仅当计算属性依赖的内容发生更改时，才会重新执行计算。
这个时候，我相信你还不能很好地理解这句话的意思，所以需要用实际的代码进行演示。
创建基本页面和准备变量！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' title demo 12-vue的计算属性/titlescriptsrc=' https://un pkg.com/vue @ next '/script/headbodydivid {return ) message3360'willem.com '，}，methods3360 ) handleitemclleitemclleapp ' Willem笔记' :'willem.com' } }
data的代码如下。
data () return ) message:'willem.com '，price:10，count:2 }}然后在模板template中打印两个变量的统一price * count
如果template 3360 ` H2 { { price * count } }/H2 `全部正常，则此时打开浏览器预览时，您应该会看到页面上显示20。
这个方法当然很好，但不优雅，也没有语义化。
如果你想进行语义化，第一个方法可能是写getTotal的方法。
methods 3360 { get total (} { return this.price * this.count }，template3360`H2 ) { get total } }/H2 )此时，再次查看浏览器问题是，当页面上重新呈现值时，他会重新运行。
用methods方法无法满足的需求如何看穿这个问题呢？
可以稍微修改代码，使每次得到的值不同。
此时，可以使用获取时间戳的方法来获取当前时间戳。
methods : { get total (} { return date.now ) }在模板中打印消息的值。 代码如下。
template 3360 ` H2 { { message }/H2 H2 { { get total }/H2 }此时打开浏览器的控制台，其中手动输入消息的值vm.message='1111
这时，发生了问题。 可以看到getTotal () )方法已重新执行。
这就是这个问题的所在，这个问题其实可以用今天的主角coumputed计算属性来解决。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width，initi a
m/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'
通过这个例子，你会对普通方法和计算属性的区别有所了解，这时候我们作一下总结：
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>`这时候我们再到浏览器中查看效果，当点击按钮的时候，计算属性会帮助我们完成模板的自动更新。
好了，我们总结一下，这节我们主要学习了Vue中的计算属性，重点在于理解计算属性和普通methods方法的区别，yedxf明白了两者的区别后，在工作中就可以清楚的知道什么时候该用计算属性，什么时候该用vue的方法了。