Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，它的核心思想是“声明式渲染”——你只描述界面“应该是什么样子”，而不是一步步告诉浏览器“怎么去改 DOM”。这让你从手动操作 DOM 的繁琐中解放出来，专注在数据和逻辑上。

Vue 怎么做到声明式？靠模板 + 响应式数据

你在 HTML 中写类似这样的模板：

欢迎，{{ name }}！

你有 {{ count }} 条消息

点我加一

然后用 JavaScript 创建一个 Vue 实例，把数据（name、count）和行为（click 处理）绑定上去：

const app = Vue.createApp({
data() {
return {
name: '小明',
count: 0
}
}
})
app.mount('#app')

你没写任何 document.getElementById 或 innerHTML，但界面上的文字和数字会自动更新——因为 Vue 在背后建立了数据和 DOM 的响应式连接。

关键机制：响应式系统让更新“自动发生”

• Vue 会把 data() 返回的对象转换成响应式对象，内部用 Proxy（Vue 3）或 Object.defineProperty（Vue 2）追踪属性读写
• 当 count++ 执行时，Vue 知道这个值变了，立刻重新计算依赖它的模板片段（比如 {{ count }}），并精准更新对应 DOM 节点
• 你不用手动调用“刷新”或“重绘”，变化是声明式地、自动地反映到界面上

常用声明式语法不只是插值

• v-if / v-show：根据布尔值条件显示或隐藏元素
• v-for：基于数组或对象，自动渲染列表项（比如
• {{ item }}
）
• v-bind（简写 :）：动态绑定 HTML 属性，如 :class、:src
• v-on（简写 @）：声明事件监听，如 @click="handleClick"，函数里只需改数据，UI 自动同步

组件化是声明式思维的延伸

你可以把界面拆成独立、可复用的组件，每个组件封装自己的模板、数据和逻辑：

// 定义一个消息卡片组件
const MessageCard = {
props: ['title', 'content'],
template: `

{{ title }}

{{ content }}

`
}
// 在父组件中像 HTML 标签一样使用

这种写法不是命令“创建一个卡片并塞进页面”，而是声明“这里应该有一个消息卡片，它的标题是……内容是……”——Vue 负责实现它。

基本上就这些。声明式不等于“不写 JS”，而是把控制权交给框架，你描述状态与视图的关系，它来保证两者始终一致。