创立实例通过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.jsexport const getData = function(){ return Promise.resolve({ list:['a','b'], total:2 })}//util.jsimport { toRefs } from 'vue'export const getSearchMethod = function(param,api){ param = toRefs(param); var total = toRefs(0); var tableData = toRefs([]); var search = toRefs(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 实例办法