创建实例通过createApp的方式
<div id="counter">
Counter: {{ counter }}
</div>const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')全局方法变更
组件的v-model
在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>v-model 参数
若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个 argument 传递给 model：
<ChildComponent v-model:title="pageTitle" />
<!-- 简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />v-model 修饰符
除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：
添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop。
请注意，当组件的 created 生命周期钩子触发时，modelModifiers prop 包含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize="bar"。
<my-component v-model.capitalize="bar"></my-component>app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
template: `
<input type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
})组合式api
可以把一部分共用逻辑和数据写在一块来复用，比如自己项目中经常用的search方法加载列表就可以抽出来了
//app.vue
<template>
<button @click="search"></button>
</template>
<script>
import {getData} from "./api"
import getSearchMethod from "./util.js"
export default {
setup(){//context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：attrs,emit,slots
var param = {
page:1,
size:10
}
return getSearchMethod(param,getData);
}
}
</script>//api.js
export const getData = function(){
return Promise.resolve({
list:['a','b'],
total:2
})
}//util.js
import { ref } from 'vue'
export const getSearchMethod = function(param,api){
param = ref(param);
var total = ref(0);
var tableData = ref([]);
var search = ref(function(){
api(param.value).then(res=>{
total.value = res.total;
tableData.value = res.list;
})
})
return {param,total,tableData,search}
}Teleport
将容器放到指定父容器下,我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。
<body>
<div style="position: relative;">
<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<modal-button></modal-button>
</div>
</div>
</body>app.component('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})片段
在 Vue 3 中，组件现在正式支持多根节点组件，即片段
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>v-for的key可以直接写在template上了
v-if的优先级比v-for高了
$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口
filter移除
<template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。
在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。
destroyed
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
移除$destroy 实例方法
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。