学习 Vue3.0 （3）

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>