Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，它的核心思想是“声明式渲染”——你只描述界面“应该是什么样子”，而不是一步步告诉浏览器“怎么去改 DOM”。这让你从手动操作 DOM 的繁琐中解放出来，专注在数据和逻辑上。
Vue 怎么做到声明式？靠模板 + 响应式数据
你在 HTML 中写类似这样的模板：
欢迎，{{ name }}！
你有 {{ count }} 条消息
然后用 JavaScript 创建一个 Vue 实例，把数据（name、count）和行为（click 处理）绑定上去：
立即学习“Java免费学习笔记（深入）”；
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：基于数组或对象，自动渲染列表项（比如<li v-for="item in list">{{ item }}</li>） -
v-bind（简写:）：动态绑定 HTML 属性，如:class、:src -
v-on（简写@）：声明事件监听，如@click="handleClick"，函数里只需改数据，UI 自动同步
组件化是声明式思维的延伸
你可以把界面拆成独立、可复用的组件，每个组件封装自己的模板、数据和逻辑：
// 定义一个消息卡片组件const MessageCard = {
props: ['title', 'content'],
template: `
{{ title }}
{{ content }}
}
// 在父组件中像 HTML 标签一样使用
这种写法不是命令“创建一个卡片并塞进页面”，而是声明“这里应该有一个消息卡片，它的标题是……内容是……”——Vue 负责实现它。
基本上就这些。声明式不等于“不写 JS”，而是把控制权交给框架，你描述状态与视图的关系，它来保证两者始终一致。
