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

 

 

 

 

 

 

 

 

 

 

 

 

ref 和 reactive 区别？

• 定义数据
  • ref可传入基本类型和引入类型的数据，但通常用来定义基本类型数据，不推荐传入对象
  • reactive通常用来定义引用类型数据 （不可以传入基本类型数据，如果传入则不会返回proxy对象，由于reactive是基于proxt实现响应式的，如果返回的不是proxy对象，则该数据不会具有响应式）
  • ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转化为代理对象
• 实现原理
  • ref通过Object.defineProperty()来实现数据代理
  • reactive使用proxy实现数据代理，并且通过Reflect操作源对象内部的数据
• 使用及修改
  • ref操作数据需要.value，template模板中不需要
  • reactive不需要