Vue3-01 组合式API

最新推荐文章于 2024-05-18 08:00:00 发布

「已注销」

最新推荐文章于 2024-05-18 08:00:00 发布

阅读量492

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/duola8789/article/details/117035220

版权

本文介绍了Vue3的升级过程，包括VueCLI的更新、项目创建、Vue实例、Router和Store的创建。重点讨论了组合式API的调用时机、返回值、参数以及在模板中的使用。同时，对比了Vue3的生命周期钩子和Vue2的变化，探讨了响应式修改、依赖注入、模板Refs的使用，并与React Hooks进行了比较。文章指出，Vue3的组合式API旨在提供更灵活的代码复用和逻辑提取，但需要开发者保持良好的代码组织。

摘要由CSDN通过智能技术生成

升级到Vue3

升级VueCLI

VueCLI需要在4.3.1以上才可以支持Vue3

npm update -g @vue/cli

vue -V
@vue/cli 4.4.6

创建项目

vue create vue3-learning
vue add vue-next # 添加 vue3 插件升级为 vue3

在创建项目时选择手动添加配置，选择vue-router和Vuex，这样创建完的项目各个插件也都会升级为支持Vue3的版本

{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.6",
    "vuex": "^4.0.0-alpha.1"
  }
}

创建Vue实例

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

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

创建Router

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

创建路由的方式与以前有所变化，路由模式除了Hash模式（createWebHashHistory）和History模式（createWebHistory），还多了带缓存的History路由（createMemoryHistory）

使用路由跳转的API也有所变化：

import {useRouter} from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goHome = () => router.push('/');
    return {goHome}
  }
}

关于router的具体变化，后面再单独学习

创建Store

import {createStore} from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    changeCount(state, isAdd) {
      state.count = isAdd ? state.count + 1 : state.count - 1;
    }
  },
  actions: {},
  modules: {}
});

使用：

import {useStore} from 'vuex';

export default {
  setup() {
    const store = useStore();
    const storeState = store.state;
    return {storeState}
  }
}

可以看出来，Vuex和vue-router，API都有了一些变化，与React Hooks的API很类似，但是基本原理没有太大变化