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

相对于 Vue2，模板和组件的一些变化"/>

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

目录

• 1，模板的变化
• • 1，v-model
  • • vue2
    • vue3
  • 2，v-if 和 v-for
  • 3，key
  • • v-for
    • v-if
  • 4，Fragment
• 2，组件的变化
• • 1，Teleport
  • 2，异步组件

1，模板的变化

1，v-model

vue2

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

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

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

2. async 修饰符

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

vue3

做了修改，

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

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

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

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

3. 允许自定义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>

2，异步组件

参考这篇文章

---

以上。