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)初次渲染过程

  1. 解析模板为render函数(或在开发环境已完成,vue-loader)
  2. 触发响应式,监听data属性getter setter
  3. 执行render函数,生成vnode,patch(elem,vnode)(执行render函数会触发getter)

2)更新过程

  1. 修改data,触发setter(此前已经在getter中被监听)
  2. 重新执行render函数,生成nreVnode
  3. Patch(vnode,newVnode)

3)异步渲染

  1. 汇总data的修改,一次性更新视图
  2. 减少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原理相关的更多相关文章

  1. vue原理20181211

    1. 打开浏览器从输入网址到网页呈现出来,经历了什么? 打开浏览器从输入网址到网页呈现出来,经历了什么? 1.1 DNS解析域名 1.2 TCP连接:TCP三次握手 1.3 发送HTTP请求 1.4 ...

  2. 剖析Vue原理&实现双向绑定MVVM

    转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...

  3. vue原理简介

    写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...

  4. 剖析Vue原理&实现双向绑定MVVM-2

    vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...

  5. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  6. Vue 事件相关实例方法---on/emit/off/once

    一.初始位置 平常项目中写逻辑,避免不了注册/触发各种事件 今天来研究下 Vue 中,我们平常用到的关于 on/emit/off/once 的实现原理 关于事件的方法,是在 Vue 项目下面文件中的 ...

  7. [转]vue原理简介

    写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...

  8. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

  9. Vue.js 相关知识(路由)

    1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...

随机推荐

  1. 个人冲刺(四)——体温上报app(二阶段)

    冲刺任务:完成用户注册功能和数据库类 RegisterActivity.java package com.example.helloworld; import android.content.Inte ...

  2. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  3. JDK1.7HashMap源码分析

       1.1首先HashMap中的Hash(哈希)是什么? Hash也称散列,哈希,对应的英文都是Hash.基本原理就是把任意长度的输入通过Hash算法变成固定长度的输出,这个映射的规则就是对应的Ha ...

  4. 接口测试postman深度挖掘应用③--postman终结篇

    上一章节我们介绍了postman的变量测试以及导入数据测试基本上技术性的东西已经差不过了,这篇文章再系统性的介绍一下. 一.下载 官网:https://www.postman.com 1.选择需要下载 ...

  5. C语言学习之我见-malloc和free内存申请及释放函数

    malloc函数负责向计算机申请确定大小的内存空间. free函数负责释放malloc的申请空间. (1)函数原型 void free(void *_Memory); void * malloc(si ...

  6. 从Vue源码中我学到了几点精妙方法

    话不多说,赶快试试这几个精妙方法吧!在工作中肯定会用得到. 立即执行函数 页面加载完成后只执行一次的设置函数. (function (a, b) { console.log(a, b); // 1,2 ...

  7. 记一次beego通过go get命令后找不到bee.exe的坑

    学习goweb开发,gin是个轻量级的框架.如果想要一个类如aspnetmvc帮我们搭建好了的goweb框架,beego值得去学习.否则gin下面需要动手构建好多代码.新手还是先学现成的节约时间成本. ...

  8. MySQL根据表前缀批量修改、删除表

    注意:请先调试好,以及做好备份,再执行操作. 批量修改表 批量给前缀为 xushanxiang_content_ 的表增加一个 username 的字段: SELECT CONCAT('ALTER T ...

  9. 『现学现忘』Docker基础 — 40、发布镜像到Docker Hub

    目录 1.准备工作 2.Docker登陆命令 3.Docker提交命令 4.总结: 5.补充:docker tag命令 1.准备工作 Docker Hub地址:https://hub.docker.c ...

  10. 【Java面试】什么是 ISR,为什么需要引入 ISR

    Hi,大家好,我是Mic. 一个工作5年的粉丝,在简历上写精通Kafka. 结果在面试的时候直接打脸. 面试官问他:"什么是ISR,为什么需要设计ISR" 然后他一脸懵逼的看着面试 ...