Vue 如何实现数据的双向绑定的

1. 简单说一下对 Vue 模板的理解

答：模版，字符串，有逻辑，可以嵌入 JS 变量。模版会被编译成 render 函数，执行 render 后返

回的是 vdom（vnode）

Vue 的 vdom 是借鉴了 snabbdom，在 updateComponent 中实现 vdom 的 patch，首次渲染是会执

行 updateCompoent，在 data 每次修改的时候，执行 updateComponent

2. Vue 如何实现数据的双向绑定的？

答：Vue 通过数据劫持（Object.defineProperty()）+ 订阅发布模式

监听器 Observer：用来劫持并通过 Object.defineProperty 监听所有属性（转变成 setter/getter

形式），如果属性发生变化，就通知订阅者。

订阅器 Dep：用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

订阅者 Watcher：监听器 Observer 和解析器 Compile 之间通信的桥梁；如果收到属性的变

化通知，就会执行相应的方法，从而更新视图。

解析器 Compile：可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。

主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己。

2、自身有一个 update()方法。

3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发解析器(Compile)中绑定的

回调。

总结：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各

个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

核心代码：

参数 obj 为当前的组件实例，key：val 为 data 对象里面的每一个键值对。

每来监听一个属性就创建一个属于当前属性的发布者对象。

获取到页面表单上的 v-model 属性，拿到属性值 val，为节点绑定 input 事件，同时把 data 中属性

为 val 的属性值赋值给当前的表单的 value，当前{{}}节点的时候，就创建一个观察者，在把这个观察

者添加到当前 val 属性的发布者上。

3. Vue，React 子父组件如何通讯？

答： 由于单项数据流的规范，Vue 和 react 都遵循通讯机制。

vue 和 react 都是使用 prop 传递数据给子组件，vue 需要提前在子组件中提前使用 props

声明，react 不用。

React 中子组件传递数据到父组件（状态提升），同样是通过父组件给子组件传递属性，区

别是属性值为一个函数函数引用（需要绑定函数的 this），然后在子组件中调用这个函数即可，传递相应的参数。

Vue 中子到父，是通过在使用子组件的时候绑定自定义事件，在子组件内部拿到事件名称，

再通过 this.$emit(‘事件名’)触发并传递参数。

其他方式：全局$bus，provide/inject，$refs/$parent/$children ，$attrs/$listeners ，

仓库，storage，url

1.x 还有 brodercast/dispatch 广播/派发已过时

5. Vue 和 React 的生命周期包含哪些？，并说出全部钩子函数与使用场景。

答：详见文档

6. 简述 Vue 和 React 的框架的特点以及区别

答： Vue（MVVM）和 react 都是组件化、数据驱动型的框架，现在基本都差不多了。

区别：

体积：vue 独立一个 30K ，react 160K

学习成本：vue 是面向模版编程易学，react 函数式编程，需要提前学习 ES6+。

效率：vue 初始化渲染是比较慢的，是因为 vue 要把所有的属性都使用

object.defineproperty 劫持，react 就不需要。但是在运行时，vue 要快一点，只有数据发生

变化就会执行 set，再通知指令去更新视图，而 react 需要执行 setState 函数，进行 diff 的

比较。 

还可以加一些自己的理解:

模板语法上，我更加倾向于 JSX，因为它更接近 js 语法（列如 vue 的循环用的是新指令 v-for,而 react 用的是

js 中的 map()函数）

模板分离上，我更加倾向于 vue（数据和视图分离的更彻底）

组件化上，我更加倾向于 React ，做的彻底

国内使用，首推 vue 。文档更易读、易学、社区够大 。如果团队水平较高，有 native 的需求，推荐使用 React 。