精华内容
下载资源
问答
  • vue 虚拟DOM的原理

    2020-10-14 17:29:51
    主要介绍了vue 虚拟DOM的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • vue 虚拟domIn this article, we do a dive into the virtual dom in Vue.js 3, and how we can traverse it with the goal of finding a specific component (or what we will call a vnode - more on this soon)....

    vue 虚拟dom

    In this article, we do a dive into the virtual dom in Vue.js 3, and how we can traverse it with the goal of finding a specific component (or what we will call a vnode - more on this soon).

    在本文中,我们将深入研究Vue.js 3中的虚拟dom ,以及如何遍历虚拟dom ,以期找到一个特定的组件(或称为vnode -稍后将对此进行更多介绍)。

    Most of the time, you don’t need to think about how Vue internally represents your components. Some libraries do make sure of this though — one such library is Vue Test Utils and it’s findComponent function. Another such use case is the Vue DevTools, which show you the component hierarchy for your application, seen on the left hand side of this screenshot.

    大多数时候,您无需考虑Vue在内部如何表示您的组件。 但是某些库确实确保了这一点– Vue Test Utils是其中一个库,它是findComponent函数。 另一个这样的用例是Vue DevTools,它显示了您应用程序的组件层次结构,如此屏幕截图的左侧所示。

    Image for post

    Note: this is a technical article. While I will do my best to explain how everything works, the only real way to fully grasp this is to write your own code and console.log a lot, to see what's really happening. This is often the nature of the type of recursive algorithm we will be writing.

    注意:这是一篇技术文章。 尽管我将尽最大努力解释一切工作原理,但要完全掌握这一点的唯一真正方法是编写大量自己的代码和console.log ,以查看实际情况。 这通常是我们将要编写的递归算法类型的本质。

    An alternative would be to watch the accompanying screencast, will I will make free indefinitely. You can find the source code for this example here.

    另一种选择是观看随附的截屏视频 ,我将无限期免费提供。 您可以在此处找到此示例源代码

    Image for post
    Interested in advanced content for Vue.js 3? Check out my course and weekly screencasts on https://vuejs-course.com.
    对Vue.js 3的高级内容感兴趣吗? 在https://vuejs-course.com上查看我的课程和每周的屏幕录像。

    虚拟DOM (The Virtual DOM)

    For various reasons, one of which is performance, Vue keeps an internal representation of the component hierarchy. This is called a Virtual DOM (VDOM). When something changes (for example a prop) Vue will figure out if something needs to be updated, calculate the new representation, and finally, update the DOM. A trivial example might be:

    由于各种原因,其中之一就是性能,Vue保留了组件层次结构的内部表示。 这称为虚拟DOM(VDOM)。 当某些内容发生变化(例如道具)时,Vue会确定是否需要更新某些内容,计算新的表示形式,最后更新DOM。 一个简单的例子可能是:

    It could be represented like this:

    可以这样表示:

    - div 
    - span (show: true)
    - 'Visible'

    So it would be HTMLDivElement -> HTMLSpanElement -> TextNode. If show becomes false, Vue would update it’s Virtual DOM:

    因此它将是HTMLDivElement -> HTMLSpanElement -> TextNode 。 如果show变成false ,Vue将更新它的虚拟DOM:

    - div 
    - span (show: false)
    - 'Visible'

    Then, finally, Vue would update the DOM, removing the <span>.

    然后,最后,Vue将更新DOM,删除<span>

    我们的目标— findComponent (Our Goal — findComponent)

    Our goal will be to implement a subset of findComponent, part of the Vue Test Utils API. We will write something like this:

    我们的目标是实现findComponent的子集,它是Vue Test Utils API的一部分。 我们将这样写:

    To have a working findComponent function, we need to traverse the Virtual DOM, a tree like structure of arbitrary depth. Let's get started.

    要拥有一个有效的findComponent函数,我们需要遍历Virtual DOM,这是一个任意深度的树状结构。 让我们开始吧。

    检查组件内部 (Inspecting the Component Internals)

    If you would like to follow along, you can grab the source code here. We will just use Node.js (v14, so we can use the ? or "optional chaining" operator). You will need Vue, jsdom and jsdom-global installed.

    如果您想继续学习,可以在此处获取源代码。 我们将仅使用Node.js(v14,因此我们可以使用?或“可选链接”运算符)。 您将需要安装Vue,jsdom和jsdom-global。

    Start with setting up a simple app with some components:

    首先设置具有一些组件的简单应用程序:

    Some of the components have data and props - this will be useful as we investigate the Virtual DOM Vue creates for our app.

    其中一些组件具有dataprops -当我们调查为应用程序创建的Virtual DOM Vue时,这将很有用。

    If you go ahead and do either console.log(app) or console.log(Object.keys(app)), you don't see anything - just {}. Object.keys will only show enumerable properties - ones that show up in a for...of loop. There are some hidden non enumerable properties, though, which we can console.log. Try doing console.log(app.$). You get a whole bunch of information:

    如果继续执行console.log(app)console.log(Object.keys(app)) ,则看不到任何内容-仅{}Object.keys将仅显示可枚举的属性-出现在for...of循环中的属性。 但是,有一些隐藏的不可枚举的属性,我们可以使用console.log 。 尝试做console.log(app.$) 。 您会获得大量信息:

    <ref *1> { 
    uid: 0,
    vnode: {
    __v_isVNode: true,
    __v_skip: true,
    type: {
    name: 'C',
    data: [Function: data],
    render: [Function: render],
    __props: []
    }, // hundreds of lines ...

    You can do console.log(Object.keys(app.$)) to have a summary of what's available:

    您可以执行console.log(Object.keys(app.$))来总结可用的内容:

    Press ENTER or type command to continue 
    [
    'uid', 'vnode', 'type', 'parent', 'appContext', 'root', 'next', 'subTree', 'update', 'render', 'proxy', 'withProxy', 'effects', 'provides', 'accessCache', 'renderCache', 'ctx', 'data', 'props', 'attrs', 'slots', 'refs', 'setupState', 'setupContext', 'suspense', 'asyncDep', 'asyncResolved', 'isMounted', 'isUnmounted', 'isDeactivated', 'bc', 'c', 'bm', 'm', 'bu', 'u', 'um', 'bum', 'da', 'a', 'rtg', 'rtc', 'ec', 'emit', 'emitted'
    ]

    It’s obvious what some of the properties do — slots and data for example. suspense is used for the new <Suspense> feature. emit is something every Vue dev knows, same as attrs. bc, c, bm etc are lifecycle hooks - bc is beforeCreate, c is created. There are some internal only lifecycle hooks, like rtg - it's renderTriggered, used for updates after something changes and causes a re-render, like props or data changing.

    显而易见,某些属性的作用-例如slotsdatasuspense用于新的<Suspense>功能。 emit是每个Vue开发人员都知道的东西,与attrsbccbm等是生命周期钩- bcbeforeCreateccreated 。 有一些内部唯一的生命周期挂钩,例如rtg它是renderTriggered ,用于在发生某些更改并导致重新渲染(例如propsdata更改)后进行更新。

    We are interested in vnode, subTree, component, type and children.

    我们对vnodesubTreecomponenttypechildren感兴趣。

    比较组件 (Comparing Components)

    Let’s take a look at vnode. Again it has many properties, the two we will look at are type and component:

    让我们看一下vnode 。 同样,它具有许多属性,我们将要研究的两个是typecomponent

    console.log(app.$.vnode.component) <ref *1> { 
    uid: 0,
    vnode: {
    __v_isVNode: true,
    __v_skip: true,
    type: {
    name: 'C',
    data: [Function: data],
    render: [Function: render],
    __props: []
    }, // ... many more things ... } }

    type is of interest! It matches the C component we defined earlier. You can see it has a data function (we defined one with a msg variable). In fact, if we compare this to C:

    type很有趣! 它与我们前面定义的C组件匹配。 您可以看到它具有data功能(我们使用msg变量定义了一个功能)。 实际上,如果我们将此与C进行比较:

    console.log(C === app.$.vnode.component.type) //=> true

    It matches! We can also do the same comparison with vnode.type: console.log(C === app.$.vnode.type) //=> true. I am not entirely clear on why there is two properties pointing to the same object. I am still learning. Anyway, we identified a way to match components.

    它匹配! 我们还可以使用vnode.type进行相同的比较: console.log(C === app.$.vnode.type) //=> true 。 我不清楚为什么有两个属性指向同一个对象。 我还在学习。 无论如何,我们找到了一种匹配组件的方法。

    深入研究虚拟DOM (Diving Deeper into the Virtual DOM)

    After a little trial and error, you can eventually find A like this:

    经过一番尝试和错误之后,您最终可以找到这样的A

    console.log( 
    app.$
    .subTree.children[0].component
    .subTree.children[0].component.type === A) //=> true

    In this case, the <div> node would have a subTree.children array with a length of 2.

    在这种情况下, <div>节点将具有一个subTree.children数组,其长度为2。

    Now we know the recursive nature of the Virtual DOM, we can write a recursive solution! It goes subTree -> children -> component and so on.

    现在我们知道了虚拟DOM的递归性质,我们可以编写一个递归解决方案! 它进入subTree -> children -> component等。

    编写findComponent (Writing findComponent)

    I am using Node.js v14, which supports optional chaining: subTree?.children for example. Before we write a recursive find function, we need some way to know if we have found the component: matches:

    我正在使用Node.js v14,它支持可选链接:例如subTree?.children 。 在编写递归查找函数之前,我们需要某种方式来知道是否找到了该组件: matches

    function matches(vnode, target) { 
    if (!vnode) {
    return false
    }
    return vnode.type === target
    }

    You could write vnode?.type === target but I like the verbose one a little more.

    您可以编写vnode?.type === target但我更喜欢冗长的代码。

    We will write two functions. findComponent, which will be the public API that users call, and find, an internal, recursive function.

    我们将编写两个函数。 findComponent ,它将是用户调用的公共API并find内部的递归函数。

    Let’s start with the public API:

    让我们从公共API开始:

    function findComponent(comp, { within }) { 
    const result = find([within.$], comp) if (result) {
    return result
    }
    }

    The third argument is an empty array — because are writing a recursive function, we need some place to keep the components we have found that match the target. We will store them in this array, passing it to each recursive call of find. This way we avoid mutating an array - I find less mutation leads to less bugs (your mileage may vary).

    第三个参数是一个空数组-因为要编写一个递归函数,我们需要一些地方来保持我们发现的与目标匹配的组件。 我们将它们存储在此数组中,并将其传递给find每个递归调用。 这样,我们避免了对数组进行变异-我发现较少的变异导致较少的错误(您的里程可能有所不同)。

    递归查找 (Recursive find)

    When writing a recursive function, you need to have some way to exit, or you will get stuck in an endless loop. Let’s start with that:

    在编写递归函数时,您需要某种退出方法,否则您将陷入无限循环。 让我们开始:

    function find(vnodes, target) { 
    if (!Array.isArray(vnodes)) {
    return
    }
    }

    If we have recursed all the way to the bottom of the Virtual DOM (and checked all vnodes in the process) we just return. This will ensure we do not get stuck in a loop. If we run this now:

    如果我们一直重复到虚拟DOM的底部(并检查了进程中的所有vnode),我们将返回。 这将确保我们不会陷入循环。 如果我们现在运行此命令:

    const result = findComponent(A, { within: app }) //=> undefined

    While traversing the vnodes, if we find a matching component, we will just return it. If we did not find a matching component, we may need to dive deeper by checking if vnode.subTree.children is defined. Finally, if it's not, we return the accumulator.

    在遍历vnode时,如果找到匹配的组件,则将其返回。 如果找不到匹配的组件,则可能需要检查vnode.subTree.children是否已定义,从而更深入地研究。 最后,如果不是,我们返回累加器。

    function find(vnodes, target) {
    if (!Array.isArray(vnodes)) {
    return
    }
    return vnodes.reduce((acc, vnode) => {
    if (matches(vnode, target)) {
    return vnode
    }
    if (vnode?.subTree?.children) {
    return find(vnode.subTree.children, target)
    }
    return acc
    }, {})
    }

    If you do a console.log inside of the if (vnode?.subTree?.children) { block, you will see we are now at the B component subTree. Remember, the path to A is as follows:

    如果在if (vnode?.subTree?.children) {块内执行console.log ,您将看到我们现在位于B组件子树中。 请记住,通往A的路径如下:

    app.$ 
    .subTree.children[0].component
    .subTree.children[0].component.type === A) //=> true

    By calling find again: find(vnode.subTree.children, target), the first argument to find on the next iteration will be app.$.subTree.children, which is an array of vnodes. That means we need to do component.subTree.children on the next iteration of find - but we are only checking vnode.subTree.children. We need a check for vnode.component.subTree as well:

    通过再次调用findfind(vnode.subTree.children, target) ,在下一次迭代中find的第一个参数将是app.$.subTree.children ,它是vnodes的数组。 这意味着我们需要在find的下一个迭代中执行component.subTree.children但我们仅检查vnode.subTree.children 。 我们还需要检查vnode.component.subTree

    function find(vnodes, target) {
    if (!Array.isArray(vnodes)) {
    return
    }
    return vnodes.reduce((acc, vnode) => {
    if (matches(vnode, target)) {
    return vnode
    }
    if (vnode?.subTree?.children) {
    return find(vnode.subTree.children, target)
    }
    if (vnode?.component?.subTree) {
    return find(vnode.component.subTree.children, target)
    }
    return acc
    }, {})
    }

    And somewhat surprisingly, that’s it. const result = findComponent(A, { within: app }) now returns a reference to A. You can see it working like this:

    有点令人惊讶的是const result = findComponent(A, { within: app })现在返回对A的引用。 您可以看到它像这样工作:

    console.log( result.component.proxy.msg ) // => 'msg'

    If you have used Vue Test Utils before, you may recognise this in a slightly different syntax: wrapper.vm.msg, which is actually accessing the proxy internally (for Vue 3) and the vm for Vue 2. If you are using TypeScript, you may notice proxy does not show up as a valid type - that's because it is internal, not generally intended for use in regular applications, although some internal tools still use it, like Vue Test Utils and Vue DevTools.

    如果您以前使用过Vue Test Utils,则可能会以稍微不同的语法来识别这一点: wrapper.vm.msg ,它实际上是在内部访问proxy (对于Vue 3)和vm用于Vue2。如果使用TypeScript,您可能会注意到proxy未显示为有效类型-这是因为它是内部类型,通常不打算在常规应用程序中使用,尽管某些内部工具仍在使用它,例如Vue Test Utils和Vue DevTools。

    一个更完整的例子 (A More Complete Example)

    This implementation is far from perfect — there are more checks that need to be implemented. For example, this does not work with components using template instead of render, or <Suspense>. A more complete implementation can be found here in the Vue Test Utils source code.

    此实现远非完美-需要执行更多检查。 例如,这不适用于使用template而不是render<Suspense> 。 在Vue Test Utils源代码中可以找到更完整的实现。

    At the time of this article, the implementation there mutates an array instead of passing a new copy to each recursive call. You can see it here — the functions you want to look at are findAllVNodes and aggregateChildren.

    在撰写本文时,此处的实现是对数组进行突变,而不是将新副本传递给每个递归调用。 你可以看到它在这里 -你想看看功能中的是findAllVNodesaggregateChildren

    You can find the source code for this example here.

    您可以在此处找到此示例源代码

    Originally published at https://vuejs-course.com.

    最初发布在 https://vuejs-course.com

    翻译自: https://medium.com/js-dojo/diving-into-the-vue-3s-virtual-dom-a6b4744032ec

    vue 虚拟dom

    展开全文
  • VUE虚拟DOM简介

    2020-02-01 17:14:20
    vue 虚拟dom

    什么是虚拟DOM

    虚拟DOM就是通过状态生成一个虚拟节点树,然后使用虚拟节点树进行渲染,在渲染之前,会使用新的节点树和上一次生成进行对比,只渲染不同的部分。而虚拟节点树其实是由组件树建立起来的整个虚拟节点(Virtual Node,也经常成为vnode),如下图所示。
    在这里插入图片描述

    为什么要引入虚拟DOM

    大家应该都知道操作DOM是非常昂贵的,每操作一次DOM,页面就会重新渲染,对性能极不友好,所以就引入了虚拟DOM,状态的变化映射到虚拟节点树上,利用虚拟节点数进行渲染,这就大大减少了操作DOM,Vue在2.0开始引入了虚拟DOM,组件级别是一个Watcher实例,就是说即便一个组件内有10个节点使用了某个状态,但是只有一个watcher在观察着状态的变化,所以当状态变化时,只通知到组件,然后组件内部通过虚拟DOM进行对比与渲染。

    vue中的虚拟DOM

    在vue中,我们使用模板来描述状态与视图之间的映射关系,vue通过模板编译转换成render函数,然后利用render函数生成vnode,使用这个vnode就可以渲染页面。
    在这里插入图片描述
    虚拟DOM的终极目标是将虚拟节点渲染到视图上,但是如果直接使用虚拟节点覆盖原节点,会有许多不必要的DOM操作,那么为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次徐然视图所使用的虚拟节点进行对比,找出真正需要更新的节点来进行DOM操作,如下图所示:
    在这里插入图片描述
    可以看出虚拟DOM在vue当中主要做了以下事情:

    • 提供与真实DOM节点所对应的虚拟节点vnode
    • 将虚拟节点vode和旧的虚拟节点oldVnode进行比较

    其实vnode就是一个很普通的对象,其属性保存着节点的各种信息,比如文本内容,子元素等,感兴趣的可以看我写的这篇文章vnode浅析~

    参考文献

    • 深入浅出 Vue.js
    展开全文
  • vue虚拟dom

    2020-09-10 16:43:12
    vue虚拟dom vue的虚拟dom并没有刷新页面,![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163724981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9...

    vue虚拟dom

    vue的虚拟dom并没有刷新页面,![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163724981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amlhbmdwZW5n,size_16,color_FFFFFF,t_70#pic_center)
    

    if、else切换后,并没有让输入框的内容消失。是因为vue的虚拟dom会检测input和lable是否在if和else中都存在,存在就把相关属性更新显示,表现出来就是改变了dom,其实并不是。
    而因为并未刷新,所以里面的value值还在。处理方法就是给input框增加key属性,当vue发现key值不一样时,不会进行虚拟dom的刷新而选择直接刷新。

    展开全文
  • vue虚拟DOM是什么?vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在...

    vue虚拟DOM是什么?vue的虚拟DOM的用法

    1、为什么需要虚拟DOM

    前面我们从零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过appendChild函数将真实的DOM插入到页面。

    虽然采用的是文档碎片,但是操作的还是真实的DOM。

    而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图。

    所谓的虚拟DOM,其实就是用JS来模拟DOM结构,把DOM的变化操作放在JS层来做,尽量减少对DOM的操作(个人认为主要是因为操作JS比操作DOM快了不知道多少倍,JS运行效率高)。然后对比前后两次的虚拟DOM的变化,只重新渲染变化了的部分,而没有变化的部分则不会重新渲染。

    比如我们有如下的DOM结构。

    <ul id="list">
    
          <li class="item1">Item 1</li>
    
          <li class="item2">Item 2</li>
    
    </ul>

    我们完全可以用JS对象模拟上面的DOM结构,模拟后就会变成下面的这种结构。

    varvdom = {
    
        tag: 'ul',
    
        attr: {
    
            id: 'list',
    
        },
    
        children: [
    
            {
    
                tag: 'li',
    
                attrs: {
    
                    className: 'item',
    
                    children: ['Item 1']
    
                },
    
            },
    
            {
    
                tag: 'li',
    
                attrs: {
    
                    className: 'item',
    
                    children: ['Item 2']
    
                }
    
            }
    
        ]
    
    
    
    }

    必须要注意一点的是:JS模拟的DOM结构并没有模拟所有DOM节点上的属性、方法(因为DOM节点本身的属性非常多,这也是DOM操作耗性能的一个点),而是只模拟了一部分和数据操作相关的属性和方法。

    2、vue虚拟DOM的用法

    Vue在2.0版本引入了vdom。其vdom是基于snabbdom库所做的修改。snabbdom是一个开源的vdom库。

    snabbdom的主要作用就是将传入的JS模拟的DOM结构转换成虚拟的DOM节点。

    先通过其中的h函数将JS模拟的DOM结构转换成虚拟DOM之后,再通过其中的patch函数将虚拟DOM转换成真实的DOM渲染到页面中。

    为了保证页面的最小化渲染,snabbdom引入了Diff算法,通过Diff算法找出前后两个虚拟DOM之间的差异,只更新改变了的DOM节点,而不重新渲染为改变的DOM节点。

    在这里我不打算分析snabbdom的源码来解释到底snabbdom是怎么干成这件事的(主要是现阶段没到那个水平,哈哈。再者已经有很多同学做过类似的分析,相关链接附在文章末尾)。

    我会从snabbdom的使用角度来看Vue中的虚拟DOM是如何完成视图渲染的。

    我们先看一下snabbdom中两个核心API的功能。

    h()函数:将传入的JS模拟的DOM结构模板转换成vnode。(vnode是一个纯JS对象)

    patch()函数:将虚拟的DOM节点渲染到页面中。

    我们提供一个实例来看一下snabbdom的实际作用。

    <!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>
    
        <p id="container"></p>
    
        <button id="btn-change">change</button>
    
        <!-- 引入snabbdom库,先不必纠结为什么这样引入,以及每个文件的作用。本篇文章只是介绍一下虚拟DOM的工作方式,并不涉及原理解析
    
        主要是因为博主目前功力尚浅,有兴趣的小伙伴可以另行研究 -->
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
    
        <script>
    
            //定义patch函数
    
            varpatch = snabbdom.init([
    
                snabbdom_class,
    
                snabbdom_props,
    
                snabbdom_style,
    
                snabbdom_eventlisteners
    
            ])        //定义h函数
    
            varh = snabbdom.h;        //生成一个vnode
    
            varvnode = h('ul#list',{},[
    
                h('li.item',{},['Item 1']),
    
                h('li.item',{},['Item 2']),
    
            ])
    
         //console.log(vnode);
    
            //获取container
    
            varcontainer = document.getElementById('container');
    
            patch(container,vnode);//初次渲染
    
    
    
            varbtn = document.getElementById('btn-change');
    
            btn.onclick = function() {           
    
            varnewVnode = h('ul#list',{},[
    
                    h('li.item',{},['Item 1']),
    
                    h('li.item',{},['Item B']),
    
                    h('li.item',{},['Item 3']),
    
                ])
    
                patch(vnode,newVnode);//再次渲染
    
                vnode = newVnode;//将修改后的newVnode赋值给vnode             
    
                }   
    
                </script>
    
                </body>
    
                </html>

     

    展开全文
  • 主要介绍了vue 虚拟dom的patch源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 简单模拟Vue虚拟DOM

    2020-08-10 17:36:17
    简单模拟Vue虚拟DOM <script> // 简单模拟Vue虚拟DOM function vElement(tageName, prop, children) { //判断调用者是否为vElement的实例 if(!(this instanceof vElement)) { return new vElement...
  • vue虚拟dom会生成吗 虚拟密码生成器 (Dummy Password Generator) A (not so) dummy password generator built with Vue. Vue内置的(不是)虚拟密码生成器。 View demo 查看演示 Download Source 下载源 Dummy ...
  • Vue虚拟DOM详解

    2019-09-19 22:02:06
    Vue虚拟DOM详解 模板转换成视图的过程: Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点;在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher ...
  • vue虚拟dom理解

    2020-07-20 14:33:10
    vue虚拟dom理解 虚拟dom作用及实现流程: 虚拟dom产生在beforeMount和mounted之间,当某个数据改变时,视图是局部刷新而不是整个重新渲染,如何精准的找到数据对应的视图并进行更新呢?那就需要拿到数据改变前后的...
  • vue源码(五)-vue虚拟dom 一、概念 虚拟DOM(Virtual DOM)是对DOM的JS抽象表示,它们是JS对象,能够描述DOM结构和关系。应用程序 的各种状态变化会作用于虚拟DOM,最终映射到DOM上。 二、优点 虚拟DOM轻量、快速:当...
  • Vue虚拟DOM实现分析
  • vue 虚拟键盘组件 虚拟流 (vue-virtual-stream) A virtualized list component for chats, comment lists and streams in general. 通常用于聊天,评论列表和流的虚拟列表组件。 This Vue component can be used ...
  • Vue 虚拟DOM和Diff算法

    千次阅读 2019-04-12 10:44:26
    Vue 虚拟DOM Diff算法思考什么是虚拟DOM为什么使用虚拟DOM真实DOM和虚拟DOM的区别DOM Diff当数据发生变化时,Vue是怎么更新节点的?1. patch2. patchVnode3. updateChildren总结 思考 使用了Vue,使用了React,大家...
  • 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的实现原理

    千次阅读 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虚拟DOM

    2020-03-23 22:29:29
    浅谈vue虚拟DOM 虚拟DOM可以看作是一个使用javascript模拟了DOM的树形结构,这个树结构包含整个DOM结构的信息。 上面的DOM结构,不论是标签名称还是标签的属性或标签的子集,都会对应在下面的树结构(其实就是一个...
  • vue虚拟dom和key属性

    2020-03-26 13:32:16
    vue虚拟dom和key属性 虚拟dom 频繁且复杂的dom操作通常是前端性能瓶颈的产生点,Vue提供了虚拟dom的解决办法 虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许...
  • Vue 虚拟DOM 和 Diff算法

    2019-07-29 10:54:07
    Vue 虚拟DOM 和 Diff算法 vue2.0加入了virtual dom,有点向react靠拢的意思。vue的diff位于patch.js文件中,复杂度为O(n)。 了解diff过程,我们先从虚拟dom开始。 虚拟dom 所谓的virtual dom,也就是虚拟节点。它...
  • vue虚拟Dom和diff算法

    2021-01-07 20:20:14
    一.vue虚拟Dom 什么是虚拟dom? 用js来模拟DOM中的节点。一个能代表dom树的对象,通常含有标签名,标签上的属性,事件监听和子元素们,以及其他属性 为什么使用虚拟dom Web界面由DOM树(树的意思是数据结构)来构建...
  • 一一篇篇文文章章带带你你搞搞懂懂Vue虚虚拟拟Dom与与diff算算法法 这篇文章主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料文中通过示例代码介绍的非常详细对大家 的学习或者工作 有一定的参考学习价值需要的...
  • 主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue虚拟DOM

    2020-05-03 11:34:43
    Vue虚拟 dom 介绍 虚拟 dom 核心思想:对复杂的文档 DOM 结构,提供一种方便的工具,进行最小化地 DOM 操作 具体操作: 内存中会生成一颗虚拟 dom 树,并将内存中的虚拟 dom 树初始化渲染成真实 dom 树 当...
  • VUE 虚拟DOM

    2021-02-27 13:44:57
    Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数(render)。 渲染函数被调用的时候就会渲染并且返回一个虚拟DOM的树。 当有了这个虚拟的DOM树后,再交给一个Patch函数,负责把这些虚拟DOM施加到真实的...
  • Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom的理解 什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数,每个render函数...
  • vue虚拟DOM

    2021-03-03 14:26:24
    vue.js将template模版编译,转换成渲染函数(render),每执行一个渲染函数就会生成一个虚拟DOM patch:将vnode渲染成真实的DOM。通过对比新旧节点,找到需要更新的,更新到真实的DOM视图。 patch patch方法中,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,396
精华内容 2,158
关键字:

vue虚拟

vue 订阅