Vue3
文章平均质量分 59
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
「Vue3面试系列」Vue3.0的设计目标是什么?做了哪些优化?
这样使得模块拆分更细化,职责划分更明确,模块之间的依赖关系也更加明确,开发人员也更容易阅读、理解和更改所有模块源码,提高代码的可维护性。试想一下,如果很多类似的第三方库,我们只需要调用即可,不必关注实现过程,开发效率大大提高。这种形式,可以将一些复用的代码抽离出来作为一个函数,只要的使用的地方直接进行调用即可。中去递归响应式,这样的好处是真正访问到的内部对象才会变成响应式,而不是无脑递归。,可以将无用模块“剪辑”,仅打包需要的,使打包的整体体积变小了。编写的,提供了更好的类型检查,能支持复杂的类型推导。原创 2023-12-18 16:35:45 · 971 阅读 · 8 评论 -
【Vue3】封装按钮组件
目的:封装一个通用按钮组件,有大、中、小、超小四种尺寸,有默认、主要、次要、灰色四种类型。原创 2023-03-07 08:30:00 · 729 阅读 · 1 评论 -
【Vue3】封装数字框组件
vue3.0封装组件支持v-model的时候,父传子。## 数量选择组件-v-model语法糖> 目标:掌握vue3.0的v-model语法糖原理在vue2.0中v-mode语法糖简写的代码 ``在vue3.0中v-model语法糖有所调整:原创 2023-03-06 08:30:00 · 2473 阅读 · 5 评论 -
【Vue3】vue3 + ts 封装城市选择组件
城市数据并不是直接从接口服务器中获取的,而是从阿里云服务器上获取的数据,所以不能使用封装好的request发送请求,直接使用。注意:完整地址需要父组件传递给子组件,将来如果登录的用户,父组件可以获取到完整的地址。能够封装城市选择组件,并且完成基础的显示隐藏的交互功能。(3)子组件选择完城市,需要将数据传递给父组件。(1)父组件将城市数据传递给子组件。(2)子组件接收,并且进行展示。(4)点击弹层外部,关闭弹层。(4)点击弹层外部,关闭弹层。(4)父组件接受数据并且处理。(4)父组件接受数据并且处理。原创 2023-02-28 08:30:00 · 8142 阅读 · 0 评论 -
【Vue3】面包屑组件封装
目标:掌握面包屑组件如何使用。(2)注册成全局组件应用。原创 2023-02-22 12:32:48 · 488 阅读 · 0 评论 -
【Vue3】组件数据懒加载
电商类网站,尤其是首页,内容有好几屏,而如果一上来就加载所有屏的数据,并渲染所有屏的内容会导致首页加载很慢。添加了ref类型提示:MaybeElementRef -> 暴露出去的taget如果赋值类型不对会进行提示。首页中,很多地方都应该使用组件数据懒加载这个功能,不管是哪个模块使用,下面代码都会重复书写。数据懒加载:等组件正式进入到可视区中时,才把组件内部的ajax请求发起,否则不请求数据。目标:封装组件数据懒加载可复用的逻辑。(1)封装通用的懒加载数据api。给ref添加组件类型。原创 2023-02-20 08:30:00 · 2504 阅读 · 0 评论 -
【Vue3】 vue3图片懒加载-封装自定义指令
目标:了解如何实现数据懒加载电商类网站,图片会非常的多,而如果一上来就加载所有的图片,会导致网页加载很慢。图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片问题如何知道图片进入或者离开了可视区?通过vueuse封装的(1)的基本使用ref } from 'vue' const target = ref < HTMLImageElement | null >(null) // stop停止监听 const {原创 2023-02-15 08:30:00 · 506 阅读 · 0 评论 -
【Vue3】首页主体-面板组件封装
新鲜好物、人气推荐俩个模块的布局结构上非常类似,我们可以抽离出一个通用的面板组件来进行复用。(4)插槽处理,右侧的查看全部和面板具体的内容不应该写死。(3)父组件传入title和subTitle。标题和子标题应该有父组件传递进来,不能写死。目标:封装一个通用的面板组件。(2)props处理。原创 2023-02-14 08:30:00 · 681 阅读 · 0 评论 -
【Vue3】首页主体-封装查看更多组件
封装一个通用的查看更多组件。(3)定义全局组件类型。> 1. 子组件如果只有一个根标签,父组件传递过去的数据会能够穿透 2. 如果子组件通过defineProps定义的数据不会出现在标签的身上原创 2023-02-13 08:30:00 · 224 阅读 · 0 评论 -
【Vue3】电商网站吸顶功能
电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见,所以需要一个吸顶导航的效果。(1)安装@vueuse/core 包,它封装了常见的一些交互逻辑。(6)修复bug,为了吸顶头部的内容不遮住不吸顶的头部。(3)提供样式,控制sticky的显示和隐藏。(2)Layout首页引入吸顶导航组件。(5)控制sticky的显示和隐藏。目标:完成头部组件吸顶效果的实现。(1)新建吸顶导航组件。(2)在吸顶导航中使用。vueuse/core : 组合原创 2023-02-11 08:30:00 · 1009 阅读 · 1 评论 -
【Vue3 组件封装】vue3 轮播图组件封装
项目中会多次使用到轮播图组件,但是轮播图渲染的数据是不一样的。但是轮播图的基本功能都是一样的,比如图片切换,自动播放等等。(1)父传子的方式将数据传给通用轮播图组件。(4)覆盖样式,控制箭头和小圆点的位置。目标: 基于pinia获取轮播图数据。文件中封装接口,用于获取轮播图数据。因此需要封装一个通用的轮播图组件。文件中定义轮播图数据的类型声明。(4)通过开发者工具查看数据。(1)通用轮播图的基本结构。(2)全局注册通用轮播图。(1)父组件传值给轮播图。(3)在广告组件中使用。(3)轮播图的播放逻辑。原创 2023-02-10 00:23:21 · 5287 阅读 · 0 评论 -
【Vue3】vue3 中 watch 和 watchEffect 的区别
(1)监听数据变化-发送请求获取数据。(2)问题,如果监听了路由变化之后,从分类页跳转到首页,也会报错,因此需要判断路由地址。都给我们提供了创建副作用的能力。原因:setup的代码只会执行一次,因此需要监听路由的变化。使用watchEffect监听路由的变化。切换分类的时候,商品的数据不会发生变化。watch 和 watchEffect 都给我们提供了创建副作用的能力。它们之间的主要区别是追踪响应式依赖的方式:watch 只跟踪明确监视的源。它不会跟踪任何在回调中访问到的东西。另外,回调仅会在源确实改变原创 2023-02-08 08:40:11 · 661 阅读 · 0 评论 -
vue2、vue3中使用$forceUpdate()
在vue.js中使用this.$forceUpdate()是强制更新方法,作用是触发vue的update方法。可以用在解决数据对象新增属性和数组新增数据,出现页面不渲染的问题。 在前端开发过程中数据处理尤为重要,在使用Vue时我们会事先定义好数据,数据中包含基本数据、对象、数组,其中对象中可能还会有数组,数组中也还会有数组或者对象,这样就形成了深结构数据。我们在给这些深层次的数据赋值或者给对象添加新的属性,页面上的数据并不会同步更新,原创 2023-02-01 21:04:24 · 5811 阅读 · 1 评论