vue3的watch监听

不废话，直接上代码

点击此处有惊喜哦

vue3 的 watch 默认深度监听
reactive 替换了 vue2 的 data
props 为父组件传过来的值
emit 为调用父组件的 rollEnd 方法
newValue 更改后的值
oldValue 更改前的值
immediate 初次加载时是否监听

监听单个值 props.itemValue 时需要用回调

<template>
  <div></div>
</template>

<script>
import {defineComponent, reactive, watch} from 'vue'

export default defineComponent({
  name: "ScrollingNumbers",
  props: {
    itemValue: {
      type: Number,
      default: 66
    },
  },
  setup(props, { emit }){
    const state = reactive({
      test: 222,
    })
    watch(()=> props.itemValue, (newValue, oldValue) => {

    },{
      immediate: true, // 绑定时加载
    })
    // 如不需要单独监听某个值
    // watch(state, () => {
    //   console.log(state, '改变')
    // })
    return {
      state,
    }
  }
})
</script>

<style scoped>

</style>

defineComponent函数，只是对setup函数进行封装，返回options的对象；

export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options } : options
}

defineComponent最重要的是：在TypeScript下，给予了组件正确的参数类型推断 。

转载请附上原文出处链接。