文章目录
一、其他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
。…