Vue 3 的声明式渲染是 Vue 框架的核心特性之一，它允许你通过简洁的模板语法绑定数据，并在数据变化时自动更新界面。与传统的 JavaScript 操作 DOM 的方式不同，Vue 通过声明式的语法，让你专注于数据和视图的关系，而不必手动操作 DOM 元素。

1. 基本概念

声明式渲染的核心是通过 Vue 模板中的 数据绑定 来实现视图的自动更新。你只需要声明数据与视图的关系，Vue 会在数据变化时自动更新 DOM。

2. 插值表达式

Vue 使用 双大括号 ({{}}) 来进行插值表达式绑定，直接将 JavaScript 变量绑定到 HTML 模板中。

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

当 message 数据变化时，页面上的 {{ message }} 会自动更新。

3. 条件渲染

Vue 提供了 v-if 指令用于条件渲染，只有当表达式的值为 true 时，DOM 元素才会被渲染。

v-if

<template>
  <p v-if="isVisible">This text is visible when isVisible is true.</p>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-else 和 v-else-if

除了 v-if，Vue 还提供了 v-else 和 v-else-if 用于链式的条件渲染。

<template>
  <p v-if="isVisible">This text is visible when isVisible is true.</p>
  <p v-else>If isVisible is false, this will be shown.</p>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  }
};
</script>

4. 列表渲染

通过 v-for 指令，Vue 可以高效地将数据渲染为列表。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    };
  }
};
</script>

这里的 v-for 会遍历 items 数组，并渲染每一项。

5. 双向数据绑定

v-model 是 Vue 提供的双向绑定指令，用于在表单元素和组件之间实现数据的双向绑定。

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

通过 v-model，input 元素的值与 message 数据属性保持同步。当用户输入时，message 会实时更新，反之亦然。

6. 事件处理

Vue 的声明式渲染还包括事件处理。你可以使用 v-on 或简写 @ 来监听 DOM 事件并调用方法。

<template>
  <button @click="changeMessage">Click me</button>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'You clicked the button!';
    }
  }
};
</script>

点击按钮后，message 会被修改，页面会自动更新。

7. 计算属性

计算属性是基于其依赖进行缓存的。只有相关依赖变化时，计算属性才会重新计算，避免了不必要的计算。

<template>
  <p>{{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

8. 使用模板语法表达复杂表达式

在 Vue 模板中，你可以使用 JavaScript 表达式来做更多的操作，例如：

  • 字符串拼接
  • 数学计算
  • 调用方法
<template>
  <p>{{ message.toUpperCase() }}</p>
  <p>{{ num1 + num2 }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello',
      num1: 10,
      num2: 20
    };
  }
};
</script>

9. 动态绑定样式和类

你可以动态绑定样式和类，根据数据的变化来改变元素的样式。

动态绑定类

<template>
  <div :class="classObject">Hello, Vue 3!</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        'text-danger': this.hasError
      };
    }
  }
};
</script>

动态绑定样式

<template>
  <div :style="styleObject">This is a styled div.</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '20px'
    };
  },
  computed: {
    styleObject() {
      return {
        color: this.color,
        fontSize: this.fontSize
      };
    }
  }
};
</script>

总结

Vue 3 的声明式渲染通过指令和模板语法使得 UI 和数据的绑定变得直观和高效。你只需要声明数据与视图的关系，Vue 会自动处理 DOM 更新。这种声明式的方式避免了手动操作 DOM，提高了开发效率，同时也使得代码更加清晰和易于维护。

通过 v-if、v-for、v-model 等指令，结合计算属性、事件处理和动态绑定，Vue 提供了灵活且强大的工具来处理数据与界面之间的交互。