计算属性 和 方法的区别

1.methods方法：

 

 

控制台打印：

 

 

 

当修改其中一个属性时，其他属性的值都没改变，但会发现methods里的方法都被执行

 

2.computed计算属性

 

 

控制台打印：

 

 

 

会发现当修改其中一个值的时候，只会执行于其相关的方法。

 

3.总结：
1).methods方法和computed计算属性，两种方式的最终结果确实是完全相同

2).不同的是计算属性是基于它们的响应式依赖进行缓存的。

    只在相关响应式依赖发生改变时它们才会重新求值，多次访问 getAge 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3).methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。

4).官网的一句话：对于任何复杂逻辑，你都应当使用计算属性。

原文链接：https://blog.csdn.net/weixin_38131507/article/details/104209086

 

以上意思是 页面如果是调用 方法retuen回数据的话，只要页面上有数据变化，页面上所有也是调用方法获取值的地方对应的方法区里面的方法都会执行一边

用计算属性就不会有这个问题

 

后记:

计算属性，如下面computed arr() 这个等于在 data里设置了arr的变量，在计算属性里面，当arr()里面调用的数据发生变化，就会重新赋值arr

export default {
  data(){
    return{
      // arr:[], ------下面的arr() 等于arr在这赋值
    }
  },
  created(){
    useaddRoute();
    //打印vuex存的数据
    console.log(this.$store.state.routerArr)
    // 打印出当前路由且赋值
    this.arr=this.$store.getters.updateNav
    console.log(this.$store.getters.updateNav)
  },
  computed: {
    arr() {
      return this.$store.getters.updateNav
    }
  },

可能会有警告，不警告的写法参考: https://blog.csdn.net/Cool_breeze_/article/details/115290154    动态路由也用到了 计算属性:    https://www.cnblogs.com/kaibindirver/p/16192723.html