[vue3快速入门] 11.侦听器

vue提供了一个侦听数据变化的功能，watch，可以理解为一直观察着某一个数据，这个数据如果一变化，就会调用相应的方法，
据一个列子，我们有个msg，初始化为“页面初始化”，等mounted以后，把它改为“页面加载完成”

<template>
  <div>{{ msg }}</div>
</template>

<script>
// 侦听器
export default {
  name: 'App',
  data() {
    return {
      msg: '页面初始化',
    }
  },
  mounted() {
    setTimeout(() => {
      this.msg = '页面加载完成'
    }, 1000)
  },
}
</script>

<style></style>

下面我们就用watch来侦听这个变化，watch和computed类似，也是一个对象，里面写方法，不同的是，watch的方法名必须和要侦听的值一致，我们这里要侦听msg，所以方法名叫做msg

  watch: {
    msg() {
      console.log('msg的值改变了')
    },
  },

页面加载完1秒后，打开控制台，我们发现控制台输出了“msg的值改变了”，说明msg方法已经被调用了

在侦听时，回调函数还可以加两个参数，第一个参数侦听的这个值，改变以后的值，第二个是改变之前的

  watch: {
    msg(newVal, oldVal) {
      console.log('msg的值改变了')
      console.log('msg改变以后的值是：' + newVal)
      console.log('msg改变之前的值是：' + oldVal)
    },
  },

我们可以看到控制台输出了

msg的值改变了
改变以后的值是：页面加载完成
改变之前的值是：页面初始化

完整代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
// 侦听器
export default {
  name: 'App',
  data() {
    return {
      msg: '页面初始化',
    }
  },
  watch: {
    msg(newVal, oldVal) {
      console.log('msg的值改变了')
      console.log('msg改变以后的值是：' + newVal)
      console.log('msg改变之前的值是：' + oldVal)
    },
  },
  mounted() {
    setTimeout(() => {
      this.msg = '页面加载完成'
    }, 1000)
  },
}
</script>

<style></style>

关于watch的内容就先讲这么多，
大家可以思考一个问题，watch是不是能代替computed实现一些功能，用哪种方式更好？