vue源码解析#虚拟DOM和diff算法（1）

怎么真正的、彻底的弄懂虚拟DOM和diff算法

===》把它们的底层动手敲出来

• 简单介绍一下虚拟DOM和diff算法

diff实际上就是different，叫区别，这样一个单词的首字母，在计算机里面，表示最小量更新的这样一个方法（精细化比对最小量更新）

===》代价小，不昂贵，性能得到优化

===》所以在我们vue底层是很关键的

1.1 snabbdom简介

• snabbdom是瑞典单词，单词愿意“速度”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPGIu9W1-1623396031258)(C:\Users\juan~er\AppData\Roaming\Typora\typora-user-images\image-20210610183627284.png)]

• snabbodom是著名的虚拟DOM库，是diff算法的鼻祖，Vue源码借鉴了snabbdom

• 官方git：http://github.com/snabbdom/snabbdom

• 只有200行代码，可以说优化程度很高

1.2 安装snabbodom

• 在git上的snabbodom源码都是用Typescript写的，git上并不提供编译好的JavaScript版本

• 如果要直接使用build出来的JavaScript版的snabbodom库，可以从npm上下载
  命令：npm i -D snabbdom

  • -D:表示的是开发依赖==》项目开发时候的依赖》》》devDependencies
  • -S:b表示的是==》项目的真正依赖》》》

• 学习库底层的时候，建议阅读原汁原味的ts代码，最好带有库作者原注释。这样对源码的而阅读能力有很大的帮助

1.3 测试环境搭建

• snabbdom库是DOM库，当然不能再node.js环境运行，所以我们主要搭建webpack（构建工具）和webpack-dev-server（提供8080这个虚拟端口）开发环境，好消息是不需要安装任何loader

• 注意：

  🔔必须安装最新版本的webpack@5，不能安装webpack@4，这是因为webpack@4没有读取身份证中exports的能力，建议大家使用这样的版本：

  npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

  😣这里，我都没有下载到身份证中，有这个属性,安装了有啥用

配置webpack.config.js文件

const path = require('path');

module.exports = {
    //入口
  entry: './src/index.js',
  //出口
  output: {
      //虚拟打包路径，也就是说文件夹不会真正生成，而是在8080端口虚拟生成
    publicPath:'xuni',
    //打包出来的文件名
    filename: 'bundle.js'
  },
  devServer:{
      //端口号
      port:8080,
      //静态资源文件夹
      contentBase:"www"
  }
};

无法运行，报错，找不到cli

===》然后我就重新下载：npm i -D webpack-cli@3

报错：

换一个试试

还是不行，我就干脆直接在文件夹里面删除，然后再重新下载，结果还是没有用，还是出现了，上面的问题

==》好的，我接下来就直接用:npm uninstall webpack-cli卸载

重新下载，还是有错误：

抱着尝试的心理，我重新换了一个下载的命令：yarn add webpack-cli@3 -D

成功了，但是看这个来说，这里应该就是这个版本号啊，那为什么，我的身份证里面显示的是3尼，这是yarn下载的原因吗？

😣我这个问题，为什么会遇见尼？

打包成功之后，打开我们的8080端口，就会展现出我们www/index里面的html文件，

这个虚拟打包的文件在：

这个文件夹没有真正的被物理生成，

所以说，我们的html文件就应该引入这个xuni里面的bundle.js文件

😣为甚要引入！！！​

这个时候，我们可以在src里面的index.js里面编写代码，也会显示在这个html页面里面，😣为什么？

因为这个页面引入这个js文件，这个文件，实际上就是这里index.js里面的代码

这是我们在webpack.config.js里面的配置，这里的src里面的index.js就是这个的入口文件，xuni那个js就是出口地方

1.4 虚拟DOM和h函数

1.4.1 虚拟DOM

• 含义：用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。

• 为什么有虚拟DOM

  • 因为diff（精细化比对最小量更新这个算法）是发生在虚拟DOM上的，也就是说节点和节点进行最小化比较并不是真实DOM
  • 新的虚拟DOM和老的虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反应到真正的DOM上。

• DOM如何变成虚拟DOM

  属于模板编译原理范畴，我们这里不进行研究===》mustache

虚拟DOM如何被渲染函数（h函数）产生？

手写h函数

• h函数用来产生虚拟节点（vnode） ----v–virtual

创建虚拟节点

a标签

var myVnode1 = h("a", {
  props: {
    href: 'www.baidu.com',
    //新窗口中打开
    target: '_blank'
  }
}, '百度')

加类名

const myVnode2=h("div",{class:{'box':true}},'我是一个盒子')

• h函数可以嵌套使用，从而得到虚拟DOM树

已更新《vue源码解析#虚拟DOM和diff算法（2）》
地址：