vue2与vue3双向数据绑定的区别说明

前言

Vue是一款流行的前端框架，最新版本分别为vue2和vue3。其中数据的双向绑定是Vue的一大特色，Vue2和Vue3在双向绑定方面有明显的区别。本文将对Vue2和Vue3双向绑定的区别进行详解，并且提供两条示例说明。

Vue2的双向绑定

在Vue2中，实现双向绑定主要是通过v-model指令来实现的。在一个表单元素（比如<input>、<select>、<textarea>等）上使用v-model指令，可以让该表单元素的值与Vue实例的数据属性进行双向绑定。例如：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

在上述示例中，<input>元素上的v-model指令会将使用者输入的内容通过双向绑定机制同步到Vue实例的message属性中。<p>元素上也使用了双花括号语法（{{message}}），用来展示实时的输入结果。

Vue3的双向绑定

在Vue3中，双向绑定的实现方式与Vue2有所不同。Vue3使用了新的Composition API，其中提供了provide/inject和watchEffect两个方法来实现双向绑定。例如：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue!'
    })

    watchEffect(() => {
      state.message = state.message.trim()
    })

    return {
      message: state.message
    }
  }
}
</script>

在上述示例中，我们使用了新的reactive函数来创建响应式对象，将需要双向绑定的数据储存在其中。在watchEffect内部，我们可以监听该对象的变化，并对数据属性做出相应的响应式操作，以实现双向绑定。最后，我们将需要暴露在外的数据属性通过setup函数进行返回，以便在模板中使用。

示例说明

示例一：实现双向计数器

在这个示例中，我们实现一个简单的双向计数器，通过按钮来增加和减少计数器的值。在Vue2中，代码如下：

<template>
  <div>
    <button @click="counter--">-</button>
    <input v-model="counter" type="number" />
    <button @click="counter++">+</button>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>

在Vue3中，则需要使用reactive函数和watchEffect方法来实现上述示例：

<template>
  <div>
    <button @click="state.counter--">-</button>
    <input v-model="state.counter" type="number" />
    <button @click="state.counter++">+</button>
    <p>{{ state.counter }}</p>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      counter: 0
    })

    watchEffect(() => {
      state.counter = Number(state.counter)
    })

    return {
      state
    }
  }
}
</script>

在Vue3的版本中，需要将计数器的初始化和监听都放到setup函数中进行。通过reactive函数创建响应式的计数器对象，并在watchEffect函数中通过转换函数将计数器的值转换成数字类型。

示例二：实现双向选择框

在这个示例中，我们实现一个双向选择框，在选择框中选项改变时，选择框的值也会同步改变。在Vue2中，代码如下：

<template>
  <div>
    <select v-model="selected">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'option1'
    }
  }
}
</script>

在Vue3中，则需要使用reactive函数和watchEffect方法来实现上述示例：

<template>
  <div>
    <select v-model="state.selected">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <p>{{ state.selected }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      selected: 'option1'
    })

    return {
      state
    }
  }
}
</script>

在Vue3的版本中，可以使用reactive函数创建响应式的对象，该对象中包含了选择框的选项，将state.selected数据绑定到<select>的v-model上，并在模板中通过取值得到当前选中的选项。