Vue3 声明式渲染 – BuildCodePro

Vue3 声明式渲染知识大全

编程小白也能看懂的Vue3核心概念详解，用最简单的方式理解声明式渲染

✅ 1. 什么是声明式渲染？

大白话解释：声明式渲染就是直接告诉Vue你想要什么效果，而不需要自己一步步写具体的实现步骤。

传统命令式编程（如原生JS操作DOM）：

                        // 查找元素 -> 创建元素 -> 设置文本 -> 添加到DOM

                        const div = document.createElement(‘div’);

                        div.textContent = ‘Hello World’;

                        document.body.appendChild(div);

Vue声明式写法：

<div>{{ message }}</div>

核心优势：你只需关注”数据是什么”，而不需要操心”如何更新DOM”。当数据变化时，Vue会自动更新DOM。

📝 2. 模板插值语法

这是Vue中最基本的绑定数据方式，使用双大括号{{ }}语法：

                        <div id=“app”>

                          <h1>{{ title }}</h1>

                          <p>{{ description }}</p>

                        </div>

                        const app = Vue.createApp({

                          data() {

                            return {

                              title: ‘Vue3 教程’,

                              description: ‘学习声明式渲染’

                            }

                          }

                        }).mount(‘#app’);

注意：双大括号内部可以是JavaScript表达式，例如：{{ count + 1 }}，{{ message.split('').reverse().join('') }}

🚦 3. 常用指令

指令是带有v-前缀的特殊属性，用于在DOM上应用特殊行为。

v-bind： 动态绑定属性

                        
                        <img v-bind:src=“imageUrl”>

                        <!– 简写形式 –>

                        <img :src=“imageUrl”>

v-on： 监听DOM事件

                        <!– 绑定点击事件 –>

                        <button v-on:click=“handleClick”>点击</button>

                        <!– 简写形式 –>

                        <button @click=“handleClick”>点击</button>

v-model： 表单输入双向绑定

                        <input v-model=“message” placeholder=“输入内容”>

                        <p>输入的是: {{ message }}</p>

v-if / v-else / v-show： 条件渲染

                        <div v-if=“isVisible”>显示内容</div>

                        <div v-else>其他内容</div>

                        <div v-show=“isActive”>总是渲染，只是显示/隐藏</div>

🔁 4. 列表渲染 (v-for)

使用v-for指令基于数组渲染列表：

                        <ul>

                          <li v-for=“(item, index) in items” :key=“index”>

                            {{ index }} – {{ item.name }}

                          </li>

                        </ul>

                        data() {

                          return {

                            items: [

                              { name: ‘项目一’ },

                              { name: ‘项目二’ },

                              { name: ‘项目三’ }

                            ]

                          }

                        }

重要：必须为每个元素添加唯一的:key属性，帮助Vue识别节点，提高渲染性能。

也可以用v-for遍历对象：

                        <div v-for=“(value, key) in object”>

                          {{ key }}: {{ value }}

                        </div>

🔄 5. 响应式原理

Vue3使用Proxy代替Vue2的Object.defineProperty实现响应式：

Proxy的优势：

可直接监听对象而非属性
可直接监听数组的变化
拦截方式更多（13种）
性能更好

                        const data = { count: 0 };

                        const reactiveData = new Proxy(data, {

                          get(target, key) {

                            console.log(`读取属性 ${key}`);

                            return target[key];

                          },

                          set(target, key, value) {

                            console.log(`设置属性 ${key} 为 ${value}`);

                            target[key] = value;

                            // 触发更新视图

                            return true;

                          }

                        });

注意：在Vue中，我们使用reactive()或ref()创建响应式数据，不需要自己实现Proxy。

🧮 6. 计算属性与侦听器

计算属性 (computed)：

用于基于响应式数据计算衍生值，具有缓存机制：

                        computed: {

                          reversedMessage() {

                            // 当message变化时，才会重新计算

                            return this.message.split(”).reverse().join(”);

                          }

                        }

侦听器 (watch)：

用于在数据变化时执行异步或开销较大的操作：

                        watch: {

                          question(newValue, oldValue) {

                            // 当question变化时执行API请求

                            this.getAnswer();

                          }

                        }

区别：计算属性适用于同步计算衍生值；侦听器适用于数据变化时需要执行副作用操作的情况。

🖥️ Vue3 声明式渲染实例演示

修改标题：

技术列表 (v-for 示例)

{{ index + 1 }}. {{ tech.name }} – {{ tech.category }}

计算属性示例

输入内容：

反转内容：{{ reversedText }}