Vue.js框架基础：数据的渲染

Vue框架基础：数据的渲染

一.双向数据的绑定

在Vue 3中，实现双向数据绑定可以通过v-model指令来完成。v-model指令用于在表单元素和组件上创建双向数据绑定。

<input v-model="message" type="text">

在上述代码中，v-model="message"表示将message变量与输入框的值进行双向绑定。当用户在输入框中输入内容时，message的值将自动更新，反之亦然。

二.条件渲染

在Vue 3中，条件渲染可以通过使用v-if、v-else-if、v-else指令来实现。这些指令可以根据给定的条件来决定是否渲染特定的元素或组件。
1.使用v-if指令来渲染元素或组件：

<div v-if="isShow">
  <!-- 在isShow为true时渲染该元素 -->
</div>

2.使用v-else指令来渲染与v-if条件不满足的元素或组件：

<div v-if="isShow">
  <!-- 在isShow为true时渲染该元素 -->
</div>
<div v-else>
  <!-- 在isShow为false时渲染该元素 -->
</div>

3.使用v-else-if指令来渲染多个条件：

<div v-if="condition1">
  <!-- 在condition1为true时渲染该元素 -->
</div>
<div v-else-if="condition2">
  <!-- 在condition2为true时渲染该元素 -->
</div>
<div v-else>
  <!-- 在condition1和condition2都为false时渲染该元素 -->
</div>

4.除了v-if、v-else-if和v-else，Vue 3还提供了v-show指令，它可以根据条件来控制元素的显示与隐藏，但是元素始终会被渲染到DOM中。使用v-show指令的示例如下：

<div v-show="isShow">
  <!-- 无论isShow为true还是false，该元素始终会被渲染到DOM中，只是通过CSS的display属性来控制其显示与隐藏 -->
</div>

需要注意的是，v-if具有较高的切换性能开销，因为它会真正地向DOM中添加或移除元素。而v-show只是通过CSS来控制元素的显示与隐藏，并没有改变DOM结构，所以在需要频繁切换的情况下，使用v-show可能会更加高效。

总结起来，Vue 3中的条件渲染可以通过v-if、v-else-if、v-else和v-show指令来灵活地根据条件来控制元素或组件的渲染。

三.循环渲染

1.v-for指令

在Vue 3中，循环渲染可以通过使用v-for指令来实现。v-for可以遍历数组或对象，并为每个项生成相应的元素或组件。
1.使用v-for遍历数组：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

2.使用v-for遍历对象的属性：

<ul>
  <li v-for="(value, key) in obj" :key="key">
    {{ key }}: {{ value }}
  </li>
</ul>

3.使用v-for遍历整数：

<ul>
  <li v-for="n in 5" :key="n">
    {{ n }}
  </li>
</ul>

4.在Vue 3中，可以通过嵌套使用v-for指令来进行循环渲染的嵌套。

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <ul>
          <li v-for="post in user.posts" :key="post.id">
            {{ post.title }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {
          id: 1,
          name: "User 1",
          posts: [
            { id: 1, title: "Post 1" },
            { id: 2, title: "Post 2" },
          ],
        },
        {
          id: 2,
          name: "User 2",
          posts: [
            { id: 3, title: "Post 3" },
            { id: 4, title: "Post 4" },
          ],
        },
      ],
    };
  },
};
</script>

在上面的示例中，users是一个包含用户信息的数组。外部的v-for指令遍历了users数组，内部的v-for指令遍历了每个用户的posts数组。通过嵌套的v-for指令，我们可以在内部循环渲染中访问外部循环的数据。
请注意，内部的v-for指令的:key指令仍然需要提供一个唯一的标识。在本例中，我们使用了post.id作为每个帖子的唯一标识。

这只是Vue 3中嵌套循环渲染的一个简单示例，你可以根据自己的需求进行更复杂的嵌套循环渲染。记住在嵌套循环中正确使用:key指令是很重要的，以确保生成的元素具有唯一的标识。

总结起来，Vue 3中的循环渲染可以通过v-for指令来遍历数组、对象或整数，并为每个项生成相应的元素或组件。使用:key指令可以为生成的元素指定唯一的标识。

2.key的作用

key属性在Vue中的作用是为每个渲染的元素提供一个唯一的标识符。它的主要作用有以下几点：

1.实现高效的元素重用：Vue使用key来跟踪每个元素的身份，从而在重新渲染时尽可能地复用已有的元素，而不是删除和再创建新的元素。这可以提高性能，减少不必要的DOM操作。

2.维持组件状态：当Vue进行更新时，它会根据每个元素的key来决定是否重新使用组件实例。如果两个元素具有相同的key，Vue会假设它们是同一个组件，并尝试复用该组件的状态，而不是销毁和重新创建一个新的组件实例。

3.提供稳定的元素顺序：在列表渲染中，如果不使用key，当数据发生变化时，Vue会根据元素在数组中的顺序来确定渲染的顺序。但是，如果在数组中插入、移动或删除元素，Vue无法准确地确定哪些元素发生了变化。通过为每个元素提供一个唯一的key，Vue可以更好地跟踪元素的变化，并确保元素在DOM中的顺序保持稳定。

总而言之，key属性在Vue中是一个非常重要的概念，它帮助Vue有效地渲染和更新元素，提高性能，并确保正确地维护组件状态和元素顺序。在使用v-for进行列表渲染时，通常建议为每个元素提供一个唯一的key。

四.计算属性

在Vue 3中，计算属性的使用方式与Vue 2基本相同，但有一些细微的改变和新增的功能。

计算属性允许你基于响应式数据进行计算，并返回计算结果。计算属性在使用时会被缓存，只有依赖的响应式数据发生变化时，才会重新计算。

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

<script>
import { computed, reactive } from 'vue';

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

总结：

在Vue 3中，可以选择使用选项式的方式来定义组件。
使用computed选项来定义计算属性，计算属性的定义方式与Vue 2相同。
在选项式的组件中，计算属性无需使用value来获取计算结果，直接使用属性名即可。