Vue VDOM 渲染 diff 简易版

最新推荐文章于 2022-06-24 11:12:32 发布
最新推荐文章于 2022-06-24 11:12:32 发布
阅读量205 收藏
点赞数
分类专栏： Vue 文章标签： webpack vue dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44420276/article/details/103716935
版权
从零开始创建一项目骨架

项目目录
在这里插入图片描述

npm init -y

npm install webpack webpack-cli html-webpack-plugin css-loader style-loader less-loader less file-loader clean-webpack-plugin extract-text-webpack-plugin webpack-merge webpack-dev-server -D

安装好依赖项，我这里简单做了下webpack dev prod合并

webpack.base.config.js

// 生产和开发环境公用部分
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // 新版
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')


module.exports = {
  entry:{
    index:'./src/index.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextWebpackPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      },
      {
        test:/\.less$/,
        use:ExtractTextWebpackPlugin.extract({
          fallback:'style-loader',
          use:['css-loader','less-loader']
        })
      },
      {
        test:/\.(jpg|png|svg)$/,
        loader:['file-loader']
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
    }),
    new ExtractTextWebpackPlugin("style.css"),
    new CleanWebpackPlugin(),
  ]
}

webpack.dev.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const webpackMerge = require('webpack-merge')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const baseConfig = require('./webpack.base.config')

const dist_dir = 'dev_dist'

module.exports = webpackMerge(baseConfig,{
  mode:'development',
  output: {
    path:path.resolve(__dirname,dist_dir)
  },
  devServer: { // 开发环境运行 浏览器端口9000
    contentBase: path.join(__dirname, dist_dir),
    compress: true,
    port: 9000
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
    }),
    new ExtractTextWebpackPlugin("style.css"),
  ]
})

webpack…prod.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')

const dist_dir = 'prod_dist'

module.exports = webpackMerge(baseConfig,{
  mode:'production',
  output: {
    path:path.resolve(__dirname,dist_dir)
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      title:"diff dev"
    }),
    new ExtractTextWebpackPlugin("style.css"),
  ]
})

package.json

{
  "name": "webpack-diff",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.dev.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --open --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0", // 注意版本
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    hello world
  </div>
</body>
</html>

index.css

#app{
  color:red
}

#app span{
  font-size: 16px;
}

index.js

import './index.css'

function main() {
  console.log('测试运行')
}
main()


npm run serve

在这里插入图片描述

至此一个简单的webpack工程项目建立起来了。现在我们开始正题。

先简述模板转换成视图的过程

在这里插入图片描述

虚拟DOM

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

类似于以下结构，

{
	type:"" //标签
	key:"",
	props:{},
	{},
	{}, // 作为子节点
}

vdom/index.js

import createElement from './h.js'
import { render} from './patch'
export {
  createElement,
  render
}

vnode/h.js

import { vnode } from './vnode'
export default function createElement(type, props = {}, ...children) {
  let key;
  if (props.key) {
    key = props.key;
    delete props.key;
  }
  // 将不是虚拟节点的子节点
  children =children.map(child=>{
    if(typeof child==='string'){
      return vnode(undefined,undefined,undefined,undefined,child)
    }else {
      return child
    }
  })
  return vnode(type, key, props, children)
}

vnode/vnode.js

export function vnode(type, key, props, children, text){
  return {
    type,
    key,
    props,
    children,
    text
  }
}

vnode/patch.js

/**
 * @param {} vnode // 用户写的虚拟节点
 * @param {} container // 渲染到某个容器
 */

export function render(vnode, container) {
  let ele = createDomElementFromVnode(vnode);
  container.appendChild(ele)
}


// 通过虚拟DOM创建真实的DOM
function createDomElementFromVnode(vnode) {
  let {
    type,
    key,
    props,
    children,
    text
  } = vnode;
  if (type) { // 说明是一个标签
    vnode.domElement = document.createElement(type);
    updateProperties(vnode) //根据当前的虚拟节点的属性，更新真实的DOM
    // 遍历子节点
    children.forEach(childVnode => render(childVnode, vnode.domElement))
  } else {
    vnode.domElement = document.createTextNode(text)
  }
  return vnode.domElement
}


