Vue 3 相对于 Vue2，模板和组件的一些变化

news2024/10/6 16:17:29

1，模板的变化

1，v-model

vue2

对组件使用双向绑定时，有2种方式

v-model，默认会绑定属性 value 和事件 input。

<ChildComponent :value="myTitle" @input="myTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model="myTitle" />

async 修饰符

<ChildComponent :title="myTitle" @update:title="myTitle = $event" />
<!-- 简写为 -->
<ChildComponent :title.sync="myTitle" />

vue3

做了修改，

v-model 绑定的属性 value --> modelValue，事件input --> update:modelValue

<ChildComponent :modelValue="myTitle" @update:modelValue="myTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model="myTitle" />

删除了async 修饰符，该功能由 v-model 的参数替代。

<ChildComponent :title="myTitle" @update:title="myTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model:title="myTitle" />

允许自定义v-model修饰符。官网参考

<!-- 父组件 -->
<template>
  <ChildComponent v-model.cap="data1" v-model:title.capitalize="data2" />
</template>

<script setup>
import { ref, reactive } from "vue";
import ChildComponent from "./components/ChildComponent.vue";

const data1 = ref(false);
const data2 = reactive({ a: 1, b: 2 });
</script>

<!-- 子组件 -->
<script setup>
const props = defineProps({
  modelValue: Boolean,
  title: Object,
  modelModifiers: { default: () => ({}) }, // v-model 默认的修饰符对象。
  titleModifiers: { default: () => ({}) }, // v-model 有参数时，修饰符对象为 arg + "Modifiers"
});
console.log(props.modelModifiers); // {cap: true}
console.log(props.titleModifiers); // {capitalize: true}
</script>

2，v-if 和 v-for

vue2 和 vue3 都不推荐同时使用 v-if 和 v-for。

优先级：

vue2：v-for > v-if。官网参考
vue3：v-for < v-if。官网参考

3，key

v-for

当使用<template>进行v-for循环时：

vue2 的 key 需要放到子元素上。
vue3 的 key 需要放到 <template> 上。

<!-- vue2 -->
<template v-for="todo in todos">
  <li :key="todo.name">{{ todo.name }}</li>
</template>

<!-- vue3 -->
<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

v-if

当使用 v-if v-else-if v-else分支的时：

vue2 需要指定 key 才能保证唯一。
vue3 不再需要指定key值，因为会自动给每个分支一个唯一的key。

使用如下代码举例

<template>
  <div>
    <div v-if="showAccount">
      <label for="">账号</label>
      <input type="text" name="" id="" />
    </div>
    <div v-else>
      <label for="">密码</label>
      <input type="text" name="" id="" />
    </div>
    <button @click="showAccount = !showAccount">切换</button>
  </div>
</template>

vue2 的效果

在这里插入图片描述

vue3 的效果

在这里插入图片描述

vue2 想实现一样的效果，就得给 v-if v-else 分支添加唯一 key 才行。

4，Fragment

vue3现在允许组件出现多个根节点。

<!-- vue2 -->
<template>
  <div>
    <h1>标题1</h1>
    <h2>标题2</h2>
  </div>
</template>

<!-- vue3 -->
<template>
  <h1>标题1</h1>
  <h2>标题2</h2>
</template>

2，组件的变化

1，Teleport

官网参考

是 vue3 的内置组件。该组件的子元素将被渲染到指定 DOM 元素中（使用 to 指定）。

to 可以是 css 选择器字符串，也可以是 DOM 元素对象。

经典例子：Dialog 弹窗一般都会渲染到 body 元素下。

<template>
  <div>
    <button @click="open = true">Open Modal</button>
    <Teleport to="body">
      <div v-if="open">
        <p>dialog</p>
        <button @click="open = false">Close</button>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from "vue";

const open = ref(false);
</script>