VUE—数据响应原理真的是双向绑定吗？

很多朋友在理解 Vue 的时候都把 Vue 的数据响应原理理解为双向绑定，但实际上这是不准确的，我们之前提到的数据响应，都是通过数据的改变去驱动 DOM 视图的变化，而双向绑定除了数据驱动 DOM 外， DOM 的变化反过来影响数据，是一个双向关系，在 Vue 中，我们可以通过 v-model 来实现双向绑定。

在Vue中体现出双向绑定作用的方式有两种，在分析之前我们先介绍这两种使用方式有什么区别。

1）v-model 属性

2）.sync 修饰符

v-model

2.2.0+ 新增

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

ChildBox.vue

<template>
  <input type="checkbox"
         :checked="checked"
         @change="$emit('change', $event.target.checked)"/>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  }
}
</script>

Index.vue

<template>
  <div>
    <ChildBox v-mode