PS:对自己近来工作中使用vue的一些疑惑点进行总结.
Vue可以理解为一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
一、vue响应式原理
vue会遍历vue实例中的data内的所有property,通过 Object.defineProperty
把这些 property 全部转为 getter/setter。
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
二、组件
组件是可复用的vue实例
1、组件间通信
父组件向子组件传值:prop
在子组件中定义prop属性,父组件在使用子组件的地方用v-bind传值
子组件向父组件传值:emit
在父组件:使用 emit(eventName,optionalPayload)触发事件。
$refs、 $parent、$root
- $refs ref 加在子组件上,用this.ref.name 可以获取子组件实例,可以使用组件的所有方法和数据。
- $parent 获取父组件实例
- $root 获取根组件实例,在某些组件调用比较复杂的情况下,用到一些公共的数据和方法可以考虑写在根组件下,比如Cesium结合vue的开发;
三、虚拟dom
1、浏览器渲染页面的过程
第一步,DOM构造
浏览器在收到html代码后,通过html解析器解析构建为一颗DOM树。
第二步,布局
浏览器按从上到下,从左到右的顺序,读取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/