vue3学习

1.vue2的初始化， new Vue。

?

1 2 3 4 5 6 7 8

import Vue from 'vue' import App from './App.vue'   Vue.config.productionTip = false   new Vue({   render: h => h(App), }).$mount('#app')

vue3的初始化， createApp

?

1 2 3 4

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的处理方式：

?

1 2 3 4 5 6 7

<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

?

1 2	<teleport to="#modal"> </teleport>

　在index.html中创建一个teleport，创建一个跟root无关的组件，避免之前的样式影响，比如modal组件将很合适。