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,但需要服务端支持
能选用简单的就别用复杂的,要考虑成本和收益
vue原理相关的更多相关文章
- vue原理20181211
1. 打开浏览器从输入网址到网页呈现出来,经历了什么? 打开浏览器从输入网址到网页呈现出来,经历了什么? 1.1 DNS解析域名 1.2 TCP连接:TCP三次握手 1.3 发送HTTP请求 1.4 ...
- 剖析Vue原理&实现双向绑定MVVM
转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...
- vue原理简介
写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...
- 剖析Vue原理&实现双向绑定MVVM-2
vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
- 剖析Vue原理&实现双向绑定MVVM-1
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
- Vue 事件相关实例方法---on/emit/off/once
一.初始位置 平常项目中写逻辑,避免不了注册/触发各种事件 今天来研究下 Vue 中,我们平常用到的关于 on/emit/off/once 的实现原理 关于事件的方法,是在 Vue 项目下面文件中的 ...
- [转]vue原理简介
写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...
- vue原理探索--响应式系统
Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...
- Vue.js 相关知识(路由)
1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...
随机推荐
- VueX数据持久化
解决:Vue刷新时获取不到数据 解决方案:1.本地存储 2.Vuex数据持久化工具插件 本地存储 import Vue from "vue"; import Vuex from & ...
- ES6 Promise 的链式调用
1.什么是Promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. 2.对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态: pending: 初始 ...
- 二叉树遍历在Unity中的实现
前言:今天放一天,想到要放国庆假了就心烦气躁,躺床上又焦虑,回想起面试官的一副扑克脸,马上跳起来看了看数据结构. 今天复习了二叉树,包括一些基本概念和特性,当看到二叉树遍历的章节时,马上联想到了Uni ...
- 两个月吃透阿里P9推荐260页SpringBoot2企业应用实战pdf入职定P6+
前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...
- CabloyJS部署了一套演示站点
为了方便大家快速体验和了解CabloyJS的风格和特性,全新部署了一套演示站点.对于初次接触CabloyJS的开发者,不用下载新建项目,就可以直接体验CabloyJS了 在线演示 场景 链接/二维码 ...
- mysql复制表的两种方式
mysql复制表的两种方式. 第一.只复制表结构到新表 create table 新表 select * from 旧表 where 1=2 或者 create table 新表 like 旧表 第二 ...
- BUUCTF-爱因斯坦
爱因斯坦 16进制打开可以看到存在压缩包,使用binwalk分离出来 提示需要解压密码,按照常理爆破四位数纯数字没有出来,查看图片属性发现密码 得到flag
- canvas简易画布
今天学习了canvas,利用它做了一个简易版的画板,校验自己所学的知识,分享出来以供大家学习指教.先上效果图. 主要是使用了canvas的stroke和clearReact来实现画板的绘画和橡皮擦功能 ...
- Linux编辑shell脚本快速启动jar包
1.上传jar包到服务器 2.创建并编辑start.sh文件 vi start.sh 将下面内容复制到文件中 ps -ef|grep xf-demo |grep -v grep |awk '{prin ...
- 反向传播神经网络(BP)
实验部分: ①输入.输出矢量及问题的阐述 由题意输入变量取值范围为e={-2,-1,0,1,2}和ec={-2,-1,0,1,2},则输入矢量有25种情况,分别如下所示: 则由T=int((e+ec) ...