目录
API对比
shallowRef 与 shallowReactive
shallowRef
作用：创建一个响应式数据，但只对顶层属性进行响应式处理。
用法：
import { shallowRef } from 'vue';
let myVar = shallowRef(initialValue);特点：
- 只跟踪引用值的变化，不关心值内部的属性变化。
- 适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。
shallowReactive
作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的。
用法：
import { shallowReactive } from 'vue';
const myObj = shallowReactive({ ... });特点：
- 对象的顶层属性是响应式的，但嵌套对象的属性不是。
- 适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。
总结
通过使用 shallowRef() 和 shallowReactive()，可以绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本。这使得属性的访问变得更快，可提升性能。
对比总结
| 特性 | shallowRef | shallowReactive |
|---|---|---|
| 创建方式 | shallowRef(initialValue) | shallowReactive(initialValue) |
| 响应式处理 | 只对顶层属性进行响应式处理 | 只对顶层属性进行响应式处理 |
| 嵌套对象的响应式 | 嵌套对象不是响应式的 | 嵌套对象不是响应式的 |
| 访问方式 | 通过 .value 访问 | 直接访问 |
| 适用场景 | 需要浅层响应式的简单对象 | 需要浅层响应式的简单对象 |
使用场景
-
shallowRef：适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。 -
shallowReactive：适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。
总结
- shallowRef 和 shallowReactive 都是浅层响应式工具，只对对象的顶层属性进行响应式处理。
- 它们都不会递归地对嵌套对象进行响应式处理。
- shallowRef 需要通过 .value 访问属性，而 shallowReactive 可以直接访问属性。
readonly 与 shallowReadonly
readonly
作用：用于创建一个对象的深只读副本。
用法：
import { readonly, reactive } from 'vue';
const original = reactive({ ... });
const readOnlyCopy = readonly(original);特点：
- 对象的所有嵌套属性都将变为只读。
- 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。
应用场景：
- 创建不可变的状态快照。
- 保护全局状态或配置不被修改。
shallowReadonly
作用：与 readonly 类似，但只作用于对象的顶层属性。
用法：
import { shallowReadonly, reactive } from 'vue';
const original = reactive({ ... });
const shallowReadOnlyCopy = shallowReadonly(original);特点：
-
只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
-
适用于只需保护对象顶层属性的场景。
对比总结
| 特性 | readonly | shallowReadonly |
|---|---|---|
| 创建方式 | readonly(original) | shallowReadonly(original) |
| 只读处理 | 递归地将所有属性（包括嵌套对象）变成只读 | 只将顶层属性变成只读 |
| 嵌套对象的只读性 | 嵌套对象的属性也是只读的 | 嵌套对象的属性不是只读的 |
| 适用场景 | 需要完全只读的对象 | 只需要顶层属性只读的对象 |
使用场景
- readonly：适用于需要完全只读的对象，确保对象及其所有嵌套属性都无法修改。
- shallowReadonly：适用于只需要顶层属性只读的对象，允许修改嵌套对象的属性。
总结
- readonly 和 shallowReadonly 都是用于创建只读对象的工具。
- readonly 会递归地将对象的所有属性（包括嵌套对象）都变成只读的。
- shallowReadonly 只会使对象的最顶层属性变成只读的，嵌套对象的属性不是只读的。
toRaw 与 markRaw
toRaw
作用：用于获取一个响应式对象的原始对象。toRaw 返回的对象不再是响应式的，不会触发视图更新。
官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。
何时使用？ —— 在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象。
import { reactive, toRaw, markRaw, isReactive } from "vue";
/* toRaw */
// 响应式对象
let person = reactive({ name: 'tony', age: 18 });
// 原始对象
let rawPerson = toRaw(person);
console.log(isReactive(person)); // true
console.log(isReactive(rawPerson)); // falsemarkRaw
作用：标记一个对象，使其永远不会变成响应式的。
例如使用 mockjs 时，为了防止误把 mockjs 变为响应式对象，可以使用 markRaw 去标记 mockjs。
/* markRaw */
let citys = markRaw([
{ id: 'asdda01', name: '北京' },
{ id: 'asdda02', name: '上海' },
{ id: 'asdda03', name: '天津' },
{ id: 'asdda04', name: '重庆' }
]);
// 根据原始对象 citys 去创建响应式对象 citys2 —— 创建失败，因为 citys 被 markRaw 标记了
let citys2 = reactive(citys);
console.log(isReactive(citys)); // false
console.log(isReactive(citys2)); // false对比总结
| 特性 | toRaw | markRaw |
|---|---|---|
| 作用 | 获取响应式对象的原始对象 | 标记对象，使其永远不会变成响应式对象 |
| 返回值 | 非响应式的原始对象 | 标记后的对象 |
| 响应式处理 | 返回的对象不会触发响应式更新 | 标记的对象永远不会变成响应式对象 |
| 适用场景 | 需要访问原始对象的场景 | 需要确保对象永远不会变成响应式对象的场景 |
使用场景
- toRaw：适用于需要访问原始对象的场景，避免不必要的响应式处理。
- markRaw：适用于需要确保对象永远不会变成响应式对象的场景，例如某些第三方库的对象或不需要响应式的配置对象。
总结
- toRaw 用于获取响应式对象的原始对象，返回一个非响应式的原始对象。
- markRaw 用于标记一个对象，使其永远不会被转换为响应式对象。
customRef
在 Vue 3 中，customRef 是一个用于创建自定义 ref 的工具。它允许我们完全控制 ref 的依赖追踪和更新触发机制。通过 customRef，可以实现更复杂的响应式逻辑，例如防抖、节流、异步数据获取等。
customRef 的基本用法
customRef 接受一个工厂函数，该函数返回一个包含 get 和 set 方法的对象。get 方法用于获取值，set 方法用于设置值。
import { customRef } from 'vue';
function useDebouncedRef(value, delay = 200) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track(); // 追踪依赖
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger(); // 触发更新
}, delay);
}
};
});
}
const debouncedRef = useDebouncedRef('initial value', 500);
debouncedRef.value = 'new value'; // 500ms 后才会更新解释
- customRef 接受一个工厂函数，该函数返回一个包含 get 和 set 方法的对象。
- get 方法用于获取值，并调用 track 方法来追踪依赖。
- set 方法用于设置值，并调用 trigger 方法来触发更新。
- 在上面的示例中，useDebouncedRef 创建了一个防抖的 ref，只有在指定延迟后才会更新值。
应用场景
- 防抖和节流：通过 customRef 可以实现防抖和节流的功能，避免频繁触发更新。
- 异步数据获取：可以在 set 方法中进行异步数据获取，并在数据获取完成后更新值。
- 自定义依赖追踪：可以根据需要自定义依赖追踪逻辑，实现更复杂的响应式行为。
总结
customRef 是一个强大的工具，允许我们完全控制 ref 的依赖追踪和更新触发机制。通过 customRef，我们可以实现更复杂的响应式逻辑，例如防抖、节流、异步数据获取等。
示例：异步数据获取
import { customRef } from 'vue';
function useAsyncRef(initialValue, asyncFunc) {
let value = initialValue;
let loading = false;
return customRef((track, trigger) => {
return {
get() {
track(); // 追踪依赖
return value;
},
set(newValue) {
if (typeof newValue === 'function') {
loading = true;
asyncFunc(newValue).then(result => {
value = result;
loading = false;
trigger(); // 触发更新
});
} else {
value = newValue;
trigger(); // 触发更新
}
}
};
});
}
const asyncRef = useAsyncRef('initial value', async (func) => {
return await func();
});
asyncRef.value = async () => {
return 'new value from async function';
};解释
- useAsyncRef 创建了一个可以处理异步数据获取的 ref。
- 当 set 方法接收到一个函数时，会调用 asyncFunc 进行异步数据获取，并在数据获取完成后更新值。
- 在 get 方法中，调用 track 方法来追踪依赖。
- 在 set 方法中，调用 trigger 方法来触发更新。
Vue3新组件
Teleport
Teleport 是 Vue 3 中引入的一个内置组件，用于将组件的模板部分渲染到 DOM 中的指定位置，而不是其父组件的 DOM 结构中。这在处理模态框、弹出层、全局提示等场景时非常有用。
基本用法
Teleport 组件有两个主要属性：
- to：指定目标元素的选择器或 DOM 元素，表示要将内容渲染到哪个位置。
- disabled：布尔值，表示是否禁用 Teleport 功能，如果为 true，内容将渲染在当前组件的位置。
<template>
<div>
<button @click="showModal = true">打开模态框</button>
<Teleport to="body">
<div v-if="showModal" class="modal">
<p>这是一个模态框</p>
<button @click="showModal = false">关闭</button>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>
<style scoped>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>应用场景
- 模态框：将模态框的内容渲染到 body 元素中，避免被父组件的样式或布局影响。
- 全局提示：将全局提示信息渲染到页面的固定位置，如页面顶部或底部。
- 弹出层：将弹出层的内容渲染到页面的指定位置，避免被父组件的样式或布局影响。
动态控制 Teleport
我们可以通过 disabled 属性动态控制 Teleport 的行为。例如，根据某些条件决定是否将内容渲染到指定位置。
<template>
<div>
<button @click="showModal = true">打开模态框</button>
<Teleport :to="teleportTarget" :disabled="isDisabled">
<div v-if="showModal" class="modal">
<p>这是一个模态框</p>
<button @click="showModal = false">关闭</button>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
const teleportTarget = ref('body');
const isDisabled = ref(false);
// 动态控制 Teleport 的行为
const toggleTeleport = () => {
isDisabled.value = !isDisabled.value;
};
</script>
<style scoped>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>总结
Teleport 是一个非常有用的组件，允许我们将组件的内容渲染到 DOM 中的指定位置，而不是其父组件的 DOM 结构中。这在处理模态框、弹出层、全局提示等场景时非常有用。通过 to 和 disabled 属性，我们可以灵活控制 Teleport 的行为。
Suspense
Suspense 是 Vue 3 中引入的一个内置组件，用于在异步组件加载时渲染一些额外内容，从而提升用户体验。Suspense 允许我们在等待异步组件加载完成时显示一个占位符或加载状态，而不是直接显示空白或未加载的内容。
基本用法
Suspense 组件有两个插槽：
- default：用于放置异步组件或异步操作的内容。
- fallback：用于放置在异步组件加载完成前显示的占位符内容。
<template>
<div>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
// 异步引入组件
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
</script>解释
- Suspense 包裹了异步组件 AsyncComponent。
- default 插槽放置异步组件的内容。
- fallback 插槽放置在异步组件加载完成前显示的占位符内容。
- defineAsyncComponent 用于异步引入组件。
应用场景
- 异步组件加载：在异步组件加载完成前显示加载状态或占位符内容。
- 数据获取：在数据获取完成前显示加载状态或占位符内容。
动态控制 Suspense
我们可以通过 Suspense 的 default 和 fallback 插槽动态控制异步组件的加载状态。例如，在数据获取完成前显示加载状态，数据获取完成后显示实际内容。
<template>
<div>
<Suspense>
<template #default>
<div v-if="data">
<h1>{{ data.title }}</h1>
<p>{{ data.description }}</p>
</div>
</template>
<template #fallback>
<div>Loading data...</div>
</template>
</Suspense>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
// 模拟异步数据获取
const fetchData = async () => {
// 模拟异步请求
await new Promise(resolve => setTimeout(resolve, 2000));
data.value = {
title: 'Async Data',
description: 'This is some async data.'
};
};
fetchData();
</script>解释
- Suspense 包裹了异步数据获取的内容。
- default 插槽放置数据获取完成后的内容。
- fallback 插槽放置在数据获取完成前显示的加载状态。
- fetchData 方法模拟异步数据获取，并在数据获取完成后更新 data 的值。
总结
Suspense 是一个非常有用的组件，允许我们在异步组件或异步操作加载完成前显示占位符内容，从而提升用户体验。通过 default 和 fallback 插槽，我们可以灵活控制异步加载状态的显示。
全局API转移到应用对象
在 Vue 3 中，全局 API 被转移到了应用对象（app）上。这意味着我们可以通过应用实例来访问和配置 Vue 的各种功能，而不是直接调用全局 API。这种设计使得每个应用实例更加独立，避免了全局状态的污染。
app.component：用于注册或获取全局组件。
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';
const app = createApp(App);
// 注册全局组件
app.component('MyComponent', MyComponent);
// 获取全局组件
const MyComponentInstance = app.component('MyComponent');
app.mount('#app');app.config：用于配置应用的全局配置，如错误处理器、警告处理器等。
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 配置全局错误处理器
app.config.errorHandler = (err, vm, info) => {
console.error('Global error handler:', err, vm, info);
};
// 配置全局警告处理器
app.config.warnHandler = (msg, vm, trace) => {
console.warn('Global warning handler:', msg, vm, trace);
};
app.mount('#app');app.directive：用于注册或获取全局自定义指令。
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 注册全局自定义指令
app.directive('focus', {
mounted(el) {
el.focus();
}
});
// 获取全局自定义指令
const focusDirective = app.directive('focus');
app.mount('#app');app.mount：用于将应用实例挂载到指定的 DOM 元素上。
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 挂载应用实例到 #app 元素
app.mount('#app');app.unmount：用于卸载应用实例。
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 挂载应用实例
const vm = app.mount('#app');
// 卸载应用实例
app.unmount();app.use：用于安装插件。
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';
const app = createApp(App);
// 安装插件
app.use(MyPlugin);
app.mount('#app');其他
- 过渡类名 `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`。
- ......
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
