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

这是一个组件 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到了

[quote=“gaoming13, post:1, topic:125932”]
<Comp1 v-model="form1Data.income" :format="[['rmb']]" />

试了一下你组件传的format的值是数组就会这样,是变量的话就不会,具体是为什么我也不清楚

嗯,我也很疑惑 :sweat_smile:

页面中一个input change后,页面中所有的 input 类型组件(不管是否是同一组件)都重新 render了

使用 .prop 修饰符可避免重复渲染:

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