vue原理Compile之optimize标记静态节点源码示例

Vue的Compile阶段是将模板解析成AST并分析依赖收集,生成渲染函数的阶段。在这个阶段,Vue会对静态节点进行标记,优化渲染性能。其中,有一个关键的标记项就是 optimize。

optimize的主要作用是标记已知的静态根节点。如果一个静态节点不是根节点,那么其子节点将可能会发生变化,需要被重新渲染。但是,如果该节点被标记为静态节点,则可以避免对其进行不必要的渲染。而且因为它的子节点是静态的,所以它们也会被标记为静态节点。

下面是一个例子,演示如何使用 optimize 标记静态节点。

<template>
  <div>
    <div class="static-text">This is a static text.</div>
    <p>{{dynamicText}}</p>
  </div>
</template>

在编译过程中,Vue会将其转化为AST节点,代码如下:

{
  tag: 'div',
  children: [
    {
      tag: 'div',
      attrsList: [
        {name: 'class', value: 'static-text'}
      ],
      static: true, // 静态节点标记
      parent: [Circular],
      type: 1,
      children: [
        {
          text: 'This is a static text.',
          type: 3
        }
      ]
    },
    {
      tag: 'p',
      parent: [Circular],
      type: 1,
      children: [
        {
          expression: '_s(dynamicText)', // 动态文本节点不是静态节点,不做标记
          text: '{{dynamicText}}',
          type: 2
        }
      ]
    }
  ]
}

在AST节点中,静态节点的 type 属性会被标记为 1,同时还会设置 static 属性为 true。这样,在执行 render 函数时,Vue就知道哪些节点可以被优化为静态节点。

下面再看一个 more 示例,更加直观地演示了 optimize 如何标记静态节点。

<template>
  <div>
    <div class="static-text" v-if="isShow">This is a static text.</div>
    <p>{{dynamicText}}</p>
  </div>
</template>

在编译过程中,会产生如下 AST 节点:

{
  tag: 'div',
  children: [
    {
      type: 12,
      expression: '_c("div",{staticClass:"static-text"},[_v("This is a static text.")],1)', // 运行时渲染函数表达式
      static: false, // 非静态
      ifConditions: [
        {
          exp: 'isShow',
          block: [Circular]
        }
      ]
    },
    {
      tag: 'p',
      parent: [Circular],
      type: 1,
      children: [
        {
          expression: '_s(dynamicText)',
          text: '{{dynamicText}}',
          type: 2
        }
      ]
    }
  ]
}

在这个例子中,由于 v-if 指令的存在,static 属性被标记为 false。因为 v-if 指令会根据条件动态地插入/移除节点,所以由 v-if 生成的节点不可能是静态节点。这时,Vue 会优先考虑标记那些不被 v-if 控制的静态节点。这也是 optimize 标记静态节点的难点所在。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue原理Compile之optimize标记静态节点源码示例 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 解决vue中post方式提交数据后台无法接收的问题

    当在 Vue 中使用 post 方式提交数据到后台时,有时候会出现后台无法接收到数据的情况。这可能是由于请求头未设置导致的。在这种情况下,您可以尝试以下两种解决方法: 解决方法一:设置请求头 在使用 post 方法向后台服务器请求数据时,在请求头部分添加 Content-Type 和 X-Requested-With 两个参数。这样后台服务器就能正确地接收到…

    Vue 2023年5月28日
    00
  • vue实现将一个数组内的相同数据进行合并

    要将一个数组内的相同数据进行合并,可以使用Vue.js提供的计算属性来完成。首先,需要对原始数据进行处理,将相同的数据进行合并,然后在模板中使用计算属性来渲染数据。 下面是一些示例说明: 示例一:将相邻重复的数字合并成一个,输出 [1,2,3,4,5] <template> <div> <p v-for="num in…

    Vue 2023年5月28日
    00
  • Vue+ssh框架实现在线聊天

    让我来详细讲解“Vue+ssh框架实现在线聊天”的完整攻略。 1. 项目简介 本项目是使用Vue+ssh框架实现的在线聊天应用。其中,Vue.js是一套用于构建用户界面的渐进式框架,能够通过组合不同的模块来实现一个完整的应用程序;而ssh框架则是由spring、springMVC和hibernate三大框架组成的一种开发模式。 2. 项目准备 2.1 环境准…

    Vue 2023年5月28日
    00
  • 用vuex写了一个购物车H5页面的示例代码

    下面就是使用Vuex写购物车H5页面的攻略,具体步骤如下: 1. 安装所需依赖 首先,在终端中切换到你的项目目录下,使用以下命令安装所需依赖: npm install vuex –save-dev 2. 创建Vuex store 在src目录下创建store目录,并在其中创建index.js文件。在index.js文件中,先引入Vue和Vuex: impo…

    Vue 2023年5月27日
    00
  • JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析

    JS中有三个方法可以用于限制对象的属性的增删改操作,分别是preventExtensions()、seal()和freeze()。这些方法可以让我们对对象进行保护,以确保其属性无法被意外更改。 Object.preventExtensions() preventExtensions()方法可以阻止对象的属性被添加。如果对象已经被预防扩展,则无法向该对象添加任…

    Vue 2023年5月28日
    00
  • Vue-pdf实现在线预览PDF文件

    下面我将为你详细讲解使用 Vue-pdf 实现在线预览 PDF 文件的完整攻略。攻略分为以下几个步骤: 安装 Vue-pdf 引入 Vue-pdf 组件 在项目中使用 Vue-pdf 组件 示例1:使用静态 PDF 文件 示例2:使用动态加载的 PDF 文件 下面我会一步一步地给你讲解。 1. 安装 Vue-pdf 首先,需要安装 Vue-pdf。在终端中输…

    Vue 2023年5月28日
    00
  • vue中get方法\post方法如何传递数组参数详解

    Vue中get方法/post方法如何传递数组参数详解 在Vue中,我们经常需要通过HTTP请求获取或修改数据,并且有时需要通过数组的方式传递参数。本文将详细讲解Vue中如何使用get方法和post方法传递数组参数。 使用get方法传递数组参数 Get方法通常用于获取数据。如果我们需要传递数组参数,我们可以使用Vue的$http.get方法,并将参数以字符串形…

    Vue 2023年5月29日
    00
  • vue 中使用 this 更新数据的一次问题记录

    下面我就来详细讲解一下“vue 中使用 this 更新数据的一次问题记录”的完整攻略。 问题描述 在 Vue 应用中,开发者在更新数据时经常使用 this 关键字来代表当前组件的实例进行更新。然而,在一些特定的情况下,将 data 中的某个值赋值给 this 关键字绑定的变量,可能会导致另一个值意外地被更新。 分析原因 这个问题的根本原因在于,在 JavaS…

    Vue 2023年5月29日
    00
合作推广
合作推广
分享本页
返回顶部