Vue源码分析（虚拟DOM与优化）

最新推荐文章于 2024-04-01 11:03:13 发布
最新推荐文章于 2024-04-01 11:03:13 发布
阅读量706 收藏 2
点赞数
分类专栏： vuejs 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44749729/article/details/108241571
版权

概念

使用步骤
1.编写 页面 模板
    1.直接在HTML标签中写
    2.使用template
    3.使用单文件（<template>）
2.创建Vue实例
    1.在Vue 的构造函数中：data,methods,computer,watcher,props,...
3.将Vue挂载到页面中（mount）

数据驱动模型
Vue执行流程
    1.获得模板：模板中有‘坑’
    2.利用Vue构造函数提供的数据来‘填坑’，就可以得到页面显示的'标签'了
    3.替换原来有坑的标签
Vue 利用 我们提供的数据 和 页面的 模板 生成了一个新的HTML标签（node元素），替换到了 页面中 放置模板的位置


虚拟DOM
    目标：
    1. 怎么将真正的DOM转换为虚拟DOM
    2.怎么将虚拟DOM转换为真正的DOM

    思路与深拷贝类似

概念
    1.柯里化： 一个函数原本有多个参数 只传入一个参数生成一个新函数 ，由新函数接受到新的参数运行得到的结构
    2.偏函数： 参考柯里化， 传入一部分参数
    3.高阶函数： 一个函数参数是一个函数，该函数对参数这个函数进行加工，得到一个函数，这个加工用的函数就是高阶函数

    为什么要使用柯里化
    为了提升性能  使用柯里化可以缓存一部分能力

    使用两个例子说明

    1.判断元素

    Vue 本质上是使用HTML的字符串作为模板，将字符串的 模板 转换为AST 再转换为VNode 
        1.模板-AST  
        2.AST-VNode
        3.VNode-DOM

    最消耗性能的
    是模板-AST
    例子 字符串 1 + 2 * ( 3 + 4 )  解析该表达式，得到结果
    一般将此转换为 ‘波兰式’ 表达式 然后用栈进行运算

    在Vue中每一个标签可以是真正的HTML标签，也可以是自定义组件，怎么区分
    在vue源码中，将所有可用的HTML标签 已经存起来，
    假设这里只考虑 几个标签
    ```js
        let tags = 'div,p,a,img'.split(',')
    ```
    一个函数，判断标签名是否为 内置标签
    ```js
    function isHTML( tagName ){
        tagName = tagName.toLowerCase()
        //tags.indexOf(tagName) >-1 return true
        for(let i=0;i<...){
            if(tagName === tags[i])return true
        }
        return false
    }//也可以用indexOf判断
    ```
    模板是任意编写的，可以写的很简单，也可以写的很复杂，indexOf内部也要循环

    如果有6个内置标签 模板有10个，就得循环60次

    使用柯里化
    ```js
     let tags = 'div,p,a,img'.split(',')
        function makeMap( keys ) {
            let set = {}
            keys.forEach(key => {
                set[key] = true
            });
            return function ( tagName ) {
                //!!改为boolean
                return !!set[ tagName.toLowerCase() ]
            }
        }

        let isHTML = makeMap( tags )
        //不用再做循环
    ```
    


    2.虚拟DOM 的render

    vue 项目 模板 转换为AST 转换几次？
        1.页面加载渲染 一次
        2.每一个属性（响应式）数据发生变化 要渲染
        3.watch computed 等等

    render的作用是将 虚拟DOM 转换为 真正的DOM 加载到页面中

    //虚拟DOM 可以降级为AST
    一个项目运行时 模板不会变  抽象语法树不会变

    我们可以将代码优化  将虚拟DOM 缓存起来 生成函数  函数只需要传入数据  得到真正的DOM

源码模拟与分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <div>h1</div>
            <div>h2</div>
            <div>h3</div>
        </div>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</body>
