学习 Vue3.0

Fragment
在 Vue 2 中，组件必须有一个根标签
在 Vue 3 中，组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中
减少标签嵌套层级、减少内存占用
Teleport
能够将组件内部的某些内容渲染到外部的某个元素上

<teleport to="targetDom">
  <div v-if="isShow">
    <p>这是内部的内容</p>
  </div>
</teleport>

Suspense
等待异步组件时，渲染一些后备内容，获得更好的用户体验

<!-- 
  // 父组件 
  // 使用suspense包裹,配置好default与fallback 
-->
<div>
  <Suspense>
    <template>
      <Child></Child>
    </template>
    <template v-slot:fallback>
      <div>loading...</div>
    </template>
  </Suspense>
</div>

<!-- 第一步 引入异步组件 -->
<script>
  import {
    defineComponent } from 'vue';
  const Child = defineComponent(() => import('../components/Child.vue'));

  export default {
   
    components: {
   
      Child
    }
  };
</script>

// 子组件
// 方式一
setup(){
   
  let sum = ref(0)
  return new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve({
   sum})
    }, 1000)
  })
}
// 方式二
async setup(){
   
  let sum = ref(0)
  let p = new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve({
   sum})
    }, 1000)
  })
  return await p
}

Vue 3 中其他改变

1. 将全局的 API 调整到应用实例 app 上
   2.x 全局 API(Vue) 3.x 实例 API(app)
   Vue.config.xxx app.config.xxx
   Vue.config.productionTip 移除
   Vue.component app.component
   Vue.directive app.directive
   Vue.mixin app.mixin
   Vue.use app.use
   Vue.prototype app.config.globalProperties
2. data 选项应始终声明为一个函数
3. 移除 keyCode 作为 v-on 的修饰符,同时也不再支持 config.keyCodes
4. 移除 v-on.native 修饰符

//父组件
<child
  :click="handleClick"   // 未在子组件中定义认为原生事件
  :close="handleClose"   // 在子组件中定义过的自定义事件
></child>

// 子组件
<script>
  export default{
   
    emits:['close']
  }
</script>

5. 移除过滤器（filter）
在 3.x 中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。

// 全局过滤器
const app = createApp(App)

app.config.globalProperties.$filters = {
   
  formateDate(value) {
   
    return value.toLocaleDateString()
  }
}

//  组件中使用

<p>{
   {
    $filters.formateDate(new Date()) }}</p>

6. 移除$listeners
在 Vue 3 的虚拟 DOM 中，事件监听器现在只是以 on 为前缀的 attribute，这样它就成为了 listeners 被移除了,

// 父组件
<child msg="hello word" @close="handleClose"></child>

// 子组件
<template>
  <div v-bind="$attrs">
    <h1>text</h1>
  </div>
  <div>hello</div>
</template>
<script>
  export default {
   
    ......
    setup(props: any, {
    emit, slots, attrs }: any) {
   
      console.log('props', props);
      console.log('emit', emit);
      console.log('slots', slots);
      console.log('attrs', attrs);  // Proxy {msg: 'Hello World', __vInternal: 1, onClose: ƒ}
    }
  };
</script>