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

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

计算属性和其他语法的比较
计算属性、侦听属性、方法、模板变量的使用

计算属性和其他语法的比较

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

计算属性VS模板变量

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

计算属性VS方法

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

计算属性VS侦听属性

代码量上：当我们定义一个变量，它依赖于两个以上的数据时，计算属性在写法上就很有优势，代码会少很多重复；
当函数中有异步操作和开销比较大时，选择侦听属性。官方只提供了正向例子，我提供一个反面例子吧：

<div id="app" class="center">

    <h1>test-vue</h1>

    <h2>{{msg}}</h2>

</div>

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.计算属性

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

复用
缓存
简洁
官方推荐

回顾Vue计算属性VS其他语法有感的相关教程结束。