526互联

值类型的侦听器watch不触发 immediate: true

发布时间 2023-07-21 12:13:44作者: 法子

现象：一个组件的变量有初始值，然后，如果在引用该变量的页面onLoad中为组件的变量赋不同的新值，不触发对该变量的watch回调

原因：onLoad的时候，组件还没有初始化完成，修改其变量的值相当于给它一个初始化的值，所以不会触发watch的回调。

解决：watch 里应该加上immediate: true，以便在创建侦听器时，立即执行一遍回调。

组件radios中

export default {
  props: {
    current: {
      type: [String, Number],
      default: '0',
    },
  },
  data () {
    return {
      selectIndex: 0
    }
  },
  watch: {
    current: {
      handler (val) {
        this.selectIndex = val
      },
      immediate: true
    }
  }
}

引用组件的页面

<template>
    <view>
        <Radios :current="radioIndex"/>
    </view>
</template>
<script>
import Radios from './radios';
export default {
    components: {
        Radios
    },
    data () {
        return {
            radioIndex: 0
        }
    },
    onLoad (options) {
        this.radioIndex = 1
    }
}
</script>