响应式
妇孺皆知，Vue3 的响应式也有很大变化（proxy），不再需要使用 Vue.set 或 Vue.delete。你可以使用简单的原生函数来操作数组或对象。
// in composition API const resources = ref([]) const addResource = newResource => resources.value.unshift(newResource) const removeResource = atIndex => resources.value.splice(atIndex ,1) const reactiveUser = ref({name: 'Filip'}) const changeName = () => reactiveUser.value.name = 'John'
以前则是需要这样：
<script> export default { data() { return { resources: [1,2,3], person: { name: 'Filip' } } } methods: { addResource(newResource) { this.resources.unshift(newResource) }, removeResource(atIndex) { this.resources.splice(atIndex ,1) }, changeName(newResource) { this.person.name = 'John' } } } </script>
在 composition API 中，所有的更改都是响应式的。
多个 v-model
在 Vue3 中，你可以使用多个 v-model，比如这样：
<ChildComponent v-model:prop1="prop1" v-model:prop2="prop2"/>
可以实现以下代码逻辑：
<ChildComponent :prop1="prop1" @update:prop1="prop1 = $event" :prop2="prop2" @update:prop2="prop2 = $event" />
看一个具体的例子：
<resource-form v-model:title="title" v-model:description="description" v-model:type="type" v-model:link="link" @on-form-submit="submitForm" />
form 组件是这样：
<template> <form> <div class="mb-3"> <label htmlFor="title">Title</label> <input :value="title" @input="changeTitle($event.target.value)" type="text" /> </div> <div class="mb-3"> <select :value="type" @change="changeType($event.target.value)"> <option v-for="type in types" :key="type" :value="type">{{type}}</option> </select> </div> <button @click="submitForm" class="btn btn-primary btn-lg btn-block" type="button"> Submit </button> </form> </template> export default { props: { title: String, description: String, link: String, type: String, }, data() { return { types: ['blog', 'book', 'video'] } }, methods: { submitForm() { this.$emit('on-form-submit'); }, changeTitle(title) { this.$emit('update:title', title) }, changeType(type) { this.$emit('update:type', type) } ... } }
我们绑定多个 input 值，监听变化，再emit 来更新值父组件的值。注意这里写法的格式。
Teleport
提供如何在当前上下文之外只呈现模板的一部分的方法。
要“teleport”内容，我们需要使用 teleport 组件并把内容包在里面，如下：
<teleport to="#teleportContent"> <div class="teleport-body">I am Teleported!</div> </teleport>
此内容将被传送到 id 为 teleportContent 的节点中
<div id="teleportContent"></div>
唯一的条件是：在定义传送内容之前，传送到的目标节点需已经存在。
我们可以绑定 id，类，[data-xx]。
<!-- ok --> <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> <!-- Wrong --> <teleport to="h1" /> <teleport to="some-string" />
Vue Router
Vue2 中我们这样设置及绑定路由：
import Vue from 'vue' import VueRouter from 'vue-router'; import SomePage1 from './pages/SomePage1'; import SomePage2 from './pages/SomePage2'; Vue.use(VueRouter); const routes = [ { path: '/', redirect: '/path' }, { path: '/path', name: 'HomePage', component: SomePage1 }, { path: '/some/path', component: SomePage2 } ] const router = new VueRouter({ mode: 'history', linkExactActiveClass: 'active', routes }) export default router;
main.js
import router from './router'; new Vue({render: h => h(App), router, components: { App }}) .$mount('#app')
在 Vue3 中：
import { createRouter, createWebHistory } from 'vue-router' import SomePage1 from './pages/SomePage1' import SomePage2 from './pages/SomePage2' const routes = [ { path: '/', redirect: {name: 'HomePage'}}, { path: '/path', name: 'HomePage', component: SomePage1 }, { path: '/some/path', component: SomePage2 } ] const router = createRouter({ history: createWebHistory(), linkExactActiveClass: 'active', routes }) export default router;
main.js
import router from './router' const app = createApp(App) app.use(router) app.mount('#app')
小结
此篇总结了 Vue3 的一些主要功能，都是从实战出发来突破 Vue3 的新特性。实践是检验真理的唯一标准！Vue3 究竟强不强？有多强？市场和时间会告诉我们答案！从现阶段看，早学早享受QAQ~如果想要了解更多，请查阅 官方文档。
我是掘金安东尼，持续输出ING......点赞👍 + 收藏📕 + 关注👀，我们下期再会~
