Vue与Select2集成疑问：为何Select2值变更会同步this.value？

嘿，我来帮你把这个事儿掰明白～你疑惑的“修改Select2的value时this.value也跟着变”，大概率是这两种常见原因导致的，咱们一个个说：

1. Vue的v-model在偷偷做同步 #

如果你的代码里给Select2对应的原生<select>标签用了v-model="value"，那本质上Vue帮你做了两件事：

• 把this.value的值绑定到<select>的value属性上
• 自动监听<select>的change事件，一旦值变了就把新值同步回this.value

而Select2本质是基于原生<select>做的增强，它修改选中值的时候，其实是在更新原生<select>的value，这时候Vue的v-model监听到变化，自然就把this.value也改了。举个常见的代码例子：

<template>
  <select v-model="value" ref="select">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      value: '1'
    }
  },
  mounted() {
    $(this.$refs.select).select2();
  }
}
</script>

2. 手动写了事件同步逻辑 #

如果没用到v-model，那可能是你在初始化Select2的时候，手动绑定了它的选中事件，主动把值同步到了this.value里。比如类似这样的代码：

mounted() {
  $(this.$refs.select).select2()
    .on('select2:select', (e) => {
      // 这里主动把Select2选中的值赋值给this.value
      this.value = e.params.data.value;
    });
}

这种情况下，Select2一触发选中事件，你就手动更新了Vue的data属性，所以两者自然会同步变化。

如果你的预期是让Select2的value和this.value不绑定，那可以这么调整：

• 把v-model改成单向绑定:value="value"，同时去掉自动的事件监听，只在需要的时候手动同步
• 删掉Select2事件监听里同步this.value的代码，让两者各自独立

内容的提问来源于stack exchange，提问作者Shaci