vue教程-计算属性(computed)- 废弃

废弃 废弃

详见:https://www.malaoshi.top/show_1IX6lgNBvrSP.html

提出问题

实现下面功能,在一个输入框,输入出生年月日,就能计算出年龄,如下:

代码如下:

  1. <div id="app">
  2. 输入出生年份:<input type="text" v-model="birthday"><br>
  3. 年龄:<span>{{new Date().getFullYear()-birthday.slice(0,4)}}</span><!-- 可行,但是不推荐,代码过于复杂 -->
  4. </div>
  5. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  6. <script>
  7. var vm = new Vue({
  8. el: '#app',
  9. data:{
  10. birthday:''
  11. }
  12. })
  13. </script>

模板内的表达式非常便利,但是设计的初衷是用于 简单运算 ,不推荐复杂代码

官方有代码风格指南,见 链接

解决

当模板中的表达式复杂时,就推荐使用 计算属性

代码如下:

  1. <div id="app">
  2. 输入出生年份:<input type="text" v-model="birthday"><br>
  3. 年龄:<span>{{showAge}}</span>(表达式只写计算属性名,会自动调用 getter函数)<br>
  4. 年龄:<span>{{showAge}}</span><br>
  5. 年龄:<span>{{showAge}}</span><br>
  6. 年龄:<span>{{showAge}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次showAge()方法)
  7. </div>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  9. <script>
  10. var vm = new Vue({
  11. el: '#app',
  12. data:{
  13. birthday:''
  14. },
  15. computed:{//计算属性
  16. showAge:{//声明计算属性 showAge,并提供getter函数
  17. get:function(){
  18. console.log("showAge")
  19. return new Date().getFullYear() - this.birthday.slice(0,4)
  20. }
  21. }
  22. }
  23. })
  24. </script>

特点

  • 当属性值 birthday 改变时,才会触发执行 get() 函数
  • 计算属性会缓存结果,如:显示4个年龄,初始化时只执行1次 get() 函数。可以提高性能
  • 计算属性默认只有 getter,需要时你也可以提供一个 setter,见 官网

计算属性的简写

当计算属性只是用于 读取、显示,不需要 修改,可以使用下面简写形式:

  1. <div id="app">
  2. 输入出生年份:<input type="text" v-model="birthday"><br>
  3. 年龄:<span>{{showAge}}</span>(表达式只写计算属性名,会自动调用 getter函数)<br>
  4. 年龄:<span>{{showAge}}</span><br>
  5. 年龄:<span>{{showAge}}</span><br>
  6. 年龄:<span>{{showAge}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次showAge()方法)
  7. </div>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  9. <script>
  10. var vm = new Vue({
  11. el: '#app',
  12. data:{
  13. birthday:''
  14. },
  15. computed:{
  16. showAge:function(){ //简化写法:定义showAge属性,并提供getter函数
  17. console.log("showAge")
  18. return new Date().getFullYear() - this.birthday.slice(0,4)
  19. }
  20. }
  21. })
  22. </script>

原文出处:http://malaoshi.top/show_1IX2d3QeK0nU.html