PS:对自己近来工作中使用vue的一些疑惑点进行总结.

Vue可以理解为一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

一、vue响应式原理

vue会遍历vue实例中的data内的所有property，通过 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

image.png

二、组件

组件是可复用的vue实例

1、组件间通信

父组件向子组件传值：prop

在子组件中定义prop属性，父组件在使用子组件的地方用v-bind传值

子组件向父组件传值：emit

在父组件：使用 emit(eventName,optionalPayload)触发事件。

image.png

$refs、 $parent、$root

• $refs ref 加在子组件上，用this.ref.name 可以获取子组件实例，可以使用组件的所有方法和数据。
• $parent 获取父组件实例
• $root 获取根组件实例，在某些组件调用比较复杂的情况下，用到一些公共的数据和方法可以考虑写在根组件下，比如Cesium结合vue的开发；

三、虚拟dom

1、浏览器渲染页面的过程

第一步，DOM构造

浏览器在收到html代码后，通过html解析器解析构建为一颗DOM树。

image.png

第二步，布局

浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。
传送带上的盒子就是节点，而这条流动的传送带就是文档流。如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在DOM树上的结构，可以嵌套的层级没有限制的哦。文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

第三步，绘制页面

2、vue的虚拟dom

虚拟DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

vue.js组件渲染渲染成dom节点的过程：

• Vue.js通过编译将template 模板转换成渲染函数(render ) ，执行渲染函数就可以得到一个虚拟节点树
• 在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行DOM操作来更新视图。

四、vuex

vuex是vue生态系统里的一环，负责全局状态管理，包含state、mutation、action。
state存储数据，mutation修改state数据事件，action提交mutication事件，负责具体的逻辑；
vuex其本质可以理解为一个隐藏的组件，state就是这个组件的data。

五、其他

定义data可以有三种写法。

//对象；PS：除了在根组件中，data都应该声明为函数，
//因为声明为对象，会在组件的所有实例共享；
data: {
　　　　yanggb: 'yanggb'
　　}
 //方法
data: function() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
 //方法，ES6变种写法
data() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}

export default

ES6模块化写法，导出默认模块

参考：

果冻公开课 DOM 是什么？
https://www.zhihu.com/question/34219998

vue官网
https://cn.vuejs.org/