<script>
    //为什么使用虚拟DOM ？ 性能
    //<div> => {tag: 'div' }
    //文本节点  => {tag : undefined , value: '文本节点' }
    //<div title='1'  class='c'>  => {tag : 'div'  data: {title: 1, class : 'c'}}
    //<div><div></div></div> {tag: 'div', children: [ {{tag: 'div'}]}


    class VNode{
        constructor(tag, data, value, type,){
            this.tag = tag && tag.toLowerCase()
            this.data = data
            this.value = value
            this.type = type
            this.children = []
        }

        appendChild( vnode ){
            this.children.push(vnode)
        }

    }

    //递归  来遍历DOM 生成虚拟DOM
    //Vue 中的源码使用 栈结构 ，使用栈存储 父元素 来实现递归生成
    function getVNode( node ) {
        let nodeType = node.nodeType
        let _vnode = null
        if(nodeType === 1 ){
            //元素
            let nodeName = node.nodeName
            let attrs =  node.attributes
            let _attrObj = {}
            //遍历属性节点 nodeType=2 
            for (let i = 0; i < attrs.length; i++) { 
                _attrObj[ attrs[i].nodeName ] = attrs[i].nodeValue
            }
            _vnode = new VNode(nodeName, _attrObj, undefined, nodeType)

            //考虑 node的子元素
            //递归
            let childNodes = node.childNodes
            for (let i = 0; i < childNodes.length; i++) {
                _vnode.appendChild( getVNode(childNodes[i]  ) )
            }
        }else if(nodeType === 3 ){
            _vnode = new VNode(undefined, undefined, node.nodeValue, nodeType)
        }
        return _vnode
    }


    let app = document.querySelector('#app')

    let vapp = getVNode(app)

    console.log( vapp )

    //将VNode 转换为真正的dom
    function parseVNode( vnode) {
        let type = vnode.type
        let _node = null
        if( type === 3){
            return document.createTextNode( vnode.value )
        }else if( type === 1 ){

            _node = document.createElement( vnode.tag )

            //属性
            //data 键值对
            let data = vnode.data
            Object.keys(data).forEach( (key) => {
                let attrName = key
                let attrValue = data[key]
                _node.setAttribute( attrName, attrValue)
            })

            //子元素
            //递归转换子元素 （虚拟dom）
            let children = vnode.children
            children.forEach( subvnode => {
                _node.appendChild(parseVNode(subvnode))
            })
        }
        return _node
    }

    //在真正的vue也是使用 递归+加栈
    let dom = parseVNode(vapp)

    console.log(dom)



</script>
</html>

vue源码 虚拟dom对象

在这里插入图片描述

