vue3中watch的使用方法和注意事项

这里实例平时用到的几种监听
1、监听父组件传来的参数props
2、监听从父组件传来props里的某一个参数
3、监听data的数据
4、监听多个参数
5、深度监听

直接上代码

<template>
  <div class="component">
  </div>
</template>

<script>
// 引入 watch
import { defineComponent, reactive, toRefs, watch } from 'vue'
export default defineComponent({
  props: {
    checkedListData: {
      type: Array
    },
    wordData: {
      type: Array,
      default: () => ([])
    },
    type: {
      type: String,
      default: '分类'
    }
  },
  setup (props, context) {
    const data = reactive({
      tableData: []
    })

    // 监听父组件传来的参数
    watch(props, (val) => {
      // 监听从父组件接收的所有参数，只要有参数变化就会触发
      console.log('props接收的值', val)
    }, {
      deep: true
    })

    // 监听从父组件传来的某一个参数
    watch(() => props.type, (val) => {
      // 只监听父元素传来的type参数，type变化才会触发
      console.log('type', val)
    }, {
      deep: true
    })

    // 监听data的数据
    watch(() => data.tableData, val => {
      console.log('tableData的数据改变了')
    }, {
      deep: true, // 深度监听
      immediate: true
    })
  //监听多个参数
  watch([()=> data.tableData,()=> data.type],(newValue, old) => {
       console.log(1111,newValue[1],old[1])
     });
    return {
      ...toRefs(data)
    }
  }
})
</script>

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

补充如果在watch调用方法，就需要把watch写到该方法的下面，

const fn=()=>{}
watch()

注意，设置了 deep: true 表示是深度监听
注意，在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。