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

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

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

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

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

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

计算属性VS模板变量

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

计算属性VS方法

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

计算属性VS侦听属性

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

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

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

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