Vue 中 diff 算法后更新 DOM 的方法
vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM。
网上的文章都是谈论的 diff 算法,而 diff 算法后如何取修改 DOM 没有太多说明。
我在源码中查找了下,找到了更新真实 DOM 的方法。
node_modules\vue\src\core\vdom\path.js 中的 createPatchFunction 方法接收 backend ,而 backend 中包含 modules 和 nodeOps,这个 nodeOps 就是用来更新真实 DOM 的主要方法。
在 patch.js 中可以找到很多地方使用了 nodeOps 来进行 DOM 操作的方法,这些方法似乎就是原生 DOM 的方法,但是调用方式却感觉不同。看来是进行了封装。
那么在哪封装的这些方法呢?
通过查找调用 createPatchFunction,在 node_modules\vue\src\platforms\web\runtime\path.js 中找到了调用
从而也找到了传入的 nodeOps 所在路径为 node_modules\vue\src\platforms\web\runtime\node-ops.js
这里就能看到对 DOM 操作的封装。
也就是 vue 在 diff 算法后,会通过原生的 DOM 操作来更新真实的 DOM,实现修改数据页面更新的功能。
Vue 中 diff 算法后更新 DOM 的方法的更多相关文章
- Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- 详解vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- 详解vue的diff算法原理
我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时,vue ...
- 用Javascript方式实现LeetCode中的算法(更新中)
前一段时间抽空去参加面试,面试官一开始让我做一道题,他看完之后,让我回答一下这个题的时间复杂度并优化一下,当时的我虽然明白什么是时间复杂度,但不知道是怎么计算的,一开局出师不利,然后没然后了,有一次我 ...
- (Vue中)cehart在同一个dom上画图图切换时饼图有折线图的坐标系
网上都是别人转载的,下面是转载的代码,在Vue中根本不适用 var echartrunningstate = null; if (echartrunningstate && echar ...
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
随机推荐
- Thread 详解
转自:http://www.mamicode.com/info-detail-517008.html 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 ...
- 初识html与css
---恢复内容开始--- PS应用量尺寸w.h- 操作方式: 窗口,信息,右上角面板选项,标尺单位,像素切图- 操作方式: 切片工具, 文件 ,另存为web所有格式,jpeg,存储,切片:选中的切片, ...
- linux安装mysql(shell一键安装)
1. 相关文件(install_mysql.sh.my.cnf.mysqld相关内容在文中最后面) 2. 将上面的文件上传到linux服务器某一目录下 3.给install_mysql.sh赋执行权限 ...
- Alpha阶段敏捷冲刺总结
项目感言 张艺琳 在这次冲刺中,我主要担任着PM的角色.不仅要梳理流程给小组每个成员进行分工,并且还要及时监督他们在要求时间内提交代码.同时我也参与到开发中去,与小组成员一起讨论数据库,最后一起设计出 ...
- oracle入门之对表数据查询(一)
此文中用到的表是Scott用户中自带的三张表: 基本select语句 基本语法: select [distinct] *|{columnl,column2,column3..} from table ...
- JS 最简单数组去重
,,,,])) // 再把set转变成array console.log(newArr) // [1,2,3,4]
- python笔记——随手记
1.max与min函数的使用min(0)返回该矩阵中每一列的最小值 min(1)返回该矩阵中每一行的最小值 max(0)返回该矩阵中每一列的最大值 max(1)返回该矩阵中每一行的最大值2.argso ...
- php lcg_value与mt_rand生成0~1随机小数的效果比较
因工作需要使用PHP生成0~1随机小数,之前写过一篇<php生成0~1随机小数方法>,基于mt_rand()及mt_getrandmax()实现. 后来有网友评论,php原生方法lcg_v ...
- vue-router路由传参
da给我们点击父组件之后跳转到子组件之后,需要携带参数,便于子组件获取数据.传参方式有三种:一. getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 thi ...
- zt secureCRT serialNo
Name: ygeR Company: TEAM ZWT SerialNumber: 03-77-119256 License Key: ABH2MJ 9YVAC5 Z17QF7 4ZAS7Z ABG ...