:value="fn()" 和 @change="fn" 的触发时机

:value="fn()" 和 @change="fn" 的触发时机

:value="fn()"：渲染时立即执行（用于获取显示值）
@change="fn"：用户操作触发时执行（用于响应事件）

<div v-for="item in listArr" :key="item.id">
  <el-input
    :readonly="true"
    :value="handleSelectMonitorObj(item)"
    class="set-input-width320"
  >
    <template #append>
      <el-button class="selectType" text size="small" @click="handleSelectMonitorObj(item)">
        选择
      </el-button>
    </template>
  </el-input>
</div>

let listArr=  ref([
  {id:1, showPageText:[]}
])

function  handleSelectMonitorObj(params) {
  console.log('为啥这个初始化的时候会被执行', params)
}

handleSelectMonitorObj事件由于是通过:value="fn()"的形式绑定事件，会在渲染时就会触发。
v-bind（即 :）是响应式属性绑定。
Vue 在渲染视图（初始化）时。需要计算 value 的值来显示在输入框中。
因此，它会立即执行 handleSelectMonitorObj(item) 并获取其返回值来填充 value。
只要 listArr 发生变化，或者父组件重新渲染，这个函数都会被重新执行。

<el-radio-group v-model="radio" @change="radioTypeChange">
  <el-radio :value="3">Option A</el-radio>
  <el-radio :value="6">Option B</el-radio>
  <el-radio :value="9">Option C</el-radio>
</el-radio-group>

unction radioTypeChange(){
  console.log('这个初始化不会被执行')
}

因为 @change 是事件监听绑定。
它的作用仅仅是把 radioTypeChange 函数注册给 el-radio-group 组件的 change 事件。
事件的触发条件是：用户操作导致 v-model="radio" 绑定的值发生变化。
在组件初始化挂载时，只是绑定监听器，并没有触发 change 事件，所以它不会执行。