Vue3 声明式渲染

在 Vue 3 中，声明式渲染是 Vue 的核心特性之一，允许你在模板中直接描述 UI 的结构，而不需要手动操作 DOM。通过将数据和视图绑定，Vue 会自动根据数据变化更新 DOM。

声明式渲染的基本方式是使用模板语法（模板字符串）来将数据与视图绑定，并让 Vue 自动管理更新。

1. 基本用法

你可以在模板中使用数据绑定来声明渲染。例如：

在这个例子中：

{{ message }} 和 {{ count }} 是数据绑定，Vue 会根据数据的变化自动更新 DOM。
@click=“increment” 是事件绑定，当按钮被点击时，increment 方法会被调用，更新 count 的值，视图会重新渲染。

2. 条件渲染

Vue 允许你根据条件来渲染不同的内容，使用 v-if 或 v-show 指令。

v-if=“isLoggedIn” 会根据 isLoggedIn 的值决定是否渲染欢迎消息。

3. 列表渲染

使用 v-for 指令来渲染一个列表。

v-for="(item, index) in items" 会遍历 items 数组，渲染每个元素。

4. 双向数据绑定

Vue 3 提供了 v-model 指令，允许你进行双向数据绑定。

v-model 会自动将输入框的值与 name 数据绑定，实现双向绑定。

总结

声明式渲染允许你只关心数据，Vue 会自动将数据与视图进行同步，简化了开发工作。通过 Vue 的指令，如 v-if, v-for, v-model 等，可以灵活地控制视图的渲染和交互行为。