彻底帮你搞明白vue计算属性computed和methods的区别

先来一段代码，我们分别声明一个methods方法newName()，computed新增一个计算属性newNames，然后分别在页面中调了各四次，我们来看一下打印结果：如下图

可以看到计算属性newNames只被执行了一次，这就是computed的好处，他是具有缓存性的，当计算第一次结果后会存入缓存，第二次调用该计算属性的时候，他会先读取需要返回的结果是否发生改变，如果没有就直接返回缓存的结果，如果改变了才会从新计算，而method就不会，直接执行了四次，所以处理效率上面不用多说，你明白了吗，合理的利用计算属性可以让代码变得更加简洁，程序更加流畅，你学废了吗，学废了记得点个赞哦！

HTML代码

      <div>{{newNames}}</div>
      <div>{{newNames}}</div>
      <div>{{newNames}}</div>
      <div>{{newNames}}</div>
      
      <div>{{newName()}}</div>
      <div>{{newName()}}</div>
      <div>{{newName()}}</div>
      <div>{{newName()}}</div>

JS代码

  data() {
    return {
      oldName: '野猪佩奇',
    }
  },
  
  computed: {
    newNames() {
      console.log('调用computed方法');
      return this.oldName;
    }
  },

  methods: {
    newName() {
      console.log('调用methods方法');
      return this.oldName;
    },
  }