回顾Vue计算属性VS其他语法有感

重新回顾官方教程中的到计算属性和侦听器，发觉获益良多，主要就是两点：

官方文档用比较的方式说出了计算属性的优点和与其他语法的区别，我就只做一些总结和补充吧

计算属性VS模板变量

1. 计算属性本为了代替模板变量中的复杂表达式
2. 多个模板变量中使用时，计算属性更复用

计算属性VS方法

对于同一个功能，计算属性和方法得出的结果是一致，但是计算属性的优势是有缓存，只要相关依赖不改变，计算属性就可以快速在缓存中取值，不用执行函数。

计算属性VS侦听属性

1. 代码量上：当我们定义一个变量，它依赖于两个以上的数据时，计算属性在写法上就很有优势，代码会少很多重复；

2. 当函数中有异步操作和开销比较大时，选择侦听属性。官方只提供了正向例子，我提供一个反面例子吧：

   test-vue

   {{msg}}

   new Vue({
   el: '#app',
   data: {

   },
   computed: {
   msg: function() {
   //我们希望同通过异步获取数据返回给msg
   var params = new URLSearchParams();
   params.append('username', 'admin');
   params.append('password', '123456');
   axios({
   method: 'post',
   url: "{:U('getInfo')}",
   data: params
   })
   .then(function(response) {
   return 'computed1';
   })
   .catch(function(error) {
   });
   },
   },
   })

上面的结果msg:undefined，原因是计算属性中是同步的，不支持异步，所以当需要异步操作时，若为初始化你可以放在生命钩子函数的created进行，若需要重复变化的，请使用侦听属性watch

通过比较，我总结下各种语法的使用：

1.模板变量：

显示数据，可以是一些简单的表达式

2.方法：

• 作为事件方法
• 可重复使用的函数

3.侦听属性

• 异步操作时，应考虑使用
• 开销较大时，应使用侦听属性

4.计算属性

大部分情况下，应优先使用，优点是：

• 复用
• 缓存
• 简洁
• 官方推荐