vue3笔记

如何创建vue3项目

基于 vue 脚手架 npm i @vue/cli -g

vue create <project-name>
cd <project-name>
npm run serve

基于 vite 创建项目

// npm
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
// yarn
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

vue3和vue2的区别

• 模板组件结构

vue2中的组件模板必须要有唯一的根节点

vue3的组件模板可以没有根节点

• 选项API 和 组合API

选项API：使用组件的选项（data、computed、methods、watch）构建代码

优点：易于学习，这些选项规定了你变量方法该放在哪里

缺点：代码组织性差，当组件应用变的很大，逻辑关注的视图也会很长

组合API：以功能为单位，组织代码结构

源码优化

• 数据响应式

vue2使用Object.defineproperty进行数据监听

vue3使用proxy进行数据监听

router4.x 和 router3.x的区别

• 创建路由的方法

router3.x 使用 new Router创建路由

路由模式使用mode选项：mode: 'history' | 'hash'

import Router from 'vue-router'

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
}]

const router = new Router({
    mode: 'history',
    routes
})

export default router

router4.x 使用 createRouter创建路由

路由模式使用函数方法：history: createWebHistory() | createWebHashHistory()

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

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
}]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

组合式API相关方法

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount 挂载DOM前
mounted	onMounted 挂载DOM后
beforeUpdate	onBeforeUpdate更新前
updated	onUpdated更新后
beforeUnmount	onBeforeUnmount卸载销毁前
unmounted	onUnmounted卸载销毁后
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered