Vue3(六)、其他API，Vue3组件Teleport ，Suspense；全局API转移到应用对象；Vue3非兼容性改变

一、其他API

1. shallowRef 与 shallowReactive

(1) shallowRef
shallowRef：创建一个响应式数据，但只对顶层属性进行响应式处理。

当采用ref创建响应式数据时，这四个按钮都能对数据进行修改；当采用shallowRef时,深层的属性无法被修改。

简单来说就是sum和person都能被修改，但是person里层的age和name无法被修改。
浅层的：xxx.value, 响应式
深层的:xxx.value.属性，不是响应式。

(2) shallowReactive
shallowReactive：创建一个浅层响应式对象。
特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

let car = shallowReactive({
name: '小迪',
options: {
color: '黑色',
price: 300
}
})

car、car.name及car.options可以被修改：

car.name = '小奥'
car.options = { color: '彩色', price: 100 }
Object.assign(car, { name: '小奔', options: { color: '彩色', price: 50 } })

而options对象内部的属性无法被修改:

car.options.price = 400
car.options.color = '白色'

总结：

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

2. readOnly与shallowReadOnly

readOnly

语法 :readonly(对象)
特点：
(1) 对象的所有嵌套属性都将变为只读。
(2) 无法对改对象的属性进行操作（在开发模式下，还会在控制台中发出警告）

点就修改sum2时，控制台会报警告。

应用场景： 保护全局状态或配置不被修改。

shallowReadOnly

语法：shallowReadonly(对象)
特点
(1) 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
(2) 适用于只需保护对象顶层属性的场景。

3. toRaw 与 markRaw，customRef

到时候看官网

二、Vue3新组件

1. Teleport

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
语法：<teleport to='选择器'>

父组件中：

<template>
<div class="box">
<h3>父组件</h3>
<Person />
</div>
</template>

现将子组件的内容区移到body元素中。

页面效果：

对比页面结构：

2. Suspense

在等待异步组件在发送请求时，页面渲染一些别的内容，提升用户体验。
Child.vue

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    <h5>{{ content }}</h5>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
let { data: { content } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
</script>

用了setup语法糖，所以这里不用写async了，已经都处理了。

父组件App.vue:

<template>
<h2>父组件</h2>
<Suspense>
<!-- 异步组件请求完成时显示的内容 -->
<template v-slot:default>
<Child />
</template>
<!-- 异步组件请求未完成时 显示的内容-->
<template v-slot:fallback>
<h3>加载中...</h3>
</template>
</Suspense>
</template>

总结：

• 异步引入组件
• 使用Suspense包裹组件，并配置好default 与 fallback

三、全局API转移到应用对象

全局API就是Vue.???，能.出来的东西
转移到了:
应用对象app.???

• app.component----等价于Vue2中注册全局组件的Vue.component

  // main.ts
  import { createApp } from 'vue'
  import App from './App.vue'
  import Hello from '@/components/Hello.vue'
  // 创建应用
  const app = createApp(App)
  // 全局组件
  app.component('Hello', Hello)
  // 挂载应用
  app.mount('#app')
  

• app.config

  app.config.globalProperties.x = 99 // 了解即可
  // 等价于
  Vue.prototype.x = 99
  

• app.directive—定义全局指令

  main.ts：

  app.directive('beauty', (element, { value }) => {
    element.innerText += value
    element.style.color = 'green'
    element.style.backgroundColor = 'yellow'
  })
  

  组件中：

      <h3 v-beauty="'!!!'">hello world</h3>
  

• app.mount – 挂载应用对象
• app.unmount – 卸载
• app.use —安装插件(router,pinia)

四、Vue3的非兼容性改变

通俗来说就是：Vue3与Vue2不同的地方！！
详细见官网：Vue3非兼容性改变

• 过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。

• keyCode 作为 v-on 修饰符的支持。

• v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync。

• v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化。

• 移除了$on、$off 和 $once 实例方法。

• 移除了过滤器 filter。

• 移除了$children 实例 propert。

  …

原文地址：https://blog.csdn.net/qq_44285582/article/details/142556119

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！