Vue:Vdom与组件

最新推荐文章于 2022-02-23 10:52:51 发布

yukicm

最新推荐文章于 2022-02-23 10:52:51 发布

阅读量302

点赞数

文章标签： vdom 组件

本文链接：https://blog.csdn.net/yukicm/article/details/93515251

版权

本文详细介绍了Vue中的虚拟DOM及其使用流程，包括数据获取、VDOM创建、render函数、diff算法和key的验证。此外，文章还讨论了Vue的两大特性——指令和组件，特别是组件的创建、复用规则以及is规则的应用。

摘要由CSDN通过智能技术生成

虚拟dom && diff算法

虚拟dom是什么？

它是一个Object对象模型，用来模拟真实dom节点的结构

虚拟dom的使用基本流程

获取数据（ ajax fetch ）

var data = {
   
      id: 1,
      name: 'XXXX'
    }

创建vdom

<div class = "box">
        <ul>
          <li> {
   {
    data.name }} </li>
        </ul>
      </div>

通过render函数解析jsx，将其转换成 vdom结构

var vdom = {
   
      tag: 'div',
      attr: {
   
        className: 'box'
      },
      content: [
        {
   
          tag: 'ul',
          content: [
            {
   
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

将vdom渲染成真实dom(render函数)

数据更改

data.name = 'ZZZZ'
 vdom = {
   
      tag: 'div',
      attr: {
   
        className: 'box'
      },
      content: [
        {
   
          tag: 'ul',
          content: [
            {
   
              tag: 'li',
              content: data