wdnmd

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组件将很合适。

posted @ 2022-02-13 12:55  FreshChick  阅读(177)  评论(0编辑  收藏  举报