Vuejs学习笔记-9.使用计算属性
Posted invoker2021
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuejs学习笔记-9.使用计算属性相关的知识，希望对你有一定的参考价值。
Vue对象中的一个选项，计算属性, computed
该属性和一般方法的区别在于，计算属性是属性，html中各个地方调用计算属性中的方法都是调用存储在内存中计算属性的方法。方法是方法，html中各个地方调用方法中的方法，则需要重新调用方法的次数。
上代码,
知识点1：以下代码中 getFullname()是方法，fullname是属性。属性调用不需要使用括号，方法调用需要使用括号。
知识点2：在Html中调用多个地方调用getFullname()方法，则需要多次使用方法，而html中多个地方调用计算属性，在控制台中检查，其实值调用了一次，其他调用时使用的是内存中的存储，节省了性能。
知识点3：计算属性其实是vue的getter方法，setter方法演变。
代码如下：
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-计算属性的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 23:15 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-计算属性的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <h2>{{name + \' \' + nick}}</h2> 21 <!-- 拼接展示太麻烦，可以使用函数进行包装--> 22 <h2>{{getFullname()}}</h2> 23 <h2>{{getFullname()}}</h2> 24 <h2>{{getFullname()}}</h2> 25 <h2>{{getFullname()}}</h2> 26 <!-- 使用函数包装但无法解决性能问题，每次调用都要再次调用getFullname()方法，而使用计算属性，可以将属性存在缓存中，无需多次调动，--> 27 <h2>{{fullname}}</h2> 28 <h2>{{fullname}}</h2> 29 <h2>{{fullname}}</h2> 30 <h2>{{fullname}}</h2> 31 <h2>{{fullname}}</h2> 32 </div> 33 <script src="../js/vue.js"></script> 34 <script> 35 const app = new Vue({ 36 el: \'#app\', 37 data: { 38 message: \'hello\', 39 name: \'invoker\', 40 nick: \'kaer\' 41 }, 42 // 使用计算属性,在console控制台中查看，computed只会调用一次 43 computed:{ 44 fullname() { 45 console.log(\'调用计算属性\'); 46 return this.name + \' \' + this.nick 47 } 48 }, 49 methods: { 50 getFullname() { 51 console.log(\'调用方法\'); 52 return this.name + \' \' + this.nick 53 } 54 } 55 }) 56 </script> 57 </body> 58 </html>
以上是关于Vuejs学习笔记-9.使用计算属性的主要内容，如果未能解决你的问题，请参考以下文章