// 后续比对的时候，会根据老的属性 和 新的属性 重新更新节点
function updateProperties(newVnode, oldProps = {}) {
  let domElement = newVnode.domElement; //真实的dom元素
  let newProps = newVnode.props; // 当前虚拟节点的属性

  // 属性如果老的里面有，新的没有 将移除
  for (let oldPropName in oldProps) {
    if (!newProps[oldPropName]) {
      delete domElement[oldPropName]
    }
  }

  // 同一 style属性，旧得移除 新的覆盖
  let newStyleObj = newProps.style || {}
  let oldStyleObj = newProps.style || {}

  for (let propName in oldStyleObj) {
    if (!newStyleObj[propName]) {
      domElement.style[propName] = ''
    }
  }



  // 如果老的没有，新的里面有 将覆盖老节点
  for (let newPropName in newProps) {
    if (newPropName === 'style') { // 还有事件 
      let styleObj = newProps.style;
      for (let s in styleObj) {
        domElement.style[s] = styleObj[s]
      }
    } else {
      domElement[newPropName] = newProps[newPropName]
    }

  }
}
测试

src/index.js

import { createElement, render } from './vdom'
let vnode = createElement('div',{id:'wrap1',key:'4'},createElement('div',{id:'wrap2',key:'3'},'测试二'),'测试一')

render(vnode,app) // app会自动识别#app

在这里插入图片描述

