Vue中使用watch侦听器来监听数据变化的4种使用情况

知识铺垫：
计算属性：computed — 数据的二次加工，降低数据的逻辑的复杂程度

作用：当模板当中使用较复杂的js表达式进行数据的转换，会造成你的模板逻辑过于复杂，不好维护，
所以用计算属性来进行转换，返回一个新的数据，便与你对数据内容进行维护

特点：在函数中也可以处理逻辑，也可以返回值，同时在模板中也可以通过调用来获得二次加工的数据

优点：计算属性有缓存，如果数据没变化，再次使用不会重新执行

场景：当你需要进行复杂逻辑的处理才需要进行计算属性的处理

---

侦听器：watch 作用：监听某个数据的变化

使用场景：当你在数据变化时，进行异步操作或开销较大的操作时，就需要使用监听器

如果你想监听某个数据是否进行变化时都可以使用监听器

---

测试代码

<template>
    <div>
        <h1> <el-button @click="count++" /> {
     {
     count}}</h1>
    </div>
</template>
<script>
export default {
     
  name: 'homePage',
  data () {
     
    return {
     
      count: 0
    }
  },
  watch: {
     
    count () {
     
      console.log('count变了')
    }
  }
}

也可以查看变化前和变化后的数据

情况1--简单数据：data当中的第一层数据

 watch: {
     
     //第一个参数是改变后的数据，第二个参数是改变前的数据
    css (newValue, oldValue) {
     
      console.log('css变了')
      console.log(newValue)
      console.log(oldValue)
    }
  }

情况2--复杂数据：data当中得第二层数据

data(){
     
    user:{
     
        age:10,
        name:'xxx'
    }
}
watch：{
     
    'user.name' () {
     
      console.log('user变了')
    }
}

情况3 -- 监听复杂数据类型 监听对象--数据 开启深度监听

watch（）{
     
     user：{
     
         handler:{
     
             console.log('user变了'])
         }，
         deep:true
     }
 }

情况4--监听器初始化触发

watch：{
     
    count：{
     
        handler：{
     
            console.log('初始化监听器')
        }，
        immediate:true
    }
}