企业网站的推广阶段和特点,焦作建设银行门户网站,wordpress域名绑定,网页界面设计公司1.Teleport
概念#xff1a;Teleport#xff08;传送门#xff09;是一个新的特性#xff0c;用于在DOM中的任意位置渲染组件。它允许你将组件的内容渲染到DOM中的另一个位置#xff0c;而不受组件层次结构的限制。
下面举出例子解释#xff1a;
1.新建App.vue文件作…1.Teleport
概念Teleport传送门是一个新的特性用于在DOM中的任意位置渲染组件。它允许你将组件的内容渲染到DOM中的另一个位置而不受组件层次结构的限制。
下面举出例子解释
1.新建App.vue文件作为父组件 解析这段代码的作用是创建一个外层容器显示一个标题、一张图片并包含一个自定义的模态框组件。 2.新建Modal.vue作为子组件
解析这段代码是一个简单的Vue单文件组件用于实现一个点击按钮展示模态框的功能。
展示 点击”展示窗口后“ 按钮后 这样看你可能会认为窗口以父元素为参考其实不然而是整个视口
所以给你修改了一下窗口样式使其更明显些 3. 此时我在父组件Css属性添加一个关于饱和度filter的属性 4. 然后再点击”展示窗口“你会发现窗口不能再参考视口了而是父元素容器了。 提醒这里父元素和窗口是包裹关系父子组件嘛 所以这里强调的是父组件的某些属性会影响了窗口的position: fixed这时候可以引用Teleport了
5.在Modal.vue将模块放入到Teleport中 解析以上代码使用了teleport元素将弹窗的内容传送到body元素中使其在DOM结构中脱离当前组件的范围可以在任何位置显示。
所以Teleport可以将子容器的div传送到指定的容器里面同时里面的逻辑不影响只是结构放出去了。所以你可以将Teleport称之为”传送门“
App.vue代码
templatediv classouterh2我是App组件/h2img srchttp://www.atguigu.com/images/index_new/logo.png altbrModal//div/templatescript setup langts nameAppimport Modal from ./Modal.vue;/scriptstyle.outer{background-color: #ddd;border-radius: 10px; padding: 5px;box-shadow: 0 0 10px;width: 400px;height: 400px;filter: saturate(200%);}img {width: 270px;}/style Modal.vue代码
templatebutton clickisShow true展示弹窗/buttonteleport tobodydiv classmodal v-showisShowh2我是弹窗的标题/h2p我是弹窗的内容/pbutton clickisShow false关闭弹窗/button/div/teleport
/templatescript setup langts nameModalimport {ref} from vuelet isShow ref(false)
/scriptstyle scoped.modal {width: 200px;height: 150px;background-color: skyblue;border-radius: 10px;padding: 5px;box-shadow: 0 0 5px;text-align: center;position: fixed;left: 50%;top: 20px;margin-left: -100px;}
/style 2. Suspense 概念 当我们在Vue 3中使用Suspense悬挂时我们可以处理异步组件的加载状态和错误处理以提供更好的用户体验。 想象一下当一个组件需要一些时间来加载时我们可以使用Suspense来展示一个等待状态比如显示一个加载指示器或一个骨架屏告诉用户正在加载中。一旦组件加载完成它会被正常地显示出来。 另一方面如果加载出现错误Suspense可以帮助我们捕获这些错误并展示错误信息或备用内容。 所以Suspense提供了一种在异步组件加载过程中处理加载状态和错误的方式以确保用户能够知道正在发生的情况并提供适当的反馈。通过使用Suspense我们可以创建更流畅和友好的用户界面提升用户体验。 等待异步组件时渲染一些额外内容让应用有更好的用户体验 使用步骤 异步引入组件 使用Suspense包裹组件并配置好default 与 fallback
import { defineAsyncComponent,Suspense } from vue;
const Child defineAsyncComponent(()import(./Child.vue))
新建App.vue文件 新建Child.vue文件 在以上代码中使用了await关键字来等待axios库发送GET请求并获取响应结果。这是因为发送网络请求是一个异步操作需要等待服务器返回响应后才能获取到数据。
使用await关键字可以暂停代码的执行直到异步操作完成并返回结果。在这个例子中await关键字用于等待axios库发送GET请求并获取到服务器的响应结果。
通过使用await可以确保在继续执行后续代码之前已经获取到了API返回的数据。这样可以避免在数据还未返回时对未定义的数据进行操作。 为什么呢
在Vue的模板渲染过程中当数据发生变化时Vue会重新渲染模板以反映最新的数据状态。然而在这段代码中由于异步操作在初始化时就被执行并且直接修改了sum的值这会触发组件的重新渲染。
由于异步操作的执行时间是不确定的可能会在组件的初始化阶段之后才完成所以在组件初始化时sum的初始值被渲染到模板中。然而当异步操作完成后sum的值被修改导致组件重新渲染此时没有提供标题的相关模板因此导致标题消失。 如何解决呢 在你提供的代码中使用了Suspense组件来包裹异步加载的子组件Child/。
在template v-slot:default中放置了实际的异步组件Child/。这表示在异步组件加载完成后将显示Child/组件的内容。
template v-slot:fallback是一个占位内容用于在子组件加载过程中显示。
你可以在这里放置一个加载状态的提示文本例如h2加载中....../h2。这段代码会在子组件加载完成之前显示并在加载完成后被替换为Child/组件的内容。
通过使用Suspense组件和插槽slot的方式你可以在异步加载的过程中提供一个加载状态的占位内容以提升用户体验并避免页面显示空白。 App.vue代码
templatediv classapph2我是App组件/h2Suspensetemplate v-slot:defaultChild//templatetemplate v-slot:fallbackh2加载中....../h2 /template/Suspense/div
/template
script setup langts nameAppimport {Suspense} from vueimport Child from ./Child.vue
/scriptstyle.app {background-color: #ddd;border-radius: 10px;padding: 10px;box-shadow: 0 0 10px;}
/style
Child.vue代码
templatediv classchildh2我是Child组件/h2h3当前求和为{{ sum }}/h3/div
/templatescript setup langtsimport {ref} from vueimport axios from axioslet sum ref(0)let {data:{content}} await axios.get(https://api.uomg.com/api/rand.qinghua?formatjson)console.log(content)/scriptstyle scoped.child {background-color: skyblue;border-radius: 10px;padding: 10px;box-shadow: 0 0 10px;}
/style 3.全局API转移到应用对象
概念 在Vue 3中许多全局API的使用方式有所变化。以前你可能会在Vue构造函数上调用这些API但现在你需要使用应用对象来访问它们。 想象一下Vue应用程序就像是一个实际的应用。在Vue 2中你可以直接从Vue这个大总管那里获取所有的全局功能就像向一个人提出请求一样。但在Vue 3中这些功能被放在了应用对象中就像是应用程序的各个部分你需要通过应用对象来访问它们。 简而言之以前需要Vue.xxx 现在只需要app.xxx时代变了哥们。
app.component 表示可以在全局使用的组件
1.现在创建一个组件Hello.vue 2.在main.ts引用导入
3. 现在已经作为全局变量了现在直接在两个组件中使用 展示 app.config 用于访问应用程序的全局配置对象。它提供了一种设置和访问全局配置选项的方式。 比如下面使用app.config.globalProperties可变为全局属性
1.在main.ts引入 2.可以使用了比如我在两个其他组件使用 有报错是我的编译器问题可不必理会。
3.展示 app.directive:用于注册全局指令。 app.mount是Vue.js中用于将应用程序挂载到特定元素上的方法 app.unmount卸载特定元素上的方法
2s后整个页面卸载 app.use 用于安装插件常用的有路由器Router或者状态管理器Pinia 4.vue3的部分非兼容性改变
概念其实就是Vue3的部分规则在Vue2中不能这样写了。 过渡类名 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。
建议去看官网这是面试常问到的。 总结 Teleport传送门是Vue 3中的一个新特性它允许你将组件的内容渲染到DOM中的任意位置而不受组件层次结构的限制。通过使用teleport元素和to属性你可以将组件的内容传送到指定的DOM元素中从而实现灵活的渲染位置。 Suspense悬挂是Vue 3中用于处理异步组件加载状态和错误处理的特性。它允许你在异步组件加载过程中展示等待状态如加载指示器或骨架屏并处理加载错误。通过使用Suspense组件你可以提供更好的用户体验确保用户在等待加载时能够获得适当的反馈。 在Vue 3中许多全局API已经从Vue构造函数转移到应用对象上。这是为了提供更模块化和可配置的应用程序结构。原先通过Vue.directive、Vue.mixin等方式注册全局指令、混入等现在需要使用应用对象通过createApp函数创建上的方法进行注册例如app.directive、app.mixin等。 Vue 3引入了一些非兼容性的改变这意味着在从Vue 2升级到Vue 3时一些代码可能需要进行修改才能正常工作。其中一些改变包括更严格的模板编译、Composition API的引入、组件实例属性的更改等。为了平滑升级到Vue 3官方提供了一些工具和指南帮助开发者进行代码迁移和适配。需要仔细阅读Vue 3的官方文档和迁移指南以了解这些非兼容性的改变并相应地修改代码。
