说在前面的
通过本文，你能了解到什么？
- vue 响应式实现原理
- vue 双向数据绑定实现原理
- 如何实现一个简易的 mvvm 框架
vue 响应式的基本特征
打开 vue 官网，通过首页下 vue 介绍视频，我们可以了解到：
- vue 是一款友好的、多用途且高性能的 JavaScript 框架，它能帮你创建可维护性和可测试性更强的代码库；
- vue 是一款渐进式的 JavaScript 框架：假如你已经有了一个现成的服务端应用，你可以将 vue 作为该应用的一部分嵌入其中，如果你希望将更多的业务逻辑放到前端来实现，vue 的核心库及其生态系统也能满足你的需求；
- vue 允许你将页面划分成一个个可服用的组件，每个组件都包含自己的 html, css 以及 JavaScript 代码。
接下来我们一起来看看 vue 的基本特征。
首先来创建一个 vue 应用：
<div id="app">
{{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
msg: "Hello Vue!"
}
});
</script>
效果如下：
可以看到，我们输入的模板字符串 {{ msg }} 已经被替换成了 data 下的 msg 变量对应的值，接下来是 vue 有意思的一点：
随着我们在控制台修改 msg 的值，页面上显示的值也发生了变化，说明 vue 是响应式的：当数据发生改变的时候，会自动更改页面中应用到该数据的地方。
当然，通过控制台改变有点过于笨重，所以我们可以通过 v-model 来绑定一个 input 框：
<div id="app">
<p>{{ msg }}</p>
<input v-model="msg" />
</div>
效果如下：
这就是 vue 的双向数据绑定了。关于双向数据绑定，在之前写的 通过 Proxy 了解 v-model 原理 有过简单的介绍，感兴趣的朋友可以看看。
总结一下，vue 响应式基本特征如下：
- 能够将 html 代码中的模板字符串替换成 data 中对应变量的值
- 当变量发生改变的时候，所有使用到该变量的位置都应该发生改变
- 通过 v-model 绑定 input 等能够输入的标签，可以更改变量的值，同时也会使页面中使用该变量的位置发生改变
