Vue 声明式渲染

Vue 的核心是其声明式渲染 (Declarative Rendering) 系统。与命令式编程（手动操作 DOM，如使用 jQuery $('#id').text('new text')）不同，声明式渲染允许你只关心状态 (State) 和视图 (View) 之间的关系，而将繁琐的 DOM 操作交给框架来处理。

什么是声明式渲染？

简单来说，你只需要声明性地描述：“当我的数据是这样时，我的页面就应该是这样”。

当数据发生变化时，Vue 会自动地、高效地更新视图，使其与新的数据状态保持同步。这个过程是响应式的。

让我们通过一个例子来理解。

核心：状态与模板

在 Vue 中，我们主要处理两个部分：

JavaScript 状态：你的应用的数据。
HTML 模板：你的视图结构。

Vue 将它们连接在一起。

App.vue

vue

<script setup>
// 1. 导入 ref 来创建响应式状态
import { ref } from 'vue'

// 2. 定义一个响应式变量 (状态)
const counter = ref(0)

// 3. 定义一个方法来改变这个状态
function increment() {
  counter.value++
}
</script>

<template>
  <!-- 4. 将状态渲染到视图中 -->
  <h1>Count is: {{ counter }}</h1>

  <!-- 5. 绑定一个事件来调用方法，从而改变状态 -->
  <button @click="increment">Increment</button>
</template>

让我们分解一下这个过程：

状态 (counter): 我们使用 ref(0) 创建了一个响应式变量 counter。ref 是 Vue 3 组合式 API 的一部分，它接收一个内部值，并返回一个响应式的、可变的 ref 对象。这个对象有一个 .value 属性，指向内部值。
视图 (<template>): 在模板中，我们使用来显示 counter 的值。Vue 知道 <h1> 的内容依赖于 counter。
动作 (increment 方法): 我们定义了一个 increment 函数，它会修改 counter 的值 (counter.value++)。我们通过 @click (即 v-on:click 的简写) 将这个函数绑定到按钮的点击事件上。

它是如何工作的？

初始渲染: 当组件首次加载时，Vue 会渲染模板。它看到，于是读取 counter.value 的值（即 0），并将其渲染到 <h1> 中。在读取 counter 的同时，Vue 会记录下这个依赖关系：<h1> 的内容依赖于 counter。
状态变更: 当你点击按钮时，increment 函数被调用，counter.value 变成了 1。
自动更新: 因为 counter 是一个响应式引用，当它的值被修改时，Vue 的响应式系统会得到通知。系统会检查所有依赖 counter 的地方，并通知它们进行更新。
高效的 DOM 更新: Vue 发现 <h1> 的内容需要更新，于是它会高效地操作 DOM，将 <h1> 的文本内容从 "Count is: 0" 更新为 "Count is: 1"。

这就是声明式渲染的魔力。你不再需要手动编写 document.getElementById(...).textContent = ... 这样的代码。你只需管理好你的状态，Vue 会确保你的视图始终与状态保持一致，让你的代码更简洁、更易于理解和维护。

Vue 声明式渲染 ​

什么是声明式渲染？ ​

核心：状态与模板 ​

它是如何工作的？ ​

Vue 声明式渲染

什么是声明式渲染？

核心：状态与模板

它是如何工作的？