Vue中的watch的用法及与computed的区别

vue中watch的用法

其实watch它是对data中的数据监听回调，当data中的数据发生变化的时候。监听就会被回调函数中传入两个参数一个newVal另一个为oldVal。

watch的使用场景：当data中的某个数据发生变化时，我们需要做一些异步操作以及开销较大的操作。我们就可以是用watch进行监听。

watch监听基本数据：：

<template>
  <div class="contain-wrap">
      <p>个人信息情况: {{ basicMsg }}</p>
      <p>今年的年龄: <input type="text" v-model="age" /></p>
  </div>
</template>
<script>
  export default {
    name: "about",
    components:{},
    data() {
      return {
          basicMsg: '',
          age:"18",
          single: '单身'
      }
    },
    watch:{
      age:{
        handler(newValue,oldValue) {
           console.log("我是新值",newValue)
            console.log("我是旧值",oldValue)
            this.basicMsg = '今年' + newValue + '岁' + ' ' +this.single;
          }
      }
    },
    created() {},
    methods:{},
    mounted(){},
  }
</script>
<style scoped lang="scss">
</style>

现在是监听data中一个基本的数据，当我们在输入框中输入数据，那么就监听这个回调就会被触发。现在有个需求我们想要在页面首次加载的时候让它进行触发一次。我们可以在这个回调函数中添加一个immediate: true属性，就可以第一次加载的时候触发回调。

深度监听data中的数据：
需要在watch回调中设置deep属性，表示是否深度监听某个对象的值

<template>
  <div class="contain-wrap">
       <p>个人信息情况: {{ basicMsg }}</p>
    <p>今年的年龄: <input type="text" v-model="obj.chidren.age" /></p>
  </div>
</template>

<script>
  export default {
    name: "about",
    components:{},
    data() {
      return {
        obj:{
        basicMsg: '',
        chidren:{
          age:"18"
        },
        single: '单身'
        },
      }
    },
  
    watch:{
 'obj.chidren': {
          handler(newVal, oldVal) {
            this.basicMsg = '今年' + newVal.age + '岁' + ' ' + this.obj.single;
          },
          immediate: true,
          deep: true // 需要添加deep为true即可对obj进行深度监听
        }
    },
    created() {},
    methods:{},
    mounted(){},
  }
</script>

<style scoped lang="scss">
</style>

现在就为对象obj中的age属性进行监听，当age属性发生变化的时候就会进行触发。这也同样适用于数组

watch 和 computed的区别是：

相同点：他们两者都是观察页面数据变化的。

不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。