vue学记笔记(十三) Vue3.0之watch

watch

在 vue3.0 里面使用 watch 也必须引用

watch 也是一个函数他里面接收两个参数

• 第一个参数就是数组,监听要改变的值

里面分成两类 数据要是 refs 的就直接使用.如果是 reactive 包裹的,就必须要使用一个函数,里面返回值写 xxx.数据名称

• 第二个参数就是回调函数

里面有两个参数 第一个就是新的值 第二个就是老的值

特别注意的就是在 watch 里面要想获取到监听的值必须要加 value,否则只能获取个对象

<template>
  <div>
    <span>{{count}}</span>
    <span>{{double}}</span>
    <div @click="changecount">点击增加</div>
  </div>
</template>

<script>
  import { ref, computed, reactive, toRefs, onMounted, watch } from 'vue' //ref接收一个参数 返回一个响应式对象  //computed是一个函数接收一个参数是函数
  export default {
    setup() {
      onMounted(() => {
        console.log('挂在了')
      })
      const data = reactive({
        count: 0,
        double: computed(() => {
          return data.count * 2
        }),
        changecount: () => {
          data.count++
        },
      })
      let data2 = ref('哈哈')
      watch(
        [
          data2,
          () => {
            return data.count
          },
          () => {
            return data.double
          },
        ],
        (newval, oldval) => {
          console.log(newval)
          console.log(oldval)
          console.log(data2.value) //只能这样获取value
        }
      )
      const result = toRefs(data)
      return {
        ...result,
      }
    },
  }
</script>

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