精华内容
下载资源
问答
  • vue虚拟DOM模拟实现
    2021-12-09 20:02:19

    1.vue虚拟DOM的作用

    • 具备跨平台的优势

    由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。

    • 操作 DOM 慢,js运行效率高。我们可以将DOM对比操作放在JS层,提高效率。

    因为DOM操作的执行速度远不如Javascript的运算速度快,因此,把大量的DOM操作搬运到Javascript中,运用patching算法来计算出真正需要更新的节点,最大限度地减少DOM操作,从而显著提高性能。

    Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)

    • 提升渲染性能

    Virtual DOM的优势不在于单次的操作,而是在大量、频繁的数据更新下,能够对视图进行合理、高效的更新。

    为了实现高效的DOM操作,一套高效的虚拟DOM diff算法显得很有必要。我们通过patch 的核心----diff 算法,找出本次DOM需要更新的节点来更新,其他的不更新。比如修改某个model 100次,从1加到100,那么有了Virtual DOM的缓存之后,只会把最后一次修改patch到view上。

    2.模拟实现虚拟DOM

    VN虚拟dom:把html这个结构(名称,样式,属性等)转换成一个jsduixiang ,通过操作js对象操作虚拟dom。

    怎么操作虚拟dom实现页面更新渲染:页面在初次渲染的时候,把页面html结构(DOM树 )转换成一个js对象,如果页面再有更新的时候,把更新之后的虚拟dom的js对象和之前的虚拟dom对象进行对比。通过vue提供的diff算法,找到需要更新的节点,针对需要更新的节点进行局部更新,提高渲染效率。

    代码如下:

    <body>
        <!-- VN虚拟dom:把html这个结构(名称,样式,属性等)转换成一个jsduixiang ,通过操作js对象操作虚拟dom -->
        <!-- 怎么操作虚拟dom实现页面更新渲染:页面在初次渲染的时候,把页面html结构(DOM树 )转换成一个js对象,如果页面再有更新的时候,把更新之后的虚拟dom的js对象和之前的虚拟dom对象进行对比。通过vue提供的diff算法,找到需要更新的节点,针对需要更新的节点进行局部更新,提高渲染效率  -->
        <div id="app">
            <button>点击更新年龄</button>
            <ul>
                <li>{{name}}</li>
                <li>{{age}}</li>
                <li>{{phone}}</li>
            </ul>
        </div>
    
    </body>
    <script src="../vue.js"></script>
    <script>
        // 模拟虚拟dom更新的过程
        var app = new Vue({
            // el:"#app", 需要注释这句,
            data: {
                name: "张三",
                age: 20,
                phone: 110
            },
            // 1.先初次获取DOM结构,用来去模拟el:"#app"
            created() {
                // 用原生的dom操作来获取dom结构
                var appHtml = document.getElementById("app")
                var tempData = appHtml.innerHTML
                // 把html结构里面的{{}}替换成data数据
                tempData = tempData.replace("{{name}}", this.name)
                // replace() 替换原字符串的部分字符,原字符串不会改变的
                tempData = tempData.replace("{{age}}", this.age)
                tempData = tempData.replace("{{phone}}", this.phone)
                appHtml.innerHTML = tempData
    
                var btn = document.querySelector("#app button")
                btn.addEventListener("click", this.update)
    
                // 2.把初次获取dom结构转换成虚拟dom对象
                this.VN = {
                    type: "div", //type代表的是元素的名称
                    id: "app", // 把div的id属性转换成对象
                    children: [  // children 元素的子元素
                        {
                            type: "button",
                            content: "点击更新年龄",// content标签内容
                            event: { //event 事件
                                name: "click",//事件名称
                                fun: this.update //事件函数
                            }
                        },
                        {
                            type: "ul",
                            children: [
                                {
                                    type: "li",
                                    content: this.name
                                },
                                {
                                    type: "li",
                                    content: this.age
                                },
                                {
                                    type: "li",
                                    content: this.phone
                                }
                            ]
                        }
                    ]
                }
    
            },
            methods: {
                update() {
                    // 3.更新数据并且生成新的虚拟dom对象
                    this.age = 40
                    this.newVN = {
                        type: "div", //type代表的是元素的名称
                        id: "app", // 把div的id属性转换成对象
                        children: [  // children 元素的子元素
                            {
                                type: "button",
                                content: "点击更新年龄",// content标签内容
                                event: { //event 事件
                                    name: "click",//事件名称
                                    fun: this.update //事件函数
                                }
                            },
                            {
                                type: "ul",
                                children: [
                                    {
                                        type: "li",
                                        content: this.name
                                    },
                                    {
                                        type: "li",
                                        content: this.age
                                    },
                                    {
                                        type: "li",
                                        content: this.phone
                                    }
                                ]
                            }
                        ]
                    }
                    console.log(this.VN,this.newVN);
                    // 4.把更新之前的虚拟dom对象和更新之后的虚拟dom对象进行对比,通过diff算法进行对比,返回需要更新的节点
                    function diff(oldVN,newVN){
                        return [{
                            path:"#app>ul>li:nth-child(2)",
                            value:this.age
                        }]
                    }
                    // 5.遍历所有需要更新的对象,然后针对性的去更新dom节点
                    for (const obj of diff.call(this)) {
                        // 实现局部的更新
                        document.querySelector(obj.path).innerHTML = obj.value                    
                    }
                }
            },
        })
    
    </script>

    更多相关内容
  • vue 虚拟dom实现原理

    万次阅读 多人点赞 2017-12-14 10:03:33
    Vue版本: 2.3.2 virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射...

    Vue版本: 2.3.2

    virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行,这样就通过操作vdom来提高直接操作的dom的效率和性能。

    Vue2.0版本也引入了vdom。其vdom算法是基于snabbdom算法所做的修改。

    Vue的整个应用生命周期当中,每次需要更新视图的时候便会使用vdom。那么在Vue当中,vdom是如何和Vue这个框架融合在一起工作的呢?以及大家常常提到的vdomdiff算法又是怎样的呢?接下来就通过这篇文章简单的向大家介绍下Vue当中的vdom是如何去工作的。

    首先,我们还是来看下Vue生命周期当中初始化的最后阶段:将vm实例挂载到dom上,源码在src/core/instance/init.js

        Vue.prototype._init = function () {
            ...
            vm.$mount(vm.$options.el)  
            ...
        }   

    实际上是调用了src/core/instance/lifecycle.js中的mountComponent方法,
    mountComponent函数的定义是:

    export function mountComponent (
      vm: Component,
      el: ?Element,
      hydrating?: boolean
    ): Component {
      // vm.$el为真实的node
      vm.$el = el
      // 如果vm上没有挂载render函数
      if (!vm.$options.render) {
        // 空节点
        vm.$options.render = createEmptyVNode
      }
      // 钩子函数
      callHook(vm, 'beforeMount')
    
      let updateComponent
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        ...
      } else {
        // updateComponent为监听函数, new Watcher(vm, updateComponent, noop)
        updateComponent = () => {
          // Vue.prototype._render 渲染函数
          // vm._render() 返回一个VNode
          // 更新dom
          // vm._render()调用render函数,会返回一个VNode,在生成VNode的过程中,会动态计算getter,同时推入到dep里面
          vm._update(vm._render(), hydrating)
        }
      }
    
      // 新建一个_watcher对象
      // vm实例上挂载的_watcher主要是为了更新DOM
      // vm/expression/cb
      vm._watcher = new Watcher(vm, updateComponent, noop)
      hydrating = false
    
      // manually mounted instance, call mounted on self
      // mounted is called for render-created child components in its inserted hook
      if (vm.$vnode == null) {
        vm._isMounted = true
        callHook(vm, 'mounted')
      }
      return vm
    }

    注意上面的代码中定义了一个updateComponent函数,这个函数执行的时候内部会调用vm._update(vm._render(), hyddrating)方法,其中vm._render方法会返回一个新的vnode,(关于vm_render是如何生成vnode的建议大家看看vue的关于compile阶段的代码),然后传入vm._update方法后,就用这个新的vnode和老的vnode进行diff,最后完成dom的更新工作。那么updateComponent都是在什么时候去进行调用呢?

    vm._watcher = new Watcher(vm, updateComponent, noop)

    实例化一个watcher,在求值的过程中this.value = this.lazy ? undefined : this.get(),会调用this.get()方法,因此在实例化的过程当中Dep.target会被设为这个watcher,通过调用vm._render()方法生成新的Vnode并进行diff的过程中完成了模板当中变量依赖收集工作。即这个watcher被添加到了在模板当中所绑定变量的依赖当中。一旦model中的响应式的数据发生了变化,这些响应式的数据所维护的dep数组便会调用dep.notify()方法完成所有依赖遍历执行的工作,这里面就包括了视图的更新即updateComponent方法,它是在mountComponent中的定义的。

    updateComponent方法的定义是:

    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }

    完成视图的更新工作事实上就是调用了vm._update方法,这个方法接收的第一个参数是刚生成的Vnode,调用的vm._update方法(src/core/instance/lifecycle.js)的定义是

    Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
        const vm: Component = this
        if (vm._isMounted) {
          callHook(vm, 'beforeUpdate')
        }
        const prevEl = vm.$el
        const prevVnode = vm._vnode
        const prevActiveInstance = activeInstance
        activeInstance = vm
        // 新的vnode
        vm._vnode = vnode
        // Vue.prototype.__patch__ is injected in entry points
        // based on the rendering backend used.
        // 如果需要diff的prevVnode不存在,那么就用新的vnode创建一个真实dom节点
        if (!prevVnode) {
          // initial render
          // 第一个参数为真实的node节点
          vm.$el = vm.__patch__(
            vm.$el, vnode, hydrating, false /* removeOnly */,
            vm.$options._parentElm,
            vm.$options._refElm
          )
        } else {
          // updates
          // 如果需要diff的prevVnode存在,那么首先对prevVnode和vnode进行diff,并将需要的更新的dom操作已patch的形式打到prevVnode上,并完成真实dom的更新工作
          vm.$el = vm.__patch__(prevVnode, vnode)
        }
        activeInstance = prevActiveInstance
        // update __vue__ reference
        if (prevEl) {
          prevEl.__vue__ = null
        }
        if (vm.$el) {
          vm.$el.__vue__ = vm
        }
        // if parent is an HOC, update its $el as well
        if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
          vm.$parent.$el = vm.$el
        }
    }

    在这个方法当中最为关键的就是vm.__patch__方法,这也是整个virtaul-dom当中最为核心的方法,主要完成了prevVnodevnodediff过程并根据需要操作的vdom节点打patch,最后生成新的真实dom节点并完成视图的更新工作。

    接下来就让我们看下vm.__patch__里面到底发生了什么:

        function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
            // 当oldVnode不存在时
            if (isUndef(oldVnode)) {
                // 创建新的节点
                createElm(vnode, insertedVnodeQueue, parentElm, refElm)
            } else {
                const isRealElement = isDef(oldVnode.nodeType)
                if (!isRealElement && sameVnode(oldVnode, vnode)) {
                // patch existing root node
                // 对oldVnode和vnode进行diff,并对oldVnode打patch
                patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
          } 
            }
        }

    在对oldVnodevnode类型判断中有个sameVnode方法,这个方法决定了是否需要对oldVnodevnode进行diffpatch的过程。

    function sameVnode (a, b) {
      return (
        a.key === b.key &&
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      )
    }

    sameVnode会对传入的2个vnode进行基本属性的比较,只有当基本属性相同的情况下才认为这个2个vnode只是局部发生了更新,然后才会对这2个vnode进行diff,如果2个vnode的基本属性存在不一致的情况,那么就会直接跳过diff的过程,进而依据vnode新建一个真实的dom,同时删除老的dom节点。

    vnode基本属性的定义可以参见源码:src/vdom/vnode.js里面对于vnode的定义。

    constructor (
        tag?: string,
        data?: VNodeData,         // 关于这个节点的data值,包括attrs,style,hook等
        children?: ?Array<VNode>, // 子vdom节点
        text?: string,        // 文本内容
        elm?: Node,           // 真实的dom节点
        context?: Component,  // 创建这个vdom的上下文
        componentOptions?: VNodeComponentOptions
      ) {
        this.tag = tag
        this.data = data
        this.children = children
        this.text = text
        this.elm = elm
        this.ns = undefined
        this.context = context
        this.functionalContext = undefined
        this.key = data && data.key
        this.componentOptions = componentOptions
        this.componentInstance = undefined
        this.parent = undefined
        this.raw = false
        this.isStatic = false
        this.isRootInsert = true
        this.isComment = false
        this.isCloned = false
        this.isOnce = false
      }
    
      // DEPRECATED: alias for componentInstance for backwards compat.
      /* istanbul ignore next */
      get child (): Component | void {
        return this.componentInstance
      }
    }

    每一个vnode都映射到一个真实的dom节点上。其中几个比较重要的属性:

    • tag 属性即这个vnode的标签属性
    • data 属性包含了最后渲染成真实dom节点后,节点上的class,attribute,style以及绑定的事件
    • children 属性是vnode的子节点
    • text 属性是文本属性
    • elm 属性为这个vnode对应的真实dom节点
    • key 属性是vnode的标记,在diff过程中可以提高diff的效率,后文有讲解

    比如,我定义了一个vnode,它的数据结构是:

        {
            tag: 'div'
            data: {
                id: 'app',
                class: 'page-box'
            },
            children: [
                {
                    tag: 'p',
                    text: 'this is demo'
                }
            ]
        }

    最后渲染出的实际的dom结构就是:

       <div id="app" class="page-box">
           <p>this is demo</p>
       </div>

    让我们再回到patch函数当中,在当oldVnode不存在的时候,这个时候是root节点初始化的过程,因此调用了createElm(vnode, insertedVnodeQueue, parentElm, refElm)方法去创建一个新的节点。而当oldVnodevnodesameVnode(oldVnode, vnode)2个节点的基本属性相同,那么就进入了2个节点的diff过程。

    diff的过程主要是通过调用patchVnode(src/core/vdom/patch.js)方法进行的:

    function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) {
        ...
    }
    if (isDef(data) && isPatchable(vnode)) {
          // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy'
          // 取出cbs保存的update钩子函数,依次调用,更新attrs/style/class/events/directives/refs等属性
          for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
          if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
        }

    更新真实dom节点的data属性,相当于对dom节点进行了预处理的操作

    接下来:

        ...
        const elm = vnode.elm = oldVnode.elm
        const oldCh = oldVnode.children
        const ch = vnode.children
        // 如果vnode没有文本节点
        if (isUndef(vnode.text)) {
          // 如果oldVnode的children属性存在且vnode的属性也存在
          if (isDef(oldCh) && isDef(ch)) {
            // updateChildren,对子节点进行diff
            if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
          } else if (isDef(ch)) {
            // 如果oldVnode的text存在,那么首先清空text的内容
            if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
            // 然后将vnode的children添加进去
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
          } else if (isDef(oldCh)) {
            // 删除elm下的oldchildren
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)
          } else if (isDef(oldVnode.text)) {
            // oldVnode有子节点,而vnode没有,那么就清空这个节点
            nodeOps.setTextContent(elm, '')
          }
        } else if (oldVnode.text !== vnode.text) {
          // 如果oldVnode和vnode文本属性不同,那么直接更新真是dom节点的文本元素
          nodeOps.setTextContent(elm, vnode.text)
        }

    这其中的diff过程中又分了好几种情况,oldCholdVnode的子节点,chVnode的子节点:

    1. 首先进行文本节点的判断,若oldVnode.text !== vnode.text,那么就会直接进行文本节点的替换;
    2. vnode没有文本节点的情况下,进入子节点的diff
    3. oldChch都存在且不相同的情况下,调用updateChildren对子节点进行diff
    4. oldCh不存在,ch存在,首先清空oldVnode的文本节点,同时调用addVnodes方法将ch添加到elm真实dom节点当中;
    5. oldCh存在,ch不存在,则删除elm真实节点下的oldCh子节点;
    6. oldVnode有文本节点,而vnode没有,那么就清空这个文本节点。

    这里着重分析下updateChildren(src/core/vdom/patch.js)方法,它也是整个diff过程中最重要的环节:

    function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
        // 为oldCh和newCh分别建立索引,为之后遍历的依据
        let oldStartIdx = 0
        let newStartIdx = 0
        let oldEndIdx = oldCh.length - 1
        let oldStartVnode = oldCh[0]
        let oldEndVnode = oldCh[oldEndIdx]
        let newEndIdx = newCh.length - 1
        let newStartVnode = newCh[0]
        let newEndVnode = newCh[newEndIdx]
        let oldKeyToIdx, idxInOld, elmToMove, refElm
        
        // 直到oldCh或者newCh被遍历完后跳出循环
        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
          if (isUndef(oldStartVnode)) {
            oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
          } else if (isUndef(oldEndVnode)) {
            oldEndVnode = oldCh[--oldEndIdx]
          } else if (sameVnode(oldStartVnode, newStartVnode)) {
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
          } else if (sameVnode(oldEndVnode, newEndVnode)) {
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
          } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
            canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
          } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
            // 插入到老的开始节点的前面
            canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
          } else {
            // 如果以上条件都不满足,那么这个时候开始比较key值,首先建立key和index索引的对应关系
            if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
            // 如果idxInOld不存在
            // 1. newStartVnode上存在这个key,但是oldKeyToIdx中不存在
            // 2. newStartVnode上并没有设置key属性
            if (isUndef(idxInOld)) { // New element
              // 创建新的dom节点
              // 插入到oldStartVnode.elm前面
              // 参见createElm方法
              createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
              newStartVnode = newCh[++newStartIdx]
            } else {
              elmToMove = oldCh[idxInOld]
              /* istanbul ignore if */
              if (process.env.NODE_ENV !== 'production' && !elmToMove) {
                warn(
                  'It seems there are duplicate keys that is causing an update error. ' +
                  'Make sure each v-for item has a unique key.'
                )
              
              // 将找到的key一致的oldVnode再和newStartVnode进行diff
              if (sameVnode(elmToMove, newStartVnode)) {
                patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
                oldCh[idxInOld] = undefined
                // 移动node节点
                canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              } else {
                // same key but different element. treat as new element
                // 创建新的dom节点
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              }
            }
          }
        }
        // 如果最后遍历的oldStartIdx大于oldEndIdx的话
        if (oldStartIdx > oldEndIdx) {        // 如果是老的vdom先被遍历完
          refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
          // 添加newVnode中剩余的节点到parentElm中
          addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
        } else if (newStartIdx > newEndIdx) { // 如果是新的vdom先被遍历完,则删除oldVnode里面所有的节点
          // 删除剩余的节点
          removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
    }

    在开始遍历diff前,首先给oldChnewCh分别分配一个startIndexendIndex来作为遍历的索引,当oldCh或者newCh遍历完后(遍历完的条件就是oldCh或者newChstartIndex >= endIndex),就停止oldChnewChdiff过程。接下来通过实例来看下整个diff的过程(节点属性中不带key的情况):

    1. 首先从第一个节点开始比较,不管是oldCh还是newCh的起始或者终止节点都不存在sameVnode,同时节点属性中是不带key标记的,因此第一轮的diff完后,newChstartVnode被添加到oldStartVnode的前面,同时newStartIndex前移一位;
      1

    2. 第二轮的diff中,满足sameVnode(oldStartVnode, newStartVnode),因此对这2个vnode进行diff,最后将patch打到oldStartVnode上,同时oldStartVnodenewStartIndex都向前移动一位
      2

    3. 第三轮的diff中,满足sameVnode(oldEndVnode, newStartVnode),那么首先对oldEndVnodenewStartVnode进行diff,并对oldEndVnode进行patch,并完成oldEndVnode移位的操作,最后newStartIndex前移一位,oldStartVnode后移一位;
      3

    4. 第四轮的diff中,过程同步骤3;
      4

    5. 第五轮的diff中,同过程1;
      5

    6. 遍历的过程结束后,newStartIdx > newEndIdx,说明此时oldCh存在多余的节点,那么最后就需要将这些多余的节点删除。
      6

    vnode不带key的情况下,每一轮的diff过程当中都是起始结束节点进行比较,直到oldCh或者newCh被遍历完。而当为vnode引入key属性后,在每一轮的diff过程中,当起始结束节点都没有找到sameVnode时,首先对oldCh中进行key值与索引的映射:

    if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

    createKeyToOldIdx(src/core/vdom/patch.js)方法,用以将oldCh中的key属性作为,而对应的节点的索引作为。然后再判断在newStartVnode的属性中是否有key,且是否在oldKeyToIndx中找到对应的节点。

    1. 如果不存在这个key,那么就将这个newStartVnode作为新的节点创建且插入到原有的root的子节点中:
    if (isUndef(idxInOld)) { // New element
        // 创建新的dom节点
        // 插入到oldStartVnode.elm前面
        // 参见createElm方法
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
             newStartVnode = newCh[++newStartIdx]
        } 
    1. 如果存在这个key,那么就取出oldCh中的存在这个keyvnode,然后再进行diff的过程:
           elmToMove = oldCh[idxInOld]
              /* istanbul ignore if */
              if (process.env.NODE_ENV !== 'production' && !elmToMove) {
              
              // 将找到的key一致的oldVnode再和newStartVnode进行diff
              if (sameVnode(elmToMove, newStartVnode)) {
                patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
                // 清空这个节点
                oldCh[idxInOld] = undefined
                // 移动node节点
                canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              } else {
                // same key but different element. treat as new element
                // 创建新的dom节点
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              }

    通过以上分析,给vdom上添加key属性后,遍历diff的过程中,当起始点结束点搜寻diff出现还是无法匹配的情况下时,就会用key来作为唯一标识,来进行diff,这样就可以提高diff效率。

    带有Key属性的vnodediff过程可见下图:

    注意在第一轮的diff过后oldCh上的B节点被删除了,但是newCh上的B节点elm属性保持对oldChB节点elm引用。
    wechatimg16
    wechatimg17
    wechatimg18
    wechatimg19
    wechatimg20



    转自 https://github.com/DDFE/DDFE-blog/issues/18

    展开全文
  • vue 虚拟dom实现原理

    千次阅读 2020-03-23 20:23:50
    vue 虚拟dom实现原理前言一、真实DOM和其解析流程二、Virtual DOM 作用是什么?三、虚拟DOM实现 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是...

    前言

    Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是Virtual DOM?为什么需要Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?这是本文所要探讨的问题。

    一、真实DOM和其解析流程

    浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
    第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。

    第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。

    第三步,将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法,接受样式信息,返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

    第四步,有了Render树,浏览器开始布局,为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

    第五步,Render树和节点显示坐标都有了,就调用每个节点paint方法,把它们绘制出来。

    DOM树的构建是文档加载完成开始的?构建DOM数是一个渐进过程,为达到更好用户体验,渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。

    Render树是DOM树和CSSOM树构建完毕才开始构建的吗?这三个过程在实际进行的时候又不是完全独立,而是会有交叉。会造成一边加载,一遍解析,一遍渲染的工作现象。

    CSS的解析是从右往左逆向解析的(从DOM树的下-上解析比上-下解析效率高),嵌套标签越多,解析越慢。

    二、Virtual DOM 作用是什么?

    虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作。例如,一个ul标签下很多个li标签,其中只有一个li有变化,这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。

    为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点(oldVnode)做对比,找出真正需要更新的节点来进行DOM操作,从而避免操作其他无需改动的DOM。

    其实虚拟DOM在Vue.js主要做了两件事:

    提供与真实DOM节点所对应的虚拟节点vnode
    将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图

    三、虚拟DOM实现

    其实虚拟DOM就是用js完成本来在html上的元素创建,所以我们本来所编写的组件,也是一种虚拟dom的形式,如template:‘<h1>virtual dom</h1>’本身就是一个虚拟dom实现
    另外一种就是render渲染函数了
    在这里插入图片描述

    展开全文
  • 主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 简单实现Vue中的虚拟dom 前言: 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西。 说起来,我刚开始学习Vue的时候对虚拟dom也是一知半解,我当时一听虚拟dom,脑子里第一反应就是...

    简单实现Vue中的虚拟dom

    传送门:简单实现Vue中的插值替换(三)

    前言:

    1. 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西。

      说起来,我刚开始学习Vue的时候对虚拟dom也是一知半解,我当时一听虚拟dom,脑子里第一反应就是虚拟机 ,不因为什么,就因为它两个都带有虚拟这个词。

      虚拟什么意思?虚拟:设想、虚构。

      说的更直白一点,就是凭想象编造出来的事物。

    2. 既然是虚拟出来的,那虚拟出来了个啥呢,或者说Vue根据真实的dom编造出来了一个什么样的东西呢?

      其实,简单的理解虚拟dom,就是Vue用对象式的语言,把一个真实的dom描述了一下。

      • 我们看一个简单的例子:

        <div id="root">
            <p class="name" title="Michel">Michel</p>
        </div>
        

        这是一段正常的dom,那么Vue里面是怎么描述它的呢?我们再来看一下虚拟dom:

        【注:这里让大家看的虚拟dom远远没有Vue转换的那么复杂,只是简单些的,好理解。】

        {
            tag:"div", // 标签
            attrs:{id:"root"}, // 属性
            type:1,// 元素类型
            value: undefined, // 值
            children:[ // 孩子元素
                {
                    tag:"p",
                    attrs:{class:"name", title:"Michel"},
                    type:1,
                    value: undefined,
                    children:[
                        {
                            tag: undefined,
                            attrs: undefined,
                            type: 3,
                            value: 'Michel',
                            children:[]
                        }
                    ]
                }
            ]
        }
        

        看了这个虚拟dom,是不是感觉很简单,一个包含着 tag,attrs,type,value,children的对象,就把这个dom描述出来了,而且层级也描述的很清楚。

      • 这就是虚拟dom,大家还感觉很神秘吗?哈哈。

    3. 说道这里,又得简单的啰嗦两句,为啥要用虚拟dom???

      当然是为了更快的编译,更高运行效率。【diff算法比较的就是虚拟dom】


    接下来,我们进入正题,如何简简单单的把一串真正的dom转换成虚拟dom呢?

    要分以下几步

    1. 首先要拿到真正的dom模板

    2. 解析它,首先获取这个dom的类型,这个看过我前两篇博客的人估计不会陌生,就是对元素标签和文本进行一下区分。

    3. 如果是元素标签:

      那就先获取这个dom的标签名,然后获取它的属性,把这些连同它的类型都给存起来,然后看看它有没有孩子,如果有,那就拿到它的孩子,然后就进入递归喽。

    4. 如果是文本:

      那就更简单了,我们就直接拿到它的值,然后连同类型存起来。

    5. 当然怎么存,也是有讲究的,我们可以封装一个函数来专门干存储这个事,当然定义一个class类也行。

    现在知道怎么干,那下面就填充代码呗

    • 获取dom模板

      doument.getElemetById('#root'),看过我前面博客的知道,这个其实有个简单方法,那就是直接写root就好了。

    • 获取dom类型

      node.nodeType就可以拿到啦

    • 如果是元素类型,就是类型是 1:

      node.nodeName 获取标签名
      
      node.attributes 获取属性名,这里得到的是一个伪数组,所以我们还需要处理一下,处理成以属性名为key,属性值为value的一个对象
      
      node.childNodes 获取子元素,然后就进入递归了
      
    • 如果是文本,就是类型 3,那就 node.nodeValue 获取一下值,然后连同类型存起来。

    • 存储的话,比如这样:

      // 定义一个类
      class vNode {
          constructor(tag, attrs, value, type) {
              this.tag = tag && tag.toLowerCase();
              this.attrs = attrs;
              this.value = value;
              this.type = type;
              this.children = [];
          }
      
          appendChildArr(vNode) {
              this.children.push(vNode);
          }
      }
      // 然后使用的时候,new vNode 传值就好了。
      // 函数的就不写啦,和我前两篇博客定义的函数形式很像啦。
      

    最后我们来看下完整的代码

    <body>
        <div id="root">
            <p class="name" title="Michel">Michel</p>
            <p class="age" title="Michel今年21岁">21</p>
        </div>
    </body>
    <script>
        console.log('真实dom', root);
        // 定义一个类
        class vNode {
            constructor(tag, attrs, value, type) {
                this.tag = tag && tag.toLowerCase(); // 转换成小写
                this.attrs = attrs;
                this.value = value;
                this.type = type;
                this.children = []; // 定义一个数组,存储转换之后的虚拟DOM
            }
    
            appendChildArr(vNode) {
                this.children.push(vNode);
            }
        }
    
        // 转换虚拟dom
        const getVNode = (node) => {
            let nodeType = node.nodeType;//获取dom元素类型
            let _vnode = null;
    
            if (nodeType === 1) {
                let nodeName = node.nodeName;//获取dom标签名
                let attrs = node.attributes;//获取dom属性【获取到的是一个伪数组】
                let _attrObj = {};// 定义存储属性的对象
                for (let i = 0; i < attrs.length; i++) {
                    _attrObj[attrs[i].nodeName] = attrs[i].nodeValue; // 以属性名为key,属性值为value
                }
                _vnode = new vNode(nodeName, _attrObj, undefined, nodeType); // 存一下
    
                let childNodes = node.childNodes; // 拿到子元素
                for (let i = 0; i < childNodes.length; i++) {
                    _vnode.appendChildArr(getVNode(childNodes[i])); // 递归
                }
            } else if (nodeType === 3) {
                _vnode = new vNode(undefined, undefined, node.nodeValue, nodeType);
            }
    
            return _vnode;
        }
    
        let vRoot = getVNode(root);
        console.log('虚拟dom', vRoot);
    </script>
    

    OK,我们好说歹说,也算简单的实现了虚拟dom,所以接下来,我们要做的就是,我们怎么给转换回去,毕竟不能干一半是不是。

    其实转换回来也简单,大致分以下几步:

    1. 拿到虚拟dom对象之后,首先就是拿到type,就是节点类型。

    2. 然后就还是判断,节点类型如果是 1,那就直接创建文本节点了:

      document.createTextNode(node.value)// 把节点的值穿进去就行了
      
    3. 如果是元素节点 3

      • 首先根据标签名创建一个dom:

        document.createElement(vnode.tag); 
        
      • 然后呢,就是拿到存着属性的对象,然后遍历它,通过setAttribute来给创建的这个dom标签设置属性。

      • 最后属性也设置完了,那就在去遍历children数组,以同样的方法依法炮制它的子节点,然后通过appendChild的方式给插到这个标签里。

        所以这里,就还是递归,嘿嘿。

    说到这里,我们就来看一下转换成真实dom的完整代码:

    // 将虚拟dom转换为真实的dom
    const parseNode = (vnode) => {
        let type = vnode.type; // 获取虚拟dom的type类型
        let _node = null;
    
        if (type === 3) {
            return document.createTextNode(vnode.value); // 创建文本节点
        } else if (type === 1) {
            _node = document.createElement(vnode.tag); // 创建标签
            let attrs = vnode.attrs;
            // 遍历属性对象
            Object.keys(attrs).forEach(key => {
                let attrName = key;
                let attrValue = attrs[key];
                _node.setAttribute(attrName, attrValue); // 设置属性
            })
        }
        // 子元素
        let children = vnode.children;
        children.forEach(item => {
            _node.appendChild(parseNode(item));//递归遍历子节点然后插入到父节点里
        });
        return _node;
    }
    
    let rRoot = parseNode(vRoot);
    console.log('虚拟dom转换的真实dom', rRoot);
    

    这就是我这篇博客要讲的内容了,唉,想起来明天还要加班【'mmp 艹 艹 艹 ',咳咳,大家看,这是我写的一个字符串。】

    下一篇博客的话,我们简简单单来说一下,Vue怎么把一个对象搞成响应式的。

    传送门:简单实现Vue中的响应式对象

    展开全文
  • vue 虚拟DOM的原理

    2020-10-14 17:29:51
    主要介绍了vue 虚拟DOM的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • vue 虚拟dom(vdom) 能写能用就行了呗,聊什么玩意儿的底层原理,知道1+1...简单点讲,在Vue的底层实现上,Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统,在状态改变时,Vue能够智能地计算出重新渲染组...
  • vue中的虚拟DOM原理

    千次阅读 2020-06-06 14:02:51
    虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点, 实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 相当于在js与DOM之间做了一个...
  • vue虚拟dom实现原理

    千次阅读 2018-11-26 11:21:04
    1,数据和模板相结合生成虚拟dom 2,虚拟dom转化成真是dom渲染到页面上 3,当数据发生改变时,新的数据和模板相结合会生成新的虚拟dom 4,新旧虚拟dom进行比对找差异 5,找到差异后根据差异改变dom 6,老的虚拟...
  • 今天小编就为大家分享一篇解决vue虚拟dom,无法实时更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue虚拟dom实现

    2018-08-27 06:43:13
    vue和react使用虚拟dom原因,以及实现原理 virtual dom 是通过js实现的,将原本复杂的DOM操作全部放到virtual dom 中,执行速度会比真实的DOM操作要快,直接提高了效率和性能。 Virtual DOM 就是用一个原生的 JS ...
  • vue虚拟DOM详解

    千次阅读 2021-05-02 14:53:19
    1.虚拟DOM的概念 虚拟DOM的概念是通过状态生成一个虚拟节点树,然后使用虚拟节点数进行渲染。在渲染之前,会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比,只...虚拟DOMvue中主要提供与真实节点对应的虚拟
  • vue组件中数据发生变化,由于数据变化会触发setter,由于vue组件中数据的getter的作用,收集了依赖,setter触发会根据这些依赖,生成新的虚拟dom,然后对比新旧虚拟dom进行渲染。 react函数式组件思想 当你...
  • vue 虚拟dom和diff算法详解

    万次阅读 多人点赞 2021-02-23 16:23:54
    虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom ...
  • vue虚拟DOM是什么?vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在...
  • 前端面试之Vue虚拟Dom

    2021-06-06 21:15:54
    在面试的过程中,可能也会被问到对虚拟dom的理解,像这种面试题是比较宽泛的,面试官想知道你到底知道多少?既然是理解,那就只能是知无不言言无不尽,尽量组织下语言多说点,这样才显得专业素养比较高,接下来,我来...
  • vue虚拟dom,diff算法

    2022-02-10 19:28:16
    什么是虚拟dom? 虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DOM结构,因为不是真实的DOM,所以成为虚拟DOM。 为什么要用虚拟DOM来描述真实的DOM呢? 创建真实DOM成本比较高,如果用js对象来描述一个...
  • vue虚拟dom的解释

    2020-06-02 23:56:39
    vue虚拟dom的解释 一、什么是虚拟dom 虚拟dom就是用一个JS对象来描述一个DOM节点 vdom就是用javascript描述的dom的树形结构,这个树结构包含整个dom结构的信息 二、为什么要有虚拟dom 1、js和jquery操作dom冗余...
  • Vue 虚拟Dom diff算法

    2021-05-06 21:36:20
    虚拟dom是利用js描述元素与元素的关系,好处:是可以快速的渲染和高效的更新元素,提高浏览器的性能 diff算法: 基础虚拟DOM完成节点更新的方法 用js对象来表示真是的DOM树结构,创建一个虚拟DOM对象 当数据...
  • vue虚拟dom

    2020-03-23 21:38:02
    vue中,有一个虚拟dom树 的概念: 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步,用HTML分析器,分析HTML元素,构建一颗...
  • vue虚拟dom的理解

    2022-03-18 18:39:18
    虚拟dom本质上是个对象,用对象中的属性表示节点 一个简单的实例 模板---->渲染函数-->虚拟dom-->真实dom 模板:template中的html等代码 渲染函数:vue把模板编译成渲染函数,渲染函数是用来生成...
  • Vue虚拟Dom和Diff原理

    2021-01-08 16:58:53
    1.什么是Virtral DOM? Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM...对于虚拟DOM,咱们来看一个简单的实例,就是下图所示的这个,详细
  • vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <!-- ... --> [removed]  ...
  • Vue 虚拟DOM与key属性

    千次阅读 2018-12-04 22:30:34
    Vue中的复用与key元素 因为它是 Vue 识别节点的一个通用机制,key Vue会尽可能高效的渲染元素,通常会复用已有的元素,而不是从头开始渲染。 1.v-if中的key &amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;...
  • vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树 2.为什么需要虚拟dom? 在vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建...
  • vue源码(五)-vue虚拟dom 一、概念 虚拟DOM(Virtual DOM)是对DOM的JS抽象表示,它们是JS对象,能够描述DOM结构和关系。应用程序 的各种状态变化会作用于虚拟DOM,最终映射到DOM上。 二、优点 虚拟DOM轻量、快速:当...
  • Vue基础(实现虚拟dom转换成真实DOM)

    千次阅读 2021-12-14 16:40:29
    Vue组件data为什么必须是个函数? 每次使用组件时都会对组件进行实例化操作,并且调用data函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响...computed和watch都是基于Watcher来实现的 computed

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,444
精华内容 12,577
关键字:

vue虚拟dom怎么实现的