vue中computed和watch和data的区别和使用

 

1.data通常与v-model结合使用，是双向绑定的。

<input type=text v-model='title' />
data() {
    return {
      title: '我是标题',
    }
}

2.computed是计算属性，实际上和data对象里的数据属性是差不多的（使用上）

<template>费用为：{{calcCost}}</template>
computed: {

    calcCost() {//计算费用

      let cost= count*price*zhekou；

      return cost

    },

}

3.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)。

watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数，就需要用到 immediate 属性。

监听基础类型的数据。

watch: {

    isSubmit(newVal, oldval) {

      if(newVal){
          //当isSubmit值改变 doingsometing
          //如：当提交表单后，清空表单数据等
       }
    }

   
}

监听引用类型的数据：如对象、数组等

watch: {
  obj: {
    // 数据变化时执行的逻辑代码
    handler(newName, oldName) {
        console.log(‘obj.a changed’);
    },
    // 开启深度监听
    deep: true
  }
}

又可以单独监听对象的某个属性值：监听obj的age属性

'obj.age': {
    handler(newV, oldV) {
        console.log("watch", newV, oldV)
    },
    immediate: true
}