第3章 组件的渲染

3.1 什么是vnode (节点) ？

vnode的本质是用于描述DOM的JavaScript对象。

vnode在Vue.js中可以描述不同类型的节点：

• 普通元素vnode
• 组件vnode
• 纯文本vnode
• 注释vnode

3.1.1 普通元素vnode

>>> HTML中写<button>标签

<button class="btn" style="width:100px;height:50px;"> 我是按钮，请点击 </button>

>>> vnode表示<button>标签

const  vnode =  {
    type: 'button',        // type 属性用于表示DOM标签的类型
    props: {               // props 属性用于表示DOM的一些附加信息，比如
        'class': 'btn',    // 'class' 类名
        style: {           // style 样式
            width: '100px', 
            height: '50px
        }
    },
    children: '我是按钮，请点击' // children 表示DOM的子节点，可以是一个文本字符串，也可以是一个vnode数组
}

• type 属性用于表示DOM标签的类型
• props 属性用于表示DOM的一些附加信息，比如：类名、样式等。
• children 表示DOM的子节点，可以是一个文本字符串，也可以是一个vnode数组。

3.1.2 组件 vnode

>>> 在模板中引入一个组件，以标签的形式书写：

<custom-component msg="提示消息"> </custom-component>

>>> vnode表示<custom-component>组件标签

// 创建组件对象
const CustomComponent = {
    // 在这里定义组件对象
}

const vnode = {
    type: CustomComponent,
    props: {
        msg: '提示消息'
    }
}

• 组件 vnode 是对抽象事务的描述，
• 不会在页面上渲染出一个 <custom-component> 标签，
• 最终会渲染出在组件内部定义的HTML标签。

3.1.3 vnode的优势

• 首先是抽象。
  • 引入vnode可以把渲染过程抽象化，从而提升组件的抽象能力。
• 其次是可跨平台。
  • 服务端渲染
  • Weex平台渲染
  • 小程序平台渲染