模版内置指令

• v-if; v-else-if; v-else
• v-show
  值 false 代表display:none 类似于 android 中的 invisible
• v-bind bind property,可以省略
• v-once 只渲染元素和组件一次。随后的重新渲染, 元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
• v-for
• v-text
• v-html
• v-on:click @click 事件符号
• v-model
• v-pre
• v-cloak

vue2

概述

Vue 2 的核心原理是数据驱动, 也就是说视图(View)是根据数据(Data)自动渲染出来的, 这样可以将业务逻辑和视图分离, 提高开发效率。Vue 2 的数据驱动原理主要分为以下几个部分:

1. 数据响应式: Vue 2 使用了 Object.defineProperty() 方法来实现数据响应式, 该方法可以监控对象属性的变化, 并在属性发生变化时触发相关操作。当一个组件被创建时, Vue 2 会对其数据进行响应式处理, 从而可以在数据变化时更新视图
2. 模板编译: Vue 2 使用了模板编译技术将模板转换成渲染函数, 渲染函数可以直接操作数据, 生成真实的 DOM 节点。模板编译分为以下几个步骤: 解析模板, 生成 AST(抽象语法树), 优化 AST, 生成代码字符串, 将代码字符串转换成可执行函数
3. 虚拟 DOM: Vue 2 使用了虚拟 DOM 来提高渲染性能, 虚拟 DOM 是一个 JavaScript 对象, 可以描述真实 DOM 树的结构和属性。在更新视图时, Vue 2 会先根据数据生成一个新的虚拟 DOM 树, 然后将新的虚拟 DOM 树和旧的虚拟 DOM 树进行比较, 找出差异并更新到真实 DOM 上
4. 生命周期: Vue 2 的组件生命周期分为创建阶段、更新阶段和销毁阶段。在每个阶段, Vue 2 都会触发一些钩子函数, 开发者可以在钩子函数中执行一些操作, 比如初始化数据、发送网络请求、监听事件等
5. 组件通信: Vue 2 支持多种组件通信方式, 包括父子组件通信、兄弟组件通信、任意组件通信等。其中父子组件通信主要通过 props 和事件来实现, 兄弟组件通信可以通过一个共同的父组件来实现, 任意组件通信可以使用 Vuex 状态管理库来实现

以上就是 Vue 2 的核心原理, 理解这些原理可以帮助开发者更好地使用 Vue 2 来构建应用程序

虚拟 DOM

在 Vue2 中, 虚拟 DOM 被广泛地应用于渲染组件。当 Vue 实例的状态发生变化时, Vue 会通过比较前后状态来计算出需要更新的组件, 并且使用虚拟 DOM 来减少渲染次数

具体地说, Vue 会在内存中维护一个虚拟 DOM, 称为 VNode(Vue 节点), 它是一个 JavaScript 对象, 表示真实 DOM 中的一个节点。当 Vue 组件渲染时, 会将 VNode 转换为真实的 DOM 节点, 并挂载到文档中。当 Vue 组件的状态发生变化时, Vue 会重新计算出新的 VNode, 然后通过比较新旧 VNode, 找出需要更新的部分, 最后将更新的部分重新渲染到真实的 DOM 中

Vue 的虚拟 DOM 实现采用了 Diff 算法, Diff 算法是通过比较新旧 VNode 的差异, 然后将差异应用到真实 DOM 上, 以达到更新视图的目的。Vue2 中的虚拟 DOM 还可以结合模板编译优化, 将模板编译为渲染函数, 以提高组件渲染性能

总之, Vue2 中的虚拟 DOM 在组件的渲染和更新过程中起到了至关重要的作用, 它通过比较前后状态, 减少不必要的 DOM 操作, 提高了组件的渲染性能

vue3

Vue 2.x 的模板在运行时被解析和转换为渲染函数。这个过程是在浏览器中发生的, 因此需要一定的运行时间和性能消耗。这种方式的好处是可以在模板中使用常规的 HTML 和 JavaScript 语法, 对开发人员比较友好, 但也会带来一些性能上的损失

Vue 3.x 中使用了基于编译时的模板静态分析和优化的方式, 将模板编译成渲染函数并进行缓存, 以提高渲染性能。这种方式可以避免运行时的解析和转换, 因此在渲染时具有更高的性能表现

模版的本质

模版本质就是语法糖, 表达的是一个渲染过程, 最终得到的是一个界面结构。vue 的组件就是一个对象, 不管是 vue2 还是 vue3, 渲染函数写哪呢 vue2 直接写 render(), vue3 就写在setup里返回一个函数

模板语法(Template Syntax)

在 Vue 中,模板语法是一种声明式的方式来描述 UI 结构。模板语法使用类似 HTML 的结构,方便开发者直观地描述组件的布局和内容

<template>
    <ul>
        <li v-for="i in 100" :key="i" class="list-item">Item {{ i }}</li>
    </ul>
</template>

• <template> 标签包含了组件的模板内容
• <ul> 和 <li> 标签用于定义一个无序列表和列表项
• v-for 指令用于循环渲染列表项,这里是从 1 到 100
• :key 是一个特殊属性,用于为每个列表项提供唯一标识,有助于 Vue 进行高效的 DOM 更新
• class 属性用于为元素添加 CSS 类
• 双大括号 用于插值,显示列表项的序号

渲染函数(Render Function)

渲染函数是一种更加灵活和编程化的方式来描述组件的 UI 结构。相比模板语法,渲染函数允许你直接使用 JavaScript 来创建虚拟 DOM (VNode)

<script>
import { h } from 'vue'

export default {
  setup() {
    return () => {
      const lis = []
      for (let i = 0; i < 100; i++) {
        lis.push(h('li', {
          class: 'list-item',
          key: i,
        }, `Item ${i}`))
      }

      const ul = h('ul', {
        class: 'list',
      }, lis)
      return ul
    }
  }
}
</script>

• import { h } from 'vue' 导入了 h 函数,这是一个用于创建 VNode 的辅助函数
• setup 函数是 Vue 3 中组合式 API 的一部分,用于定义组件的逻辑
• 在 setup 函数内部,返回了一个渲染函数
• 渲染函数通过循环创建了一系列 li 元素,存储在 lis 数组中
• h('li', {...}, ...) 用于创建 li 元素的 VNode,传入的参数包括标签名称、属性和子节点内容
• 最后,ul 元素的 VNode 被创建,并包含 lis 数组中的所有 li 元素
• 渲染函数最终返回 ul 元素的 VNode

模板语法/渲染函数

模板语法的优点:

• 语法简单直观,类似 HTML,容易上手
• 更加声明式,适合描述静态结构
• 易于维护和阅读

渲染函数的优点:

• 更加灵活,可以使用完整的 JavaScript 功能来动态构建 VNode
• 适合复杂的逻辑和动态生成的内容
• 更适合高级场景,如自定义指令、动态组件等

h 函数