从new vue 到 虚拟dom 到 渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <div>{{name}}</div>
            <div>{{age}}</div>
            <div>{{sex}}</div>
        </div>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <script>

        //虚拟dom 构造函数
        class VNode {
            constructor(tag, data, value, type,) {
                this.tag = tag && tag.toLowerCase()
                this.data = data
                this.value = value
                this.type = type
                this.children = []
            }

            appendChild(vnode) {
                this.children.push(vnode)
            }

        }

        //由真正的dom 生成虚拟dom 将该函数 当作complier函数 
        function getVNode(node) {
            let nodeType = node.nodeType
            let _vnode = null
            if (nodeType === 1) {
                //元素
                let nodeName = node.nodeName
                let attrs = node.attributes
                let _attrObj = {}
                //遍历属性节点 nodeType=2 
                for (let i = 0; i < attrs.length; i++) {
                    _attrObj[attrs[i].nodeName] = attrs[i].nodeValue
                }
                _vnode = new VNode(nodeName, _attrObj, undefined, nodeType)

                //考虑 node的子元素
                //递归
                let childNodes = node.childNodes
                for (let i = 0; i < childNodes.length; i++) {
                    _vnode.appendChild(getVNode(childNodes[i]))
                }
            } else if (nodeType === 3) {
                _vnode = new VNode(undefined, undefined, node.nodeValue, nodeType)
            }
            return _vnode
        }

        //根据路径访问成员
        function getValueByPath(obj, path) {
            let paths = path.split('.')
            //先取得 xxx 再取得结果中的yyy
            let res = obj
            let prop
            while (prop = paths.shift()) {
                res = res[prop]
            }

            return res

        }

        //将带坑的vdom 与数据data结合 得到 带有数据的vdom  模板 AST-》 vnode
        function combine(vNode, data) {
            let _type = vNode.type
            let _data = vNode.data
            let _value = vNode.value
            let _tag = vNode.tag
            let _children = vNode.children

            let _vnode = null

            let rex = /\{\{(.+?)\}\}/g
            if (_type === 3) {
                _value = _value.replace(rex, function (_, g) {
                    let path = g.trim()//双花括号里面的东西
                    let value = getValueByPath(data, path)
                    //将值替换{{}}
                    return value
                })
                _vnode = new VNode(_tag, _data, _value, _type)
            } else if (_type === 1) {
                _vnode = new VNode(_tag, _data, _value, _type)
                _children.forEach((_subVNode) => {
                    _vnode.appendChild(combine(_subVNode, data))
                });
            }

            return _vnode
        }


        //将VNode 转换为真正的dom
        function parseVNode(vnode) {
            let type = vnode.type
            let _node = null
            if (type === 3) {
                return document.createTextNode(vnode.value)
            } else if (type === 1) {

                _node = document.createElement(vnode.tag)

                //属性
                //data 键值对
                let data = vnode.data
                Object.keys(data).forEach((key) => {
                    let attrName = key
                    let attrValue = data[key]
                    _node.setAttribute(attrName, attrValue)
                })

                //子元素
                //递归转换子元素 （虚拟dom）
                let children = vnode.children
                children.forEach(subvnode => {
                    _node.appendChild(parseVNode(subvnode))
                })
            }
            return _node
        }

        function MVue(options) {
            this._options = options
            this._data = options.data
            let elm = document.querySelector(options.el) //vue是字符串
            this._template = elm
            this._parent = elm.parentNode

            this.mount()
        }

        MVue.prototype.mount = function () {
            //需要提供render方法：生成虚拟dom
            this.render = this.createRenderFn()
            this.mountComponent()
        }

        //生成render函数 缓存抽象语法树  使用虚拟dom模拟
        MVue.prototype.createRenderFn = function () {
            let ast = getVNode(this._template)
            //将AST + data =》 vnode
            //带坑的 vnode + data =》 含有数据的vnode
            return function render() {
                //将带坑的vdom 转换为带数据的vdom
                let _temp = combine(ast, this._data)
                return _temp
            }
        }

        MVue.prototype.mountComponent = function () {
            //执行mountcomponent（）
            let mount = () => { //函数 this 默认是全局  
                this.update(this.render())
            }

            mount.call(this) //本质上交给watcher来调用


            //为什么不直接
            //this.update( this.render()) //使用发布订阅模式，渲染和计算的行为应该交给watcher完成
        }

        //将虚拟dom 渲染到页面中  diff算法
        MVue.prototype.update = function (VNode) {
            //简化 直接生成HTML dom  replaceChild 到页面
            //父元素。replaceChild（新元素，旧元素）
            let realDom = parseVNode(VNode)
            this._parent.replaceChild( realDom, document.querySelector('#app'))
            //每次将页面中的dom 全部替换
        }

        //在真正的vue中使用了二次提交的 设计结构
        //1.在页面中的dom  和虚拟dom 一一对应
        //2.在每次数据变化时， 生成一个新的vdom（render）
        //3.将开始真实dom 对应的vdom 与 新的vdom 比较  就是diff算法
        //4.相同的不变  不同的更新到 真实dom 对应的vdom 上  也就更新真正的dom（update）


        let app = new MVue({
            el: '#app',
            data: {
                name: 'xa',
                age: 12,
                sex: 'man'
            }
        })
    </script>
</body>

