vue中computed、watch、methods的区别

watch

1、通过watch监听a数据的变化，数据发生变化，就会打印当前的值

 html
   <input type="text" v-model="a" />
 js
 data(){
    return {
      a:1,
      b:2,
      c:{
        d:4
      }

    }
  },
  watch:{
    a(val,oldVal){
      console.log(`new:${val},old:${oldVal}`);  
    },
  }

}

2、通过watch监听b数据的变化，数据发生变化时，就调用对应的方法（项目中通常用于通过监听数据数据变化，达到视图更新的一个功能）

<template>
  <div>
      <input type="text" v-model="b" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      a:1,
      b:2,
      c:{
        d:4
      }

    }
  },
watch:{
    b:"handler"
}
metods:{
handler(){
    //字符串名称
    handler(){
    console.log('相应的视图逻辑')   //相应的视图逻辑
}


    }
}

3、侦听单个嵌套属性

'c.d':function(val,oldVal){
    console.log(`val:${val},oldVal:${oldVal}`)  
}

4、该回调将会在侦听开始之后立即调用

e:{
handler(val,oldVal){
    console.log('e changed')
}
    immediate:true
}

computed

html:{{fullName}}
js:
data(){
return {
    firstName:'',
    lastName:''

    }
}
computed:{
    fullName:function(){
        return this.firstName + ','+this.lastName

    }
}

computed、methods、computed区别：

computed计算属性计算结果有缓存性，只有依赖的数据发生变化时，才会重新计算

computed中的函数必须要用return返回

computed异步操作时，无法监听数据的变化

methods 只要调用就会执行该函数

watch没有缓存性，数据发生变化或触发重新渲染时，直接会触发相应的回调

watch中的函数不是必须要return返回

watch支持异步