持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

在vue2.0中，我们已经知道创建一个组件，使用data、computed、methods、watch 等组件选项来组织逻辑通常都很有效。但是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要。如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

组合式API入口

setup 选项是一个接收 props 和 context 的函数，正式组合式API的入口。同时注意的是在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

watch函数

watch(tip,(newValue,oldValue)=>{
    console.log(`watch----,${newValue},${oldValue}`)
})

在setup函数里，定义了一个watch函数，点击改变tip的值的时候，这个函数就会被调用了

可以看到console.log的日志，已经打印出了新的值和旧的值都出来了。

reactive 函数

let data=reactive({
    job:'总经理',
    infoList:["测试","运营","开发"]
})

reactive函数需要传一个对象，定义好我们的变量，可以是普通类型，数组集合均可以定义，reactive创建的变量不会自动加上 .value。我们改变值的时候直接data.job就可以响应式改变值了。

isRef, isReactive函数

这2个函数是判断这个变量属于ref类型还是reactive的

console.log(isRef(tip),isReactive(data))

通过打印为true还是false就可以。

变化的API

入口函数

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";

const  app=createApp(App)
    app.use(router)
    app.use(store)
    app.mount('#app')

相对于vue2 ，main.js入口处引入了createApp函数，通过createApp创建处我们的全局对象，挂载对应的节点。

路由

相对于vue2.0，在vue3.0我们这里需要引入

import {useRouter} from "vue-router";
const router= useRouter()
router.push('/About')

相对于vue2初始化全局引入，通过 this.$router.push 有些许差别。这里我们都需要先声明后使用。

总结

对于vue2的差别，大致是以上这些，主要是setup的变化，路由的一些小改动，大部分均可按之前的方式是使用就可以。

Vue3.0 变化的API使用

前言