一、methods(方法调用) 和 计算属性区别

1. methods

没有缓存，页面多次调用这个函数就会运行多少次，性能消耗大(计算结果一般不用方法调用)。

2. 计算属性

有缓存，页面多次调用这个属性，只会执行一次，只有它依赖的数据发生变化才会重新计算，有一定的惰性，性能高。注：必须用 return 返回结果

区别

 <div v-for="item in produc" :key="item.id" class="produc">
<!-- key的作用：标识，数据发生变化时会根据【新数据】和【新的虚拟DOM】进行虚拟DOM算法，vue内部使用提高效率，注意：如果不写key，vue会自动将index作为唯一标识-->
  <span>价格{{ item.price }}</span>
  <span>数量{{ item.num }}</span>
  <span>总价{{ toprice(item.price, item.num) }}</span>//methods 里写的
  <span>总价{{ toprices }}</span>//计算属性
</div>
computed: {
   toprices() {
      //计算属性会有缓存 所有的价格都是 40
      for(let key of this.produc){
          return key.price * key.num
      }
    },
},
methods: {
    toprice(p, n) {
      return p * n;
    },
},

二、计算属性和watch区别

计算属性能完成的操作，watch 一定能完成，但watch能完成的操作，计算属性不一定能完成（比如：异步）

1、watch

不支持缓存，监听到数据直接触发、支持异步和开销较大的操作

语法：

watch: {
   
    weather: {
      immediate:true//组件加载时立即触发
      deep: true,//深度监听
      //weather发生改变时调用handler
      handler(newvalue, oldvalue) {
        if (newvalue === true) {
          console.log(123456);
        }
        console.log(newvalue, oldvalue);//根据变化前后的值做操作
      },
    },
}