vue原理相关
vue原理三大模块:响应式、vdom和diff、模板编译
vue原理要点:
1、组件化
组件化的历史:在vue之前已经有组件化的概念了,想asp、jsp、php等就有组件化的概念,nodejs也有组件化
数据驱动视图:传统组件都只是静态渲染,国内新年还是要依赖于操作DOM,现在的网页复杂度高,操作DOM变得不太实际。于是便有脸VUE MVVM通过数据去驱动视图
MVVM:
2、响应式
Object.defineProperty
监听data属性getter setter (包括数组)
监听对象(深度),监听数组
重新定义数组原型,创建新对象,原型指向oldArrayProperty,再扩展新的方法,所以不会影响原型
Object.defineProperty的缺点
1)深度监听,需要递归到底,一次性计算量大;
2)无法监听新增属性/删除属性(需要用vue.set vue.delete)
3)无法监听原生数组,需要特殊处理
3、vdom和diff
应用背景:DOM操作给常耗时,以前用jQuery,可以自行控制DOM操作时机,手动调整,Vue 和 React 是数据驱动视图,可以有效控制DOM操作,Vdom-js执行速度快,用哪个JS模拟DOM结构,计算出最小变更,做操DOM。
DOM-Diff:diff是发生在虚拟 DOM 上的,将新虚拟 DOM 和旧虚拟 DOM进行 diff (精细化比较),得出最小的更新范围,最后反映到真实的 DOM 上的一个过程,这个过程其实是一个patch(补丁)过程,即指对旧的VNode进行修补,打补丁从而得到新的VNode。
vdom结构:
Diff算法总结:
PatchVnode
addVnodes removeVnodes
updateChildren(key的重要性)
4、模板编译
1)with语法;
2)(vue template complier)模板编译为render函数;
3)执行render函数生成vnode
5、渲染过程
1)初次渲染过程
- 解析模板为render函数(或在开发环境已完成,vue-loader)
- 触发响应式,监听data属性getter setter
- 执行render函数,生成vnode,patch(elem,vnode)(执行render函数会触发getter)
2)更新过程
- 修改data,触发setter(此前已经在getter中被监听)
- 重新执行render函数,生成nreVnode
- Patch(vnode,newVnode)
3)异步渲染
- 汇总data的修改,一次性更新视图
- 减少DOM操作次数,提高性能
6、前端路由
1)hash
hash变化会触发网页跳转,即浏览器的前进、后退
hash变化不会刷新页面,SPA必需的特点
hash永远不会提交到server端(前端自生自灭)
触发hash变化的方式:
通过js修改
修改路由
浏览器的前进后退
2)H5 history
用url规范的路由,但跳转时不刷新页面
History.pushState--路由切换
window.onpopstate--监听浏览器前进后退
3)两者对比
hash--通过window.onhashchange监听
H5 history--通过window。onpopstate监听,history。pushState修改
H5 history需要后端支持
toB的系统推荐使用hash,简单易用,对url规范不敏感
toC系统,可以考虑选择H5 history,但需要服务端支持
能选用简单的就别用复杂的,要考虑成本和收益
最新文章
- Visual Studio 2013执行项目报错:HTTP 错误 500.22
- Android按钮的各个样式设置
- 总有一天会NB的! SB一样的坚持会有NB一样的结果的!
- eclipse html插件的下载和安装
- How to create a PPPoE Server on Ubuntu? (Untested)
- commons-lang阅读(一)
- Eclipse换背景
- java 静态代码块 代码块 构造函数 静态成员变量 成员变量的初始化顺序
- Windows驱动开发工具 WDK 学习笔记(1)
- 笔记本电脑连wifi然后通过有线网口做桥接
- Linux常用命令(第二版) --网络通信命令
- mssql sqlserver 将字段null(空值)值替换为指定值的三种方法分享
- JavaScript -- 时光流逝(六):js中的正则表达式 -- RegExp 对象
- Centos7安装OpenDCIM-19.01步骤
- Mac 软件
- Html5 标签四 (列表)
- ES系列三、基本知识准备
- final文案+美工
- 使用DDOS deflate抵御少量DDOS攻击
- Python36和Python27共存的方法