精华内容
下载资源
问答
  • vnode

    2019-08-02 12:26:00
    获取vnode对象 vm.$slots对象下的所有值 vm.$scopedSlots对象的值返回一个函数,该函数执行后返回vnode对象 directives自定义指令中钩子函数的参数3和参数4,例如钩子函数bind:bind: function (el, binding, vnode...

    获取vnode对象

    • vm.$slots对象下的所有值
    • vm.$scopedSlots对象的值返回一个函数,该函数执行后返回vnode对象
    • directives自定义指令中钩子函数的参数3和参数4,例如钩子函数bind:bind: function (el, binding, vnode, oldVnode) { ... )
    • render渲染函数的参数1是一个返回vnode的函数,例如这里的参数h:render: function (h) { ... }
    • 函数式组件context.children返回一个vnode数组
    • 函数式组件context.slots返回一个函数,该函数运行后返回一个vnode组成的对象

    ————————————————————————————————————————————————————

    vnode构造函数传参

    tag?: string,

    data?: VNodeData,

    children?: ?Array,

    text?: string,

    elm?: Node,

    context?: Component,

    • 函数式组件和普通组件中该值不同

    componentOptions?: VNodeComponentOptions,

    asyncFactory?: Function

    ————————————————————————————————————————————————————

    vnode对象的属性

    this.tag = tag

    this.data = data

    • 包含以下
      • attrs
      • class:通过v-bind绑定在组件上的class,格式和v-bind相同
      • staticClass:通过字符串绑定在组件上的class
      • hook
      • model
      • on
      • props
      • staticStyle:原生样式对象,通过v-bind绑定到style上的这里也会体现
      • style:通过v-bind绑定到组件上的对象

    this.children = children

    • 当表单项插入el-form时,该值为undefined

    this.text = text

    this.elm = elm

    this.ns = undefined

    this.context = context

    • rendered in this component's scope(在此组件的范围内呈现)

    this.fnContext = undefined

    • real context vm for functional nodes(功能节点的实上下文虚拟机)

    this.fnOptions = undefined

    • for SSR caching(用于SSR缓存)

    this.fnScopeId = undefined

    • functional scope id support(功能范围ID支持)

    this.key = data && data.key

    this.componentOptions = componentOptions

    this.componentInstance = undefined

    • component instance(组件实例)

    this.parent = undefined

    • component placeholder node(组件占位符节点)

    this.raw = false

    • contains raw HTML? (server only)(包含原始HTML)

    this.isStatic = false

    • hoisted static node(吊装静节点)

    this.isRootInsert = true

    • necessary for enter transition check(输入转换检查所必需的)

    this.isComment = false

    • empty comment placeholder?(空注释占位符)

    this.isCloned = false

    • is a cloned node?(是克隆的节点)

    this.isOnce = false

    • is a v-once node?

    this.asyncFactory = asyncFactory

    • async component factory function(异步组件工厂函数)

    this.asyncMeta = undefined

    this.isAsyncPlaceholder = false

    转载于:https://www.cnblogs.com/qq3279338858/p/11287888.html

    展开全文
  • VNode简介

    千次阅读 2019-09-20 16:51:26
    VNode说明&作用 VNode是什么 VNode是JavaScript对象。VNode表示Virtual DOM,用JavaScript对象来描述真实的DOM把DOM标签,属性,内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: '...

    VNode说明&作用

    VNode是什么

    VNode是JavaScript对象。VNode表示Virtual DOM,用JavaScript对象来描述真实的DOMDOM标签,属性,内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: 'Hello Kitty', age: 1, children: null}

    VNode的作用

    通过rendertemplate模版描述成VNode,然后进行一系列操作之后形成真实的DOM进行挂载。

    VNode的优点
    1. 兼容性强,不受执行环境的影响。VNode因为是JS对象,不管Node还是浏览器,都可以统一操作,从而获得了服务端渲染、原生渲染、手写渲染函数等能力。
    2. 减少操作DOM,任何页面的变化,都只使用VNode进行操作对比,只需要在最后一步挂载更新DOM,不需要频繁操作DOM,从而提高页面性能。

    VNode如何生成

    Vue源码中,VNode是通过一个构造函数生成的。

    export default class VNode {
      constructor (
        tag?: string,
        data?: VNodeData,
        children?: ?Array<VNode>,
        text?: string,
        elm?: Node,
        context?: Component,
        componentOptions?: VNodeComponentOptions,
        asyncFactory?: Function
      ) {
        this.tag = tag
        this.data = data
        this.children = children
        this.text = text
        this.elm = elm
        this.ns = undefined
        this.context = context
        this.fnContext = undefined
        this.fnOptions = undefined
        this.fnScopeId = 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
        this.asyncFactory = asyncFactory
        this.asyncMeta = undefined
        this.isAsyncPlaceholder = false
      }
    }
    

    VNode构造函数看起来十分简单,先走一遍VNode的生成过程。

    // 模版
    <a class="demo" style="color: red" href="#">
        generator VNode
    </a>
    // VNode描述
    {
      tag: 'a',
      data: {
        calss: 'demo',
        attrs: {
          href: '#'
        },
        style: {
          color: 'red'
        }
      },
      children: ['generator VNode']
    }
    

    这个JS对象,已经囊括了整个模板的所有信息,完全可以根据这个对象来构造真实DOM

    VNode存放哪些信息

    1. data:存储节点的属性,绑定的事件等
    2. elm:真实DOM 节点
    3. context:渲染这个模板的上下文对象
    4. isStatic:是否是静态节点

    VNode存放

    在初始化完选项,解析完模板之后,就需要挂载DOM了。此时就需要生成VNode,才能根据 VNode生成DOM然后挂载。创建出来的VNode需要被存起来,主要存放在三个位置:parent_vnode$vnode

    展开全文
  • Vnode节点

    2020-12-23 11:13:07
    VNode类源码 export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>; text: string | void; elm: Node | void; ns: string | void; context: Component ...

    VNode类源码

    export default class VNode {
      tag: string | void;
      data: VNodeData | void;
      children: ?Array<VNode>;
      text: string | void;
      elm: Node | void;
      ns: string | void;
      context: Component | void; // rendered in this component's scope
      functionalContext: Component | void; // only for functional component root nodes
      key: string | number | void;
      componentOptions: VNodeComponentOptions | void;
      componentInstance: Component | void; // component instance
      parent: VNode | void; // component placeholder node
      raw: boolean; // contains raw HTML? (server only)
      isStatic: boolean; // hoisted static node
      isRootInsert: boolean; // necessary for enter transition check
      isComment: boolean; // empty comment placeholder?
      isCloned: boolean; // is a cloned node?
      isOnce: boolean; // is a v-once node?
    constructor (
        tag?: string,
        data?: VNodeData,
        children?: ?Array<VNode>,
        text?: string,
        elm?: Node,
        context?: Component,
        componentOptions?: VNodeComponentOptions
      ) {
        /*当前节点的标签名*/
        this.tag = tag
        /*当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息*/
        this.data = data
        /*当前节点的子节点,是一个数组*/
        this.children = children
        /*当前节点的文本*/
        this.text = text
        /*当前虚拟节点对应的真实dom节点*/
        this.elm = elm
        /*当前节点的名字空间*/
        this.ns = undefined
        /*编译作用域*/
        this.context = context
        /*函数化组件作用域*/
        this.functionalContext = undefined
        /*节点的key属性,被当作节点的标志,用以优化*/
        this.key = data && data.key
        /*组件的option选项*/
        this.componentOptions = componentOptions
        /*当前节点对应的组件的实例*/
        this.componentInstance = undefined
        /*当前节点的父节点*/
        this.parent = undefined
        /*简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false*/
        this.raw = false
        /*静态节点标志*/
        this.isStatic = false
        /*是否作为跟节点插入*/
        this.isRootInsert = true
        /*是否为注释节点*/
        this.isComment = false
        /*是否为克隆节点*/
        this.isCloned = false
        /*是否有v-once指令*/
        this.isOnce = false
      }
    
      // DEPRECATED: alias for componentInstance for backwards compat.
      /* istanbul ignore next */
      get child (): Component | void {
        return this.componentInstance
      }
    }
    
    展开全文
  • vnode-源码

    2021-03-21 12:18:42
    vnode虚拟节点状态管理器 预计该项目的导出签名不会发生重大变化。该项目遵循严格的,对导出签名的任何更改都将导致对其他签名进行次要版本更改,或者对签名进行修改或删除对主版本进行更改。 贡献 请参阅 行为守则 ...
  • VNode reuse

    2021-01-06 07:43:01
    d like to reuse the VNode from before rather than recreating it with <code>h()</code>. However, it seems that asm-dom does some subtle things with VNodes during patching that make this complicated. I ...
  • 什么是VNode

    千次阅读 2020-11-25 15:06:54
    什么是VNode 在vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素。 例如,DOM元素有元素节点,文本节点,注释节点等,vnode实例也会对应着有元素...

    什么是VNode

    在vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素。

    例如,DOM元素有元素节点,文本节点,注释节点等,vnode实例也会对应着有元素节点和文本节点和注释节点。

    VNode类代码如下:

     export default class VNode {
        constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
           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.functionalOptions = undefined
            this.functionalScopeId = 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
            this.asyncFactory = asyncFactory
            this.asyncMeta = undefined
            this.isAsyncPlaceholder = false
        }
        get child() {
            return this.componentInstance
        }
     }
    

    从上面的代码可以看出,vnode只是一个名字,本质上来说就是一个普通的JavaScript对象,是从VNode类实例化的对象。我们用这个JavaScript对象来描述一个真实DOM元素的话,那么该DOM元素上的所有属性在VNode这个对象上都存在对应得属性。

    简单来说,vnode可以理解成节点描述对象,他描述了应该怎样去创建真实的DOM节点。
    例如,tag表示一个元素节点的名称,text表示一个文本节点的文本,children表示子节点等。vnode表示一个真实的DOM元素,所有真实的DOM节点都是用vnode创建并插入到页面中。

    VNode创建DOM并插入到视图
    在这里插入图片描述

    图中展示了使用vnode创建真实的DOM并渲染到视图的过程。可以得知,vnode和视图是一一对应的。我们可以把vnode理解成JavaScript对象版本的DOM元素。

    渲染视图的过程是先创建vnode,然后在使用vnode去生成真实的DOM元素,最后插入到页面渲染视图。

    VNode的作用

    由于每次渲染视图时都是先创建vnode,然后使用它创建的真实DOM插入到页面中,所以可以将上一次渲染视图时先所创建的vnode先缓存起来,之后每当需要重新渲染视图时,将新创建的vnode和上一次缓存的vnode对比,查看他们之间有哪些不一样的地方,找出不一样的地方并基于此去修改真实的DOM。

    Vue.js目前对状态的侦测策略采用了中等粒度。当状态发生变化时,只通知到组件级别,然后组件内使用虚拟DOM来渲染视图。

    如图下所示,当某个状态发生变化时,只通知使用了这个状态的组件。也就是说,只要组件使用的众多状态中有一个发生了变化,那么整个组件就要重新渲染。

    变化侦测只通知到组件级别.PNG

    如果组件只有一个节点发生了变化,那么重新渲染整个组件的所有节点,很明显会造成很大的性能浪费。因此,对vnode惊醒缓存,并将上一次的缓存和当前创建的vnode对比,只更新有差异的节点就变得很重要。这也是vnode最重要的一个作用。

    VNode的类型

    vnode有很多不同的类型,有以下几种:

    注释节点
    文本节点
    元素节点
    组件节点
    函数式节点
    克隆节点

    前面介绍了vnode是一个JavaScript对象,不同类型的vnode之间其实属性不同,准确说是有效属性不同。因为当使用VNode类创建一个vnode时,通过参数为实例设置属性时,无效的属性会默认设置为undefined或者false。对于 vnode身上的无效属性,直接忽略就好。

    1.注释节点

    由于创建注释节点的过程非常简单,所以直接通过代码来介绍它有哪些属性:

        export const createEmptyVNode = text => {
            const node = new VNode()
            node.text = text;
            node.isComment = true;
            return node
        }
    

    一个注释节点只有两个有效属性 text 和 isComment。其余属性全是默认undefined或者false。

    例如一个真实的注释节点,所对应的vnode是下面的样子:

    // <!-- 注释节点 -->
    {
        text: "注释节点",
        isComment: true
    }
    

    2.文本节点

    文本节点的创建过程也非常简单,代码如下:

        export function createTextVNode(val) {
            return new VNode(undefined, undefined, undefined, String(val))
        }
    

    当文本类型的vnode被创建时,它只有一个text属性:

    {
        text: "文本节点"
    }
    

    3.克隆节点

    克隆节点是将现有节点的属性赋值到新节点中,让新创建的节点和被克隆的节点的属性保持一致,从而实现克隆效果。它的作用是优化静态节点和插槽节点(slot node)。

    以静态节点为例,当组件内某个状态发生变化后,当前组件会通过虚拟DOM重新渲染视图,静态节点因为它的内容不会改变,所以除了首次渲染需要执行渲染函数获取vnode之外,后续更新不需要执行渲染函数重新生成vnode。

    因此,这是就会使用创建克隆节点的方法将vnode克隆一份,使用克隆节点进行渲染。这样就不需要执行渲染函数生成新的静态节点的vnode,从而提升一定的性能。

    创建克隆节点的代码如下:

    export function cloneVNode(vnode, deep) {
            const cloned = new VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory)
            cloned.ns = vnode.ns
            cloned.isStatic = vnode.isStatic
            cloned.key = vnode.key
            cloned.isComment = vnode.isComment
            cloned.isCloned = true
            if (deep && vnode.children) {
                cloned.children = cloneVNodes(vnode.children)
            }
            return cloned
        }
    

    克隆现有节点,只需要将现有节点的属性全部赋值到新节点中。
    克隆节点和被克隆节点位移的区别是isCloned属性,克隆节点为true,被克隆的原始节点为false。

    4.元素节点

    元素节点通常会存在以下4中有效属性。

    tag:tag就是一个节点的名称,例如 p、ul、li和div等。
    data:改属性包含了一些节点上的数据,比如attrs、class和style等。
    children:当前节点的子节点列表。
    context:它是当前组件的Vue.js实例

    一个真实的元素节点,对应得vnode是下面这样:

        // <p><span>Hello</span><span>World</span></p>
        {
            children: [VNode, VNode],
            context: {...},
            data: {...},
            tag: "p",
            ...
        }
    

    5.组件节点

    组件节点和元素节点类似,有以下两个独有的属性。

    componentOptions:组件节点的选项参数,其中包含了propsData、tag和children等信息
    componentInstance:组件的实例,也就是Vue.js的实例。事实上,在Vue.js中,每个组件都有一个Vue.js实例。

    一个组件节点,对应得vnode是下面这样:

        // <child></child>
        {
            componentInstance: {...},
            componentOptions: {...},
            context: {...},
            data: {...},
            tag: "vue-component-1-child",
            ...    
        }
    

    6.函数式节点

    函数式节点和组件节点类似,他有两个独有的属性functionalContext和functionalOptions。
    通常,一个函数式节点的vnode是下面这样:

         {
            functionalContext: {...},
            functionalOptions: {...},
            context: {...},
            data: {...},
            tag: "div"
       	  }
    

    总结

    VNode是一个类,可以生产不同类型的vnode实例,不同类型的实例表示不同类型的真实DOM。

    由于Vue.js对组件采用了虚拟DOM来更新视图,当属性发生变化时,整个组件都要进行重新渲染的操作,但组件内并不是所有的DOM节点都需要更新,所以将vnode缓存并将当前新生成的vnode和缓存的vnode作对比,只对需要更新的部分进行DOM操作可以提升很多的性能。

    vnode有很多类型,它们本质上都是Vnode实例化出的对象,其唯一区别是属性不同。

    展开全文
  • <p>When handling get_vnode calls, vnode_manager calls pmap over all vnodes with a start fun which calls riak_core_vnode:wait_for_init, which is an infinity-timeout gen_fsm sync_send_event. If a vnode ...
  • Cluster VNode Builder

    2021-01-10 07:31:21
    <div><p>The cluster vnode builder started in deb4146e8 needs finishing for the embedded client to be useful to people who don't want to understand the construction of it.</p><p>该提问来源于开源...
  • vue之VNode

    2021-05-03 15:19:56
    export interface VNode< HostNode = RendererNode, HostElement = RendererElement, ExtraProps = { [key: string]: any } > { /** * @internal */ __v_isVNode: true /** * @internal */ ...
  • Vue VNode原理分析

    2020-09-16 18:15:14
    1. VNode是什么及其作用 使用js对象来描述真是DOM,把DOM的标签,属性,内容都变成对象的属性。模板编译整个过程就是将template描述成VNode,经过一系列操作形成真实DOM,它的好处有两点 兼容性强,不受执行环境的...
  • 虚拟dom vnode

    2021-04-12 19:56:45
    很多人认为虚拟 DOM 最大的优势是 diff 算法, 减少 JavaScript 操作真实 DOM 的带来的...总结就是AST和VNode的职责是不同的,不能进行等价划分; 即AST时compiler中把模板编译成有规律的数据结构, 方便转换成render
  • <div><p>I think there a possible bug in riak_core_vnode.erl for vnode_coverage. 1. reply function defined as following: <p>reply({server, Ref, From}, Reply) -> riak_core_send_msg:reply_unreliable...
  • Vue之vnode创建

    千次阅读 2018-10-01 10:53:52
    vnode主要的处理过程,实际上主要是parse + generate解析template构建render函数的过程,实际上vnode的创建是在render执行过程中触发的。 本文主要分析render调用过程以及该过程vnode的创建。 具体分析 在render构建...
  • Vnode创建与处理

    2020-12-23 10:57:46
    Vue中的Vnode创建与处理
  • Add async vnode worker pools

    2020-12-31 03:26:51
    <div><p>Initial support for vnode worker pools, using the poolboy library. <p>A good way to test them is to modify riak_kv_vnode to return a poolspec and then use one of the pool pids printed to the ...
  • <div><p>Any VNode which takes a nested VNode (which was valid in 14.0.0) as an input now breaks in 14.1.0 <p>js fails on: "Expected VNodeTree | VNode | string but got: " <p>when "got" ...
  • <div><p>Fresh install, running emma ... vnode.createInstance(props); ^ TypeError: vnode.createInstance is not a function </code></pre>该提问来源于开源项目:maticzav/emma-cli</p></div>
  • Vue-Vnode类型

    2020-12-23 10:54:52
    Vnode的类型 1.注释节点 export const createEmptyVNode = text => { const node = new VNode() node.text = text; node.isComment = true; return node } // 一个注释节点只有两个有效属性` text `和 `is...
  • vnode虚拟节点就是用一个对象来描述真实的 dom 元素,在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode
  • 第五章、VNode

    2020-02-18 12:42:48
    VNode是一个类,可以生成不同类型的vnode实例,而不同类型的vnode表示不同类型的真实DOM元素。 VNode类的代码如下: export default class VNode{ constructor(tag,data,children,text,elm,context,component...
  • TDengine学习笔记:vnode

    千次阅读 2021-03-12 19:35:58
    TDengine学习笔记:vnode 虚拟节点, 高可用测试, 版本号, 选主流程
  • SyntaxError: Unexpected token: name (VNode) [bundle.js:182,4] </code></pre> <p>Line 182 is the following: <pre><code> let VNode = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_preact__["h...
  • 在项目中, 我们会遇到将Vnode或者component渲染到指定的dom中. 这时候, 我们可能需要去研究Vue中的源码, 会有如何创建Vnode? 如何渲染Vnode?等相关的疑问. 今天我们不研究源码, 我们从实际实践中来看看实现的方式. ...
  • <p>Previously, if a heavily loaded vnode received more than <code>check_threshold</code> msgs after it hit the direct mailbox check, the ping/pong would leave it in overload state. In cases where the ...
  • zfs: vnode_remove not yet supported vnode_remove: "/etc/zfs/zpool.cache.tmp" zfs: vnode_remove not yet supported vnode_remove: "/etc/zfs/zpool.cache.tmp" zfs: vnode_remove not yet ...
  • vnode-demo 技术栈 前端 初步
  • [Vue源码解析] VNode类型 VNode类型:注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点 VNode类: /** * VNode类 */ export default class VNode{ constructor (tag, data, children, text, elm,...
  • Vue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js 中: export function createElement ( context: Component, tag: any, data: any, childre...
  • vnode-虚拟DOM

    2019-05-29 20:25:51
    所谓虚拟DOM,是一个用于表示...在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。 换一种说法 虚拟dom就是通过一个对象描述一个html结构 在js对象和真实dom树之间存在的一个虚拟对象, 所有的dom树节点都是根...
  • Vue源码之 diff Vnode

    2019-04-21 14:15:00
    _update调用__patch__方法,如果prevVnode(也就是oldVnode),旧vnode和新vnode对比,如果没有,就vnode就是vm.$el,就是挂载的那个真实node 这样进入patch方法之后,先判断oldVnode是否定义了,如果没有,说明这...

空空如也

空空如也

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

vnode