watch的使用

watch:用于监听data里面的数据是否被修改

watch在监听的时候，可以有二次参数，第一次参数为更新的数据，第二个参数为之前的旧数据

data() {
    return {
        text: '旧数据',
    }
},
watch: {
   text: function (newData, oldData) {
     //newData是更新后的数据
     //oldData是旧数据
     console.log(newData, oldData)
   }
}

watch只会监听第一层，而对象的数据修改了，但对象它的首地址没有修改，所以watch判定它没有发生数据的变化，从而监听不到，所以我们要使用deep 开启深层监听

data(){
    return {
        text:{
            name:'张三',
            age:21
        },
    }
},
watch: {
     //当想要监听对象的时候，想要开启深度监听
     //deep:true
     text: {
       handler:function (val) {
           console.log(val)
      },
      deep:true
   }
}   

computed的使用

1.定义

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

<template>
  <div>
    {{ "今天天气是：" + weather + ",时间是：" + new Date().toISOString() }}
    <br />
    {{ dayInfo }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      weather: "晴天",
    };
  },
  computed: {
    dayInfo() {
      return (
        "今天天气是：" + this.weather + ",时间是：" + new Date().toISOString()
      );
    },
  },
}
</script>