V-model 透明包裹器，watch 组件其它属性的疑惑

• Z时代
• 2024-03-10
• 分类：IT

这是一个组件 Comp1

<template>
  <input v-model="valueNow" @change="handleChange" />
</template>
<script>
export default {
  props: {
    value: {},
    format: {},
  },
  data() {
    return {
      valueNow: '',
    }
  },
  watch: {
    value(val) {
      this.valueNow = this.value
    },
    format(val) {
      console.log(JSON.stringify(val))
    },
  },
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

页面使用组件

<Comp1 v-model="form1Data.income" :format="[['rmb']]" />
<Comp1 v-model="form1Data.stockRatio" :format="[['percent']]" />

然后，随便修改一个 input 的值
发现 console 打印如下：

[["rmb"]]
["percent"]]

好疑惑，明明只修改了一个 value，format 竟被watch到了，而且页面中的2个组件都watch到了

回答：

const a = [['rmb']]
const b = [['rmb']]
a === b
// false

value变化后触发页面render，此时传给Comp1的format会是一个新数组

以上是 V-model 透明包裹器，watch 组件其它属性的疑惑 的全部内容， 来源链接： utcz.com/p/936882.html