computed 和watch 区别

computed 和watch的区别:  computed 不能直接监听值  和 watch能直接监听值 !!!

1）computed依赖缓存，data不变则不会重新计算，性能优化的一种形式

2）watch 如何深度监听deep :true, 引用类型深度监听拿不到旧的值,默认是浅监听

<p>num的值：{{num}}</p>
    <p>double1的值： {{double1}}</p>
<input type="text" v-model="double2">

<input type="text" v-model="name">
<input type="text" v-model="info.city">

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      message: '恭喜你，这是一条<b>成功</b>消息',
      num: 20,
      name: 'liu_man', 
      info: {
        city: '重庆'
      }
    }
  },
  // computed默认只有get 方法,如果要双向绑定需重写set方法
  computed: {
    double1() {
      return this.num * 2
    },
    double2: {
      set() {
        console.log('set');
        return this.num * 2
      },
      get() {
        return this.num / 2
      }
    }
  },
  watch: {
    name(val,oldval) {
      console.log(val, oldval); // 监听值类型，可以拿到旧的值
    },
    info: {
      handler(val, oldval) {
        console.log('已触发watch info');
        console.log(val, oldval); // 监听引用类型，不能拿到旧的值，因为引用类型存放在堆中，指向同一个内存地址
      },
      deep: true // 深度监听
    }
  }
}
</script>

通过computed传参的情况

<template>
  <div>{{amount(2.213)}}</div>
</template>
<script>
export default {
  data() {
    return {
      price: 1000
    };
  },
  computed: {
    amount() {
      return (n) => {
        return Number(n).toFixed(2)
      }
    }
  }
};
</script>