Posden
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的diff算法深度解析
yyds2026的博客
10-21 746
我们经过前面的章节学习已经知道，要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？为了解决这个问题，我们的解决方案是–根据真实DOM生成一颗，当某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。这也就是我们所说的一个虚拟dom diff的过程。
一文搞懂Vue Diff算法
最新发布
小王的技术库
12-14 1391
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VirtualDOM与diff(Vue实现)
weixin_34072857的博客
09-18 185
写在前面 因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue。在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/l...
Vue 中的 VDOM（虚拟DOM） 和 diff 算法，你清楚吗 ？
Wu hao's blog
07-28 1072
前言 ： 在学完基础的 html（html5），css（css3），js（es6） 等基础后，我们可以利用已有的知识去做原生开发。但是为了提高开发效率，可能会去学习一些方便操作 DOM，而封装的库或者框架，如 jQuery 等，还有一些 UI 组件库或框架，如 Bootstrap，Element-UI 等。如果你觉得操作 DOM 比较繁琐，那么就可以去了解比较流行的 react 和 vue 等前端框架。这些框架，它的核心是，数据响应式，实现了操作数据化，废弃了之前操作DOM的繁琐的任务。还有就是我们今.
浅析weex之vdom渲染
weixin_34277853的博客
07-15 107
前言 前段时间进行了weex页面尝试, 页面滚动加载渲染得非常流畅, 让H5页面拥有了native般的体验。如此之利器，让人非常想探一究竟，因此最近进行了js-framwork源码学习(weex开源地址：https://github.com/alibaba/weex)，希望能进一步了解其dom渲染机制。 一. 文件结构 weex代码结构如下，重点关注其j...
前端面试题：vue响应式原理 Vdom diff
欢迎来到我的博客
08-22 2229
vue的响应式原理，也算是面试中再常见不过的题目了，之前遇见这道题目只会说：利用的是Object.defineProperty进行的数据劫持，监听数据的变化，通知watcher进行的数据更新。总的来说这是没错的，但是只要面试官进一步的问，那一定是满脸的问号。昨天一天也是没有面试机会，所以就研究了一天这个东西，算是搞明白了（自我感觉），今天就把他来写成文章，希望大佬看到哪里不对给出指导，本文可能会有点长。上正文。 现在最流行的框架非vue，react莫属，他们流行起来的原因，离不开响应式，因为它在做一些.
vue中的的diff算法（详解）
qq_43375584的博客
06-24 846
算法是一种通过同层的树节点进行比较的高效算法其有两个特点： 算法在很多场景下都有应用，在 中，作用于虚拟 渲染成真实 的新旧 节点比较整体策略为：深度优先，同层比较下面举个通过算法更新的例子：新旧节点如下图所示：第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为后的第一个真实节点，同时旧节点移动到C，新节点的 移动到了 C第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理， 后创建了 C 的真实节点插入到第一次创建的 D 节点后面。同时旧节点的 移动到了 B，新节点
详解Vue3中对VDOM的改进
10-15
Vue通过虚拟DOM的patch（修补）和diff（差异）算法来实现高效的DOM更新。 在Vue 2.x版本中，每当数据发生变化时，整个虚拟DOM树都会重新渲染，并且执行一个“全树遍历”算法来比较虚拟节点，找出哪些部分需要被更新...
说说Vue中的虚拟Dom和diff算法
congboer的博客
06-24 681
说说Vue中的虚拟Dom和diff算法 一、什么是虚拟Dom？ 虚拟Dom即vdom，它是一个Object对象模型，用来模拟真实的Dom节点的结构。 //这里写个需求，看vdom如何模拟真实dom：如果这里我想写这样一个结构： <div class = "box"> <ul> <li> 人间天堂 </li&gt...
Vue vdom 和diff算法 组件
mjn_123的博客
06-24 404
虚拟dom是什么 它是一个Object对象模型，用来模拟真实dom节点的结构 虚拟dom的使用基本流程 1.获取数据 2. 创建vdom 3. 初次渲染 vdom 4. 将vdom渲染成真实dom 5. 数据更改 6. 使用diff算法比对两次vdom,生成patch 对象 7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ...
Vue原理「十二」-- vdom和diff算法 *****
louShuMei 的博客
10-30 474
diff 算法概述 diff即对比，是一个广泛的概念，如linux diff、git diff 两个JS对象也可以做diff 两颗树做diff，如vdom diff 树diff 时间负责度是o(n^3) 第一，遍历tree1；第二，遍历tree2 第三，排序 1000个节点，要计算 1亿次，算法不可用 优化时间复杂度到o(n) 之比较同一级，不跨级比较 tag不相同，则直接删掉重建，不再深度比较 tag和key两者都相同，则认为是相同节点，不再深度比较 patchVnode（） diff算法总结 pa
虚拟DOM( VDOM ) 和 diff算法
weixin_44889992的博客
04-20 216
虚拟DOM( VDOM ) 和 diff算法 总结： 虚拟DOM 是什么？ 虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构 diff算法 diff算法是用来比较两个或是多个文件， 返回值是文件的不同点 diff算法是同级比较的 diff思维也是来自后端 diff算法的比较思维 比较后会出现四种情况： 1、此节点是否被移除 -> 添加新的...
Vue源码剖析(二)：实现DIFF算法
qq_44746132的博客
05-16 302
DIFF算法应该是Vue框架中比较核心的一点了，框架采用DIFF算法对抽离的新旧虚拟DOM进行比较，尽可能复用页面也有的真实DOM，找出不同的DOM进行补丁或者添加新的DOM操作。总之，DIFF算法的原则就是尽可能少的操作DOM,即是操作DOM，也尽可能的进行优化。 首先先简述下具体的实现思路: 如图，虚拟DOM的对比主要分五种情况: 当新旧虚拟DOM的首元素相同是，将新旧DOM的首指针加一，向后移动一次继续比较新旧DOM的当前首指针指向的元素，如果不同执行下一种比较 当新旧虚拟DOM不满足第一种比
Vue虚拟DOM（VDOM）和diff算法
weixin_43001333的博客
04-20 369
1. 虚拟DOM 是什么？ 虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构 经过多次的VDOM操作之后，通过render函数进行渲染，通过diff算法， 将所有的vdom对比一遍， 找出不同的地方， 然后进行render函数渲染 ##2. diff算法 diff算法是用来比较两个或是多个文件， 返回值是文件的不同点 diff算法是同级比较的 d...
深入Vue2.x的虚拟dom和diff算法原理
congboer的博客
07-29 7753
本文转载于：https://blog.csdn.net/m6i37jk/article/details/78140159 作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言 Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双...
react —— diff算法与VDOM
weixin_30381317的博客
10-30 151
###################鸡汤一碗######################## 与其担心未来，不如现在好好努力。 这条路上，只由奋斗才能给你安全感。 不要轻易把梦想寄托在某个人身上，也不要太在乎身旁的耳语， 因为未来是你自己的，只有你自己才能给你自己最大的安全感。 ########################################### diff ...
面试中的网红虚拟DOM，你知多少呢？深入解读diff算法
moandaylab
06-05 745
深入浅出虚拟DOM和diff算法一、虚拟DOM（Vitual DOM）1、虚拟DOM（Vitual DOM）和diff的关系2、真实DOM的渲染过程3、虚拟DOM是什么？4、解决方案 - vdom（1）问题引出（2）vdom如何解决问题：将真实DOM转为JS对象的计算5、用JS模拟一个DOM结构6、通过snabbdom学习vdom（1）snabbdom是什么（2）snabbdom浅析（2）snabbdom演示7、vdom总结二、diff算法1、diff算法2、diff算法概述3、树diff的时间复杂度O(.
vdom VS diff算法 （王者级别)
神经什么 的博客
06-24 897
vdom VS diff算法 （王者级别) 需求： 有一个变量 count 的初始值时 0，经过一系列运算，得到10001，然后将结果写入box中 var box = document.querySelector( '.box' ) // 我们可能会这么写 var count = 0 ; console.time( 'a' ) for( var i = 0 ; i &...
Vue.js diff算法详解与Vnode解析
该算法在 Vue 源码的 `src/core/vdom/patch.js` 文件中实现。 虚拟 DOM 在 Vue 中，diff 算法作用于虚拟 DOM 对象，这些对象是真实 DOM 的轻量级表示，包含了元素的类型、数据、子节点等信息。VNode 类是所有虚拟 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值