- 博客(48)
- 收藏
- 关注
原创 我所遇到的web前端最常见的面试 - 后续不断更新
1.堆内存和栈内存是浏览器形成的两个虚拟内存2.栈内存主要是用来存储基本数据的值,栈内存是一种简单的存储,但是存储的数据都是有范围上线的,一旦超过,就会造成栈溢出3.堆内存主要是用来存储引用数据类型的。
2022-11-28 19:33:35 526
原创 Taro+NutUI+Vue3+TypeScript自定义Tabbar
在src -> components根目录下新建一个custom-tab-bar文件夹,新建一个customTabBar.vue。在不同的tab页面通过current去控制当前第几个页面的索引。即可在微信开发者工具看到效果。
2022-11-28 19:18:22 2137
原创 vuex - 操作使用
提供唯一的公共数据源,所有共享的数据统一放在store的state进行存储,类似于vue的data / return。第二种方法是通过mapMutations抛出,直接在methods里通过声明的方法触发mutations声明的方法。...mapGetters('模块名',['新计算属性名','新计算属性名'])此时刷新浏览器,发现数据还在,并且在控制台的存储,可以看到通过本地存储的vuex数据。第一种方法是this.$store.commit("mutation声明的方法")
2022-11-17 01:11:43 420
原创 vue3 - 41.router.11 - 路由滚动行为
当我们创建router实例的时候,router会提供一个scrollBehavior函数,并且返回三个函数,分别是,to,from,savePosition,其中savePosition就是用来标注页面滚动距离的。
2022-11-14 11:37:16 605
原创 vue3 - 40.router.10 - 路由元信息
3.路由组件是否持久化(keep-alive)这样,每一个页面就定义好了页面标题名称了。1.路由权限校验标识。2.路由组件过渡名称。4.路由页面标题名称。
2022-11-14 11:35:45 383
原创 vue3 - 39.router.9 - 导航前置 / 后置守卫
next(false): 中断当前导航,如果当前浏览器地址改变了,或者用户点击前进后退按钮,则url地址会重置到from路由对应的地址。next('/'): 或者next({path:'/'}),跳转到一个不同的地址,当前导航倍中断,然后进行一个新的导航。next: 执行过程中下一个狗子,如果全部执行完毕了,则导航的状态是confirmed。全局前置守卫:router.beforeEach。from: router当前导航即将要离开的页面。全局后置守卫:router.afterEach。
2022-11-14 11:15:52 491
原创 vue3 - 38.router.8 - 路由重定向 / 别名
将 / 别名为 /root,意味着当用户访问 /root时,URL 仍然是 /user,但会被匹配为用户正在访问。1.我们用redirect来实现路由重定向,当我们访问项目的时候,可以通过重构定向来自动默认打开指定的页面。3)函数模式配置,可传参。2.别名:alias。
2022-11-14 11:11:16 655
原创 vue3 - 37.router.7 - 命名视图
并且默认子组件通过 default 设置,也就是说页面一打开,首先展示的是通过 default 定义的默认子组件页面。命名视图的方法是给配置路由通过components定义,components接收的是一个对象,可以放N多个子组件。
2022-11-14 11:08:03 345
原创 vue3 - 36.router.6 - 嵌套路由
1.嵌套路由可以通过children的方式来声明,children接收的是一个数组,数组中可以定义无限个子路由。比如手机端,底部有四个或者五个子路由页面,当我们点击底部路由的时候,页面进行切换。或者我们常见的后台管理系统,左侧为导航,右侧为导航对应的页面内容。我们可以把底部跳转封装成一个路由子组件并且引用,css布局样式略。我们再单独新建一个承载整个项目的总路由,比如mian.vue。
2022-11-14 11:06:16 463
原创 vue3 - 35.router.5 - 路由传参
安装一个VSCode插件,JSON to TS,然后选中JSON,同时按Ctrl+Shift+Alt+S,就能快速的生成数据类型。比如:router.push({ name: 'index', params: { name: "aaa" } })只需要把path改成name,并且把query改成params即可,在接收页面用params去接。根据个人的习惯,可以把interface改成type的写法即可。
2022-11-14 11:03:30 162
原创 vue3 - 34.router.4 - 历史记录
如果不想让路由拥有历史记录(前后跳转)我们只需要在 RouterLink 标签里新增 replace 即可:
2022-11-14 10:59:33 1643
原创 vue3 - 33.router.3 - 命名路由 - 编程式导航
当页面发生跳转的时候,router的跳转方式除了path,还可以通过name进行跳转。同时我们需要在vue-router当中声明跳转的方法:useRouter。3.防止我们在url中出现名字拼写错误。2.params会自动编码/解码。1.没有硬编码的URL。
2022-11-14 10:56:33 237
原创 vue3 - 32.router.2 - 路由模式
跳转是没有#的,history是基于H5的history方法实现的,监听路由变化的原理是通过window.addEventListener,有一个popstate回调函数,通过event去监听的,会返回一个state对象,里面有back(上一个url地址)current(当前url地址)forward,跳转是通过history.pushstate结合vue内置跳转方法实现跳转的。我们需要通过vue-router当中声明路由模式,比如路由模式是哈希还是history。
2022-11-12 22:20:14 320
原创 vue3 - 31.router.1 - 路由安装
在src根目录新建一个router文件夹,并且新建一个index.ts,作为控制路由的页面。并且我们自己可以根据路由配置新建页面。安装vue-router。
2022-11-12 22:17:35 121
原创 vue3 - 23.h函数 / 函数式编程
vue3 支持 template 语法,和 JSX / TSX 语法,同样也支持 函数式编程,函数式编程会用到h函数,h函数接收三个参数,分别是
2022-11-12 20:45:23 741
原创 vue3+Ts - axios二次封装 / 接口管理
"AxiosInstance" 是一种类型,在同时启用了 "preserveValueImports" 和 "isolatedModules" 时,必须使用仅类型导入进行导入。解决办法:找到 tsconfig.app.json ,添加:"preserveValueImports": false,4.在request根目录下新建一个api文件夹,新建一个login.ts (后续可以自定义加多个接口管理文件)axios.all() 和 axios.spread()
2022-11-11 01:35:23 4784 1
原创 vue3设置 element-plus 亮色 / 暗黑色切换
或者全局搜索 :root 在后面加修饰,white代表亮色,dark代表暗黑色,加对应的修饰即可。main.ts 引入element-ui。
2022-11-08 21:13:42 2248
原创 vue3 - 21.定义全局函数&变量
"ComponentInternalInstance" 是一种类型,在同时启用了 "preserveValueImports" 和 "isolatedModules" 时,必须使用仅类型导入进行导入。读取全局配置的属性和方法,index.vue。
2022-10-31 20:32:05 1448
原创 vue3 - 19.Mitt兄弟组件传参传值
子组件组件:B.vue == > 监听多个 $on('*')子组件组件:A.vue == > 派发 $emit。子组件组件:B.vue == > 监听 $on。子组件组件:A.vue == > 派发多个。移除监听事件(off)
2022-10-24 00:24:23 1627
原创 vue3 - 18.eventBus兄弟组件传参传值
eventBus:原理是利用js的发布订阅,通过事件调度中心处理。1. 通过父组件作为一个桥梁进行两个平级关系的组件相互传参。我们封装一个eventBus。以下方法不推荐使用!
2022-10-23 23:05:50 1039
原创 vue3 - 17.provide/inject依赖注入(跨级别组件传参)
在vue中,provide/inject是通过原型链实现的。作用是在根组件注册一次,在其他的子组件都可以访问到数据。
2022-10-23 22:36:19 813
原创 vue3 - 16.suspense/代码分包/性能优化
当我们在页面中声明异步组件,我们就不能像传统的那样直接import组件了,这个时候我们需要用defineAsyncComponent方法,他是一个回调函数,里面直接import方法。这个时候,当我们npm run build之后,查看dist包,就会帮我们把异步组件拆分出去,从而减少vendor.js的体积。项目npm打包:npm run build,打包成功之后会生成一个dist文件夹。
2022-10-22 23:47:40 294
原创 vue3 - 15.keepAlive缓存组件
keep-alive 属性 - include : 声明想要被缓存的组件,比如我们有两个组件,我们只想缓存A组件,不想缓存B组件,那么我们可以用include声明,include支持字符串,数组,正则,比如:这个时候,当我们切换组件的时候,B组件是没有被缓存的。当使用keep-alive的时候,我在父组件切换其中一个子组件,其中一个子组件的onActivated默认会执行一次,当我们关闭其中一个子组件的时候,当前组件的onDeactivated会执行,说明已经被销毁,但是onMounted始终会执行一次。
2022-10-22 22:16:30 2649
原创 vue3 - 14.Teleport传送组件
to支持body,id选择器,类选择器,但是值得注意的是,Teleport只能把模块移植到和body同级的容器里。to里面放移植的目标,比如我吧Card组件的内容放在最外层里。disabled的值是true / false,当设置为true的时候,则关闭移植功能。
2022-10-22 22:11:32 190
原创 vue3 - 13.插槽全家桶
vue3 - slot 插槽:插槽的作用是比如我们声明一个公共组件,在每个模块中引用公共组件的时候,可能某些模块的内容不一样,为了可以在单页面中方便自定义想要的内容。4. slot 动态插槽:作用是我们可以在父组件中根据子组件插槽的名称动态定义,并且声明内容,则内容就会插入到子组件指定的模块中。3. slot 插槽作用域:在父组件中拿到子组件的内容。我们声明一个子组件,在父组件中引用。
2022-10-22 22:05:33 258
原创 vue3 - 04.to系列全家桶
只针对响应式数据修改在视图上发生变化,对非响应式数据无效。toRef接收两个参数,分别是object,key。将proxy对象转化为普通原始对象。上面是toRefs的原理。
2022-10-22 18:58:47 86
原创 vue3 - 03.reactive全家桶
在实际开发中,reactive可以用于声明一个数组或者对象,或者当我们请求一个异步接口获取数据在页面中渲染的时候,我们无法直接赋值,因为reactive是proxy响应,如果我们直接赋值,会破坏响应,所以我们可以用push+结构的方法。1.ref可以赋值所有类型的参数,如Number,String,Boolean,Array,Object。2.reactive只支持引用类型参数,如Array,Object,Map,Set等...3.ref修改值,需要*.value,reactive不需要,直接修改就可以。
2022-10-22 18:08:15 415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人