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 |
- 如何创建vue3项目
- vue3和vue2的区别
- 源码优化
- router4.x 和 router3.x的区别
- 组合式API相关方法
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/17076133.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)