</html>
XINGAO丨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 虚拟dom的patch源码分析
01-19
本文介绍了vue 虚拟dom的patch源码分析，分享给大家，具体如下： 源码目录：src/core/vdom/patch.js function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = ...
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-优化更新子节点
一个前端开发者
05-30 894
在上一篇文章中，我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时，Vue对子节点是先外层循环数组，再内层循环数组，每循环外层数组里的一个子节点，就去内层数组里找看有没有与之相同的子节点，最后根据不同的情况作出不同的操作。在上一篇文章的结尾我们也说了，这种方法虽然能够解决问题，但是还存在可优化的地方。比如当包含的子节点数量很多时，这样循环算法的时间复杂度就会变的很大，不利于性能提升。当然，Vue。
VUE里使用虚拟DOM来优化更新流程
忧郁的蛋的专栏
06-30 673
在 Vue.js 中，虚拟 DOM 的比较和更新是由 Vue 的渲染器来完成的。然后，通过对比新旧虚拟 DOM的差异，渲染器会更新真实 DOM 中的节点，使得新的虚拟 DOM 与真实 DOM 保持一致。虽然虚拟 DOM 在性能上有了很大的提升，但是如果数据量特别大或者组件复杂度特别高还是会有一定的性能问题，可是有一些优化方法来减少对虚拟 DOM 的操作，提高性能。Vue.js 会使用虚拟 DOM 来比较新旧虚拟 DOM，并使用最小代价的方式来更新真实 DOM，这样能减少不必要的 DOM 操作，提高性能。
Vue核心之虚拟DOM以及Diff算法原理
最新发布
weixin_63756334的博客
04-01 709
自己的理解：首先，通过HTML Parser解析HTML，生成一颗DOM节点树，再通过CSS Parser解析CSS，生成CSS的样式规则（Style Rules），再通过DOM节点的attch方法接受样式信息，返回一个Render对象（Render相当于渲染函数），Render对象最终渲染构建成一颗Render树，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标，最后调用节点的Painting方法绘制出来。，从而显著提高性能。
vue 源码解析
wanglun_的博客
07-14 2512
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
Vue源码系列（一）：Vue源码解读的正确姿势
热门推荐
Ningdz的博客
12-10 1万+
作为一名开发人员，阅读源码是非常好的学习方式，尤其Vue又是当下很受欢迎的前端框架，随着用的人越来越多，不断推动着源码地完善。在源码中有着各位大佬多年积淀下来的精华，而这些精华就非常值得我们学习。
vue源码
qq_41256253的博客
06-23 1998
这里写目录标题01-vue源码学习-柯里化函数一、概念:二、代码实现三、柯里化函数原理其实是闭包02-vue源码学习-vue的基本执行流程和简单渲染模型03-vue源码学习-响应式原理(对象和数组) 01-vue源码学习-柯里化函数 一、概念: 柯里化: 一个函数原本有多个参数, 之传入一个参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 偏函数: 一个函数原本有多个参数, 之传入一部分参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 高阶函数: 一个函数参数是一个函数, 该
【JavaScript源代码】Vue源码分析之虚拟DOM详解.docx
12-29
Vue源码分析之虚拟DOM详解 　虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个...
vue源码分析1
08-08
最后，Vue的虚拟DOM（Virtual DOM）是提高性能的关键。它通过创建一个与真实DOM相似但不直接操作DOM的对象树，当数据变化时，Vue会计算出最小的DOM变更，然后只更新必要的部分，从而避免了频繁的DOM操作，提升了应用...
vue源码帖子分析1
08-08
Vue源码帖子分析1 Vue源码帖子分析1是对Vue.js框架源码的深入分析和解读。本文将从多方面对Vue的源码进行剖析，帮助读者更好地理解Vue的实现机理和设计理念。 模块化和依赖管理 在分析Vue源码之前，需要了解模块...
vue中的虚拟dom
九仞山的专栏
06-06 5306
介绍了vue中的虚拟DOM的实现原理，以及v-for指令中为什么要设置key值
Vue源码解析
weixin_43132396的博客
12-20 6163
主要目录结构 scripts：构建相关的脚本和配置文件 dist：构建后的文件 flow：Flow的类型声明 packages：vue-server-render 和 vue-template-compiler，它们作为单独的NPM包发布 test：所有的测试代码 examples：实例代码 types：TypeScript 类型定义 src：源代码 compiler ： 与模版编译相关的代码 core ： Vue核心库（通用的、与平台无关的运行时代码） observer ：实现变化侦测的代码 vdom
Vue源码解读
m0_73442777的博客
04-18 2379
本文主要介绍了Vue.js的源代码解读相关的步骤和技巧，包括安装Vue.js源代码、学习Vue.js的架构、阅读Vue.js的源代码、参考Vue.js的文档和社区资源，以及尝试修改Vue.js的源代码等内容。如果你想深入学习Vue.js的实现原理和内部机制，阅读本文可以为你提供一定的参考和帮助。
vue的虚拟DOM
TeFuir__Lv的博客
12-11 1992
vue的虚拟dom
vue源码解析
weixin_47964837的博客
06-12 6401
vue源码解析
vue虚拟DOM详解
Goodbye_的博客
05-02 8865
1.虚拟DOM的概念 虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点数进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分 2.vue中的虚拟DOM vue中状态变化时，只能通知到组件，组件内部的变化需要通过虚拟DOM去进行比对与渲染 在vue中，我们使用模板来描述状态与DOM之间的映射关系。vue通过编译将模板转换成渲染函数，执行渲染函数就可以得到一个虚拟节点树，使用虚拟节点数就可以渲染页面 虚拟DOM在vue中主要提供与真实节点对应的虚拟
Vue源码解析（详细篇）
weixin_46996561的博客
12-19 3146
vue数据观测实现原理，模版编译过程，模版挂载过程分析
vue虚拟Dom详解
不是程序猿呀的博客
06-15 6735
虚拟dom本质上是一个js对象，用来描述视图的界面结构，在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这意味着每个组件都对应着一颗虚拟dom树 在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建的时候，还发生在视图依赖的数据更新的时候，如果在渲染时，直接使用真实dom，由于真实dom的创建，更新，插入会带来大量的性能消耗，从而就会极大地降低渲染效率，因此，vue在渲染时，使用虚拟dom来替代真实dom主要是解决渲染效率的问题每个组件实例首次被
Vue2.0 源码：11个重要源码原理一览
青轩桃李能几何，流光欺人忽蹉跎
08-06 753
这个过程会生成一段 JavaScript 代码，该代码可以在运行时根据动态数据生成真实的虚拟 DOM。在生成 render 函数的过程中，编译器会生成一系列的代码片段来描述模板的结构和逻辑。这些代码片段包括创建元素（createElement）、设置属性（setAttribute）、添加子节点（appendChild）等操作。通过组合这些代码片段，最终生成一个 render 函数，该函数接受一个参数作为数据输入，并返回一个虚拟 DOM 节点（VNode）作为输出。
vue中的虚拟dom实现源码
04-04
Vue中的虚拟DOM实现源码可以分为以下几个部分： 1. createElement函数 Vue中的createElement函数是用来创建虚拟DOM节点的，它定义在core/vdom/create-element.js文件中。该函数接收三个参数：标签名、属性和子节点。它返回一个VNode对象，即虚拟DOM节点。 2. update函数 update函数是Vue中用来更新虚拟DOM的核心函数。它定义在core/vdom/patch.js文件中。该函数接收两个参数：旧的VNode节点和新的VNode节点，然后根据它们之间的差异对DOM进行更新。 3. diff算法 Vue中的diff算法是用来计算旧的VNode节点和新的VNode节点之间的差异的。它定义在core/vdom/patch.js文件中。该算法通过对比两个VNode节点的属性和子节点来确定它们之间的差异，然后将这些差异应用到真实的DOM上。 4. createComponent函数 createComponent函数是Vue中用来创建组件的函数，它定义在core/vdom/create-component.js文件中。该函数接收三个参数：组件构造函数、组件的属性和子节点。它返回一个VNode对象，即组件的虚拟DOM节点。 5. render函数 render函数是Vue中用来生成虚拟DOM的函数，它定义在core/instance/render.js文件中。该函数根据组件的模板和数据生成虚拟DOM节点，然后调用update函数将其渲染到真实的DOM上。 以上就是Vue中虚拟DOM实现的主要源码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值