1.开始踩坑vue3
# 简介
这里是个人初体验vue3的一些记录,边学习边记录以求更快的进步的同时,还能不断回过头复习 接下来我就从最简单的安装开始吧,详细安装过程就不记录了
# 三种安装方式
# 1.vite
vite是尤大开发的工具,估计是想取代webpack,体验的时候能清楚感受到速度之快。三种体验姿势最喜欢这种。
npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev
2
3
4
5
# 2.vue cli
官方定制的vue-cli 需要升级为最新版本才能体验
npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve
2
3
4
5
6
# 3.webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install
npm run dev
2
3
4
# Vue3.0 新功能
- Composition API----组合式 API,包括setup()等
- Reactivity API----响应式系统 API,包括ref()等
- Teleport---内置了传送组件
- Fragments---template里可以存在多个根DOM(或组件),Vue2.x 的时候只能存在1个
- Emits 组件中添加了自定义事件参数
- v-model 的修改,可以传入参数,因此可以使用多个v-model,还可以自定义修饰符,移除了.sync修饰符。
- createRenderer API from @vue/runtime-core to create custom renderers
# 被移除的内容
- 移除了keyCode修饰符,可以用kebab-case名来代替(比如.delete/.enter)
- 移除了实例上的$on, $off 和 $once 方法
- 移除了过滤器Filters,Vue3.0 建议使用 computed 来实现
- 移除了Inline templates attributes
- 移除了.sync修饰符
# API 参考/新增以及被废弃的 API
---【加粗斜体代表新增,删除线代表移除,斜体代表有改动】---
# 实例 API(从全局 API 拆分出来 的)
在 Vue 3 中,会全局改变 Vue 行为的 API 移到了实例(通过 createApp 创建)的 API 中。它们只会影响该实例。 如下:mount、provide、unmount、directive(自定义指令的生命周期钩子更名了)、component、config、mixin、use
# 全局 API
createApp、h(render()的别名)、defineComponent、defineAsyncComponent、resolveComponent(只能在渲染函数里使用)、resolveDirective(只能在渲染函数里使用)、withDirectives(只能在渲染函数里使用)、createRenderer(只能在渲染函数里使用)、nextTick、extend、filter、compile、observable(被reactive替代)、version、set
# 选项
# Data
emits、data、props、computed、methods、watch、propsData
# 生命周期钩子
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeUnmount(beforeDestroy)、unmounted(destroyed)、errorCaptured、renderTracked、renderTriggered
# 资源
directives、components、filters
# 组合
mixins、extends、provide / inject、setup、parent
# 其他
name、inheritAttrs、delimiters、functional、model、comments
# 实例属性
$data、$props、$el、$options、$parent、$root、$slots、$refs、$attrs、$children、$scopedSlots、$isServer、$listeners
# 实例方法(生命周期也被合并到这里了)
$watch、$emit、$forceUpdate、$nextTick、$set(请注意这个没有啦)、$delete、$mount、$destroy
# 指令
v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-is(本来是通过is实现)
# 特殊属性
key、ref、is、slot、slot-scope、scope(这3个在 Vue 2.6 以上就被废弃了)
# 内置的组件
component、transition、transition-group、keep-alive、slot、teleport
# [新增]响应式系统 API(Reactivity API )
# 基本响应式 APIs
reactive、readonly、isProxy、isReactive、isReadonly、toRaw、markRaw、shallowReactive、shallowReadonly
# refs
ref、unref、toRef、toRefs、isRef、customRef、shallowRef
# Computed and watch
computed、watchEffect、watch
# [新增]组合式 API(Composition API )
setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptured、onRenderTracked、onRenderTriggered、provide、inject