vue3学习
1.vue2的初始化, new Vue。
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
vue3的初始化, createApp
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
2.shims-vue.d.ts是为了typescript做的适配定义文件
3.onErrorCaptured,生命周期函数当捕获一个来自子孙组件的异常时激活钩子函数
4.Suspense,处理一些需要加载的组件,与loading切换
<Suspense>
<template #default>
<girl-show></girl-show>
</template>
<template #fallback>
<h1>Loading</h1>
</template>
</Suspense>
default为尽力想展示的组件,通常包含异步请求。fallback为未加载完前显示组件。
可以在default组件的setup外层加一个async。
以前vue2的处理方式:
<div> <h1>welcome</h1> <div>choose</div> <div v-if="loading">Loading</div> <img v-if="loaded" :src="result.imgUrl" /> <modal /> </div>
5.vue3模版可以不需要根div
6.vue3的生命周期多了一些都是带on的,setup执行在beforecreate之前,onBeforeMount onMounted都执行在原来的生命周期之前。
之前的destoryed变成了onUnmounted,更加语义化。
其他的新增钩子
// onUnmounted
// onActivated() <keep-alive></keep-alive>
// onDeactivated()
// onErrorCaptured
// onRenderTrackerd
// onRenderTriggered
7.ref(), reactive()创建响应式数据,
ref单个,reactive可以创建多个,但是reactive需要toRefs()转换,使用ref数据需要用xx.value。
setup中的东西要用的都需要return。
8.defineComponent:在TypeScript下,给予了组件 正确的参数类型推断 。
9.vue的hooks就是之前的函数,只是变量用,ref活着reactive,需要return出来。
10.vuex
state, //数据
getters, //计算属性
mutations, //方法
actions, //提交mutations
modules,
11.Teleport
<teleport to="#modal"> </teleport>
在index.html中创建一个teleport,创建一个跟root无关的组件,避免之前的样式影响,比如modal组件将很合适。