原文：你应当要知道的Vue.js

组件data为何必需是函数？

由于组件能够被多处运用，但他们的data是私有的，所以每一个组件都要return一个新的data对象

组件通讯

• 父子组件通讯：$on、$emit
• 非父子组件的通讯: event bus
• 复杂情况： vuex

怎样动态增加组件

场景：在vue中，点击button，随机天生a、b、c组件中的一个

• is
• render

思绪：设定一个components数组，button点击一次，push一个组件名，v-for遍历components，并用is或render动态天生

vue-loader是什么？

vue-loader 是一个 webpack 的 loader，能够将单文件组件转换为 JavaScript 模块

援用文档的说法：

• 默许支撑 ES2015；
• 许可对 Vue 组件的组成部分运用别的 webpack loader，比如对 <style> 运用 Sass 和对 <template> 运用 Jade；
• .vue 文件中许可自定义节点，然后运用自定义的 loader 举行处置惩罚；
• 把 <style> 和 <template> 中的静态资本看成模块来看待，并运用 webpack loader 举行处置惩罚；
• 对每一个组件模拟出 CSS 作用域；
• 支撑开辟期组件的热重载。

数据双向绑定道理

完成数据绑定的罕见做法：

• Object.defineProperty：挟制各个属性的setter，getter
• 脏值检测：经由过程特定事宜举行轮循
• 宣布/定阅形式：经由过程音讯宣布并将音讯举行定阅

vue采纳的是数据挟制连系宣布者-定阅者形式的体式格局，经由过程Object.defineProperty()来完成对属性的挟制，并在数据更改时宣布音讯给定阅者，使其触发响应的监听回调。

具体步骤：

1、 完成Observer

将须要observe的数据对象举行递归遍历，包含子属性对象的属性，都加上setter和getter。完成一个音讯定阅器，保护一个数组，用来网络定阅者，数据更改触发notify，再挪用定阅者的update要领

2、 完成Compile

compile理会模板指令，将模板中的变量替换成数据，然后初始化衬着页面视图，并将每一个指令对应的节点绑定更新函数，增加监听数据的定阅者，一旦数据有更改，收到关照，更新视图

3、 完成Watcher

Watcher定阅者是Observer和Compile之间通讯的桥梁

主要做的事变是:

• 在本身实例化时往属性定阅器(dep)内里增加本身
• 本身必需有一个update()要领
• 待属性更改dep.notice()关照时，能挪用本身的update()要领，并触发Compile中绑定的回调，则急流勇退。

4、 完成MVVM

MVVM作为数据绑定的进口，整合Observer、Compile和Watcher三者，经由过程Observer来监听本身的model数据变化，经由过程Compile来理会编译模板指令，终究运用Watcher搭起Observer和Compile之间的通讯桥梁，到达数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定结果

参考：理会Vue道理&完成双向绑定MVVM

对Vue.js的template编译的明白

template会被编译成AST语法树，AST会经由generate获得render函数，render的返回值是VNode，VNode是Vue的假造DOM节点

vue 为何采纳Virtual DOM？

一方面是出于机能方面的考量：

• 建立实在DOM的代价高：实在的 DOM 节点 node 完成的属性许多，而 vnode 仅仅完成一些必要的属性，比拟起来，建立一个 vnode 的本钱比较低。
• 触发屡次阅读重视绘及回流：运用 vnode ，相当于加了一个缓冲，让一次数据更改所带来的一切 node 变化，先在 vnode 中举行修正，然后 diff 以后对一切发生差别的节点集合一次对 DOM tree 举行修正，以削减阅读器的重绘及回流

然则机能受场景的影响是非常大的，差别的场景能够形成差别完成计划之间成倍的机能差异，所以依靠细粒度绑定及 Virtual DOM哪一个的机能更好不是一个轻易下定论的题目。更主要的原因是为相识耦HTML依靠，这带来两个非常主要的优点是：

• 不再依靠 HTML 理会器举行模版理会，能够举行更多的 AOT 事情进步运行时效力：经由过程模版 AOT 编译，Vue 的运行时体积能够进一步紧缩，运行时效力能够进一步提拔；
• 能够衬着到 DOM 之外的平台，完成 SSR、同构衬着这些高等特征，Weex 等框架运用的就是这一特征。

综上，Virtual DOM 在机能上的收益并非最主要的，更主要的是它使得 Vue 具有了当代框架应有的高等特征。

vue 和 react 区分

相同点:

• 都支撑SSR
• 都有Virtual DOM
• 组件化开辟
• 数据驱动
• …

差别点:

• vue引荐的是运用 webpack + vue-loader 的单文件组件花样，React 引荐的做法是 JSX + inline style
• vue 的Virtual DOM是追踪每一个组件的依靠关联，不会衬着悉数组件树，react 每当应当状况被转变时，悉数子组件都邑 re-render
• …

更多内容待更新…