如何提升网站seo排名,网站模版怎么用,区块链软件开发,遵义仁怀网站建设在 Vue 3 中#xff0c;setup 函数的写法有两种主要方式#xff1a;一种是使用 script setup 标签#xff0c;另一种是写在 export default 对象中作为 setup 函数。它们之间的区别如下#xff1a; script setup 标签 位置#xff1a;使用 script set…在 Vue 3 中setup 函数的写法有两种主要方式一种是使用 script setup 标签另一种是写在 export default 对象中作为 setup 函数。它们之间的区别如下 script setup 标签 位置使用 script setup 标签来编写 setup 函数。 作用是 Vue 3 的 Composition API 的一种语法糖简化了 setup 函数的使用。 优点 简化语法: 省去了显式地定义 setup 函数代码更简洁。更好支持 TypeScript: 更好的类型推断和更简洁的 TypeScript 支持。自动导入: 可以自动导入一些 Vue 内置的 API 和自定义的组件、函数等。 templatediv{{ message }}/div /templatescript setup import { ref } from vue;const message ref(Hello Vue 3!); /script注意此写法defineProps和defineEmits是自动使用无需显式导入 export default 对象中的 setup 函数 位置在 export default 对象中定义 setup 函数。 作用这种方式是 Vue 3 提供的标准方式允许在对象中定义 setup 方法。 优点 与 Options API 兼容: 适用于需要结合使用 Composition API 和 Options API 的情况。传统方式: 适合于逐步迁移旧代码或与传统 Vue 2.x 的 Options API 结合使用。 templatediv{{ message }}/div /templatescript import { ref } from vue;export default {setup() {const message ref(Hello Vue 3!);return { message };} } /script总结 script setup: 更简洁、易读适合新开发的 Vue 3 组件和更复杂的逻辑组织。export default 对象中的 setup: 更兼容旧有代码和 Options API适合需要逐步迁移的项目。 声明变量 ref 适用场景主要用于定义单一的基本类型如字符串、数字、布尔值或对非响应式对象的包装。它也适用于创建响应式的引用类型数据浅层响应式。 使用方法创建一个包含 .value 属性的响应式对象你需要通过 .value 来访问和修改其值。 示例 templatediv{{ count }}/divbutton clickincrementIncrement/button /templatescript setup import { ref } from vue;// 创建一个响应式的基本类型变量 const count ref(0);// 修改变量值 function increment() {count.value; } /scriptreactive 适用场景用于创建一个深度响应式的对象。它主要用于处理复杂的数据结构如嵌套对象和数组。reactive 会对对象的所有嵌套属性进行响应式处理。 使用方法使用 reactive 创建的对象本身就是响应式的你可以直接访问和修改对象的属性而不需要通过 .value。 示例 templatediv{{ user.name }}/divbutton clickupdateNameChange Name/button /templatescript setup import { reactive } from vue;// 创建一个响应式的对象 const user reactive({name: John Doe });// 修改对象属性 function updateName() {user.name Jane Doe; } /script​ 计算属性 基本用法用来进行数据的衍生计算。 templatedivpCount: {{ count }}/ppDoubled Count: {{ doubledCount }}/pbutton clickcountIncrement/button/div /templatescript import { ref, computed } from vue;export default {setup() {const count ref(0);// 定义计算属性const doubledCount computed(() count.value * 2);return {count,doubledCount};} }; /script特性 响应式计算属性会自动依赖其内部使用的数据并且在这些数据发生变化时会重新计算。Vue 会智能地缓存计算属性的值直到它的依赖数据发生变化。 只读默认情况下计算属性是只读的。如果你需要计算属性具有 setter写入功能可以提供一个对象的形式来定义计算属性如下所示 import { ref, computed } from vue;export default {setup() {const count ref(0);// 定义具有 getter 和 setter 的计算属性const doubledCount computed({get: () count.value * 2,set: (newValue) {count.value newValue / 2;}});return {count,doubledCount};} };生命周期钩子函数 onBeforeMount 用途: 在组件挂载之前被调用。此钩子在模板编译完成但尚未挂载到 DOM 上时触发。 函数签名: import { onBeforeMount } from vue;onBeforeMount(() {console.log(Component is about to mount); });onMounted 用途: 在组件挂载到 DOM 后调用。用于访问 DOM 元素或执行需要在 DOM 渲染后才能完成的操作。 函数签名 import { onMounted } from vue;onMounted(() {console.log(Component has been mounted); });onBeforeUpdate 用途: 在组件更新之前被调用。此钩子在组件的数据发生变化并将要重新渲染时触发。 函数签名 import { onBeforeUpdate } from vue;onBeforeUpdate(() {console.log(Component is about to update); });onUpdated 用途: 在组件更新之后调用。用于处理更新后的逻辑或与新的 DOM 状态相关的操作。 函数签名 import { onUpdated } from vue;onUpdated(() {console.log(Component has been updated); });onBeforeUnmount 用途: 在组件卸载之前被调用。用于清理资源或移除事件监听器等操作。 函数签名 import { onBeforeUnmount } from vue;onBeforeUnmount(() {console.log(Component is about to unmount); });onUnmounted 用途: 在组件卸载后调用。用于执行卸载后需要完成的操作如清理外部资源或停止定时器。 函数签名 import { onUnmounted } from vue;onUnmounted(() {console.log(Component has been unmounted); });onErrorCaptured 用途: 当组件的子组件发生错误时调用。可以用于捕获错误并处理它们。 函数签名 import { onErrorCaptured } from vue;onErrorCaptured((error, instance, info) {console.error(Error captured:, error);return false; // 如果返回 false错误不会被进一步处理 });onActivated 用途: 当组件被激活时调用。主要用于 keep-alive 包裹的组件组件从缓存中激活时触发。 函数签名 import { onActivated } from vue;onActivated(() {console.log(Component has been activated); });onDeactivated 用途: 当组件被停用时调用。主要用于 keep-alive 包裹的组件组件被缓存时触发。 函数签名 import { onDeactivated } from vue;onDeactivated(() {console.log(Component has been deactivated); });响应式属性监听 watch 作用一个用于监听数据变化并执行回调函数的 API。可以用于监视响应式数据的变化、执行副作用操作或处理复杂的逻辑。提供了更灵活的方式来处理数据变化与计算属性 (computed) 的响应性相比watch 更适合处理需要副作用的场景。 基本用法 允许你观察一个或多个响应式数据源并在这些数据源发生变化时执行回调函数 import { ref, watch } from vue;export default {setup() {const count ref(0);// 监视 count 的变化watch(count, (newValue, oldValue) {console.log(Count changed from ${oldValue} to ${newValue});});const info reactive({name: dfc});// 监视 name 的变化watch(() info.name, (newName, oldName) {console.log(info.name changed from ${oldName} to ${newName});})return {count};} };import { ref, watch, toRefs } from vue;export default {setup() {const count ref(0);const name ref(Alice);// 监视多个数据源watch([count, name], ([newCount, newName], [oldCount, oldName]) {console.log(Count changed from ${oldCount} to ${newCount});console.log(Name changed from ${oldName} to ${newName});});const info reactive({name: dfc,age: 12,});// 监视多个数据源watch([() info.name, () info.age], ([newName, oldName], [newAge, oldAge]) {console.log(info.name changed from ${oldName} to ${newName});console.log(info.age changed from ${oldAge} to ${newAge});});return {count,name,info,// ...toRefs(info)};} };其他特性 深度监视需要深度监视对象的嵌套属性可以使用 deep 选项 import { ref, watch } from vue;export default {setup() {const user ref({ name: Alice, age: 30 });// 深度监视 user 对象watch(user, (newValue, oldValue) {console.log(User object changed:, newValue);}, { deep: true });return {user};} };立即执行初始化时立即执行一次回调可以使用 immediate 选项 import { ref, watch } from vue;export default {setup() {const count ref(0);// 立即执行回调watch(count, (newValue, oldValue) {console.log(Count changed from ${oldValue} to ${newValue});}, { immediate: true });return {count};} };停止监听需要在某些条件下停止监听可以使用 watch 函数返回的停止函数 import { ref, watch } from vue;export default {setup() {const count ref(0);const stopWatch watch(count, (newValue, oldValue) {console.log(Count changed from ${oldValue} to ${newValue});});// 停止监听setTimeout(() {stopWatch();console.log(Stopped watching count);}, 5000);return {count};} };watchEffect 作用一个用于自动追踪响应式数据并执行副作用的 API。它与 watch 不同因为 watchEffect 不需要明确地指定要观察的数据源而是自动追踪函数内部使用的所有响应式数据。这使得 watchEffect 更加简洁和直观特别是当你不需要对数据变化做复杂的处理时。 基本用法 import { ref, watchEffect } from vue;export default {setup() {const count ref(0);// 使用 watchEffect 追踪 count 的变化watchEffect(() {console.log(Count is: ${count.value});});// 修改 count 的值setTimeout(() {count.value 1;}, 1000);return {count};} };处理副作用: watchEffect 主要用于处理副作用如更新 DOM、发送网络请求等。它在数据源变化时会重新执行回调函数因此非常适合处理那些与数据变化有关的操作。 停止追踪 import { ref, watchEffect } from vue;export default {setup() {const count ref(0);// 使用 watchEffect 追踪 count 的变化const stop watchEffect(() {console.log(Count is: ${count.value});});// 停止追踪setTimeout(() {stop();console.log(Stopped watching count);}, 5000);return {count};} };与 watch 的对比 watchEffect 和 watch 都可以用来处理响应式数据的变化但它们的使用场景和方式有所不同 watchEffect: 自动追踪函数内所有响应式数据的变化适合处理简单的副作用不需要手动指定数据源。watch: 需要明确指定要观察的数据源适合处理更复杂的逻辑和副作用允许对数据源变化进行更细粒度的控制。 深度追踪 import { ref, watch } from vue;export default {setup() {const user ref({ name: Alice, age: 30 });// 使用 watch 进行深度追踪watch(user, (newValue, oldValue) {console.log(User object changed:, newValue);}, { deep: true });return {user};} };内置组件 Teleport 作用允许你将子组件的渲染内容“传送”到 DOM 中的不同位置 示例 // teleport 将模态框渲染到 body 元素中而不是其父组件的 DOM 结构中 templatedivbutton clickshowModal !showModalToggle Modal/buttonteleport tobodydiv v-ifshowModal classmodalpThis is a modal!/pbutton clickshowModal falseClose/button/div/teleport/div /templatescript import { ref } from vue;export default {setup() {const showModal ref(false);return {showModal};} }; /scriptstyle .modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center; } /styleSuspense 作用用于处理异步组件的加载过程它可以在组件异步加载时显示一个加载状态。这个功能非常适合在渲染异步数据或组件时提供用户反馈。 示例 // Suspense 组件会在 AsyncComponent 加载时显示一个“Loading...”的文本直到异步组件加载完成。 templatesuspensetemplate #defaultAsyncComponent //templatetemplate #fallbackpLoading.../p/template/suspense /templatescript import { defineAsyncComponent } from vue;const AsyncComponent defineAsyncComponent(() import(./AsyncComponent.vue));export default {components: {AsyncComponent} }; /scriptFragment 作用支持多个根节点的功能它允许一个组件返回多个根元素而不需要额外的包裹元素。这个功能可以简化组件结构避免不必要的 DOM 节点。 示例 templatediv/divpFirst element/ppSecond element/p /templatescript export default {setup() {return {};} }; /script在Vue3中使用Fragment只需要在模板中使用template标签包裹多个根节点即可。 组件通信 组件通信 异步组件 defineAsyncComponent 作用用于定义异步组件的函数允许你动态地加载组件通常用于按需加载以提高应用的性能和响应速度。 示例 // 定义一个异步组件 AsyncComponent它会在组件需要被渲染时才会被动态加载。import { defineAsyncComponent } from vue;const AsyncComponent defineAsyncComponent(() import(./MyAsyncComponent.vue) );export default {components: {AsyncComponent} };配置选项 选项是否必填含义loader是返回一个 PromisePromise 解析为异步组件loadingComponent否指定一个加载中组件在异步组件正在加载时显示errorComponent否指定一个错误组件如果异步组件加载失败时显示delay否指定加载组件的延迟时间以毫秒为单位timeout否指定加载组件的超时时间以毫秒为单位 完整示例 // AsyncComponent 将在加载时显示一个“Loading...”组件如果加载失败则显示一个错误组件。如果异步组件的加载超过了 10 秒则会显示错误组件。import { defineAsyncComponent } from vue;// 定义异步组件带有加载、错误处理和延迟配置 const AsyncComponent defineAsyncComponent({loader: () import(./MyAsyncComponent.vue),loadingComponent: {template: divLoading.../div},errorComponent: {template: divError loading component/div},delay: 200, // 200ms 延迟显示 loadingComponenttimeout: 10000 // 10秒超时 });export default {components: {AsyncComponent} };​ Vueuse工具函数 介绍用于 Vue 3 的工具库提供了一系列有用的 Composition API 组合函数帮助开发者更高效地处理常见任务。它通过简化状态管理、响应式数据和副作用的处理提高了开发效率。 主要功能 状态管理如 useLocalStorage 和 useSessionStorage 让状态在浏览器存储中持久化。副作用如 useFetch 用于进行 HTTP 请求useInterval 和 useTimeout 用于定时任务。事件处理如 useEventListener 用于添加和移除事件监听器。响应式数据如 useDark 处理暗黑模式useMouse 跟踪鼠标位置。 安装与使用 安装 npm install vueuse/core使用 // 使用 useLocalStorage 管理本地存储templateinput v-modelname placeholderEnter your name / /templatescript langts import { useLocalStorage } from vueuse/core;export default {setup() {const name useLocalStorage(name, );return { name };} }; /script