自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

凌峰的博客

前端小白进化之旅~

  • 博客(10)
  • 收藏
  • 关注

原创 Vue3源码学习 -- 4、Composition API

Composition API 即组合式API,主要包括setup、生命周期钩子、getCurrentInstance、Provide/Inject。产生这组API的动机是提高代码的可维护性、可复用性以及消除this。下面 setup 中的代码和注释中的代码实现的效果是一样的。

2023-03-26 17:41:59 205

原创 Vue3源码学习 -- 3、更新流程分析

整个更新流程可以分为两部分。一个是更新机制的建立,一个是更新过程。更新机制的建立是在初始化的时候进行的:结合之前的初始化流程,我们知道在 app.mount 中执行了 setupRenderEffect 方法,在该方法中通过 ReactiveEffect 构造的实例 effect 方法建立了数据变化和组件渲染之间的联系。更新过程是在响应式数据发生改变时触发的:在 counter 的值发生变化时,会触发拦截机制,进入 set 方法中;

2023-03-04 11:42:02 1131 7

原创 Vue3源码学习 -- 2、初始化流程分析

上面我们已经将初始化流程调试了一遍,接下来我们可以通过初始化流程的函数调用栈来总结复盘一下。从下往上看,第一个是一个自调用函数,这个就是挂载,也就是 .mount(‘#app’);然后执行了重写的方法 app.mount;在 app.mount 中执行了原生的 mount 方法;mount 中执行了将 vnode 方法转化为 dom 的 render 方法;render 方法最终执行的是 patch 方法;在 patch 方法中,会通过类型判断当前是组件还是元素等;

2023-02-24 21:49:04 273

原创 Vue3源码学习 -- 1、搭建源码调试环境

一说起源码,初入前端的同学可能都一阵头大。一开始我也是一样,觉得学源码有啥用啊,我只要知道在哪个生命周期调接口,会用相关的api不就行了。如果你只想一直写一些没有技术含量的业务代码,只想在当前的岗位混下去的话,确实没啥必要。但是只要你想提升,想跳槽,那么学源码几乎是绕不过去的一道坎。首先,你在面试的时候,面试官基本上都会问你有没有看过什么项目的源码,有没有读源码的习惯等等;

2023-02-16 21:43:13 515

原创 threejs元宇宙入门 | 大帅老猿threejs特训

之前看到过很多用threejs制作的炫酷场馆,本人对3D方面也很感兴趣,所以一直想学习一下threejs的使用。最近刚好Web3D胖达老师出了一期threejs元宇宙实战特训的直播课,就跟着学了下来。虽然只有6个小时的课程,但是看完之后还是感觉收获满满,就用这篇文章记录一下自己第一次学习threejs的成果。

2022-12-29 21:32:57 1323

原创 Git 常用撤销命令

git 撤销命令

2022-11-25 11:39:00 5702

原创 解决弹性布局中子元素内容溢出问题

在移动端日常开发中经常会遇到这样一个场景,在一个列表中,左边是一张固定大小的图片,右边是一行或多行文字,宽度自适应,溢出省略,如下图

2021-08-25 14:47:27 2072 2

原创 uni-app开发微信小程序问题汇总

最近在用uni-app开发微信小程序,这里将开发中遇到的坑和问题记录一下,后续发现新问题也会持续更新。1、关于new Date()当使用new Date()转化 时间字符串时,在微信开发工具、安卓和ios真机上的表现略有不同 let date1=new Date('2021/01/01'); let date2=new Date('2021-01-01'); let date3=new Date('2021.01.01'); console.log('date1:',date1); conso

2021-01-19 10:50:39 2776 4

原创 call、apply、bind三者的用法和区别

在面试中经常会被问到call、apply、bind三者的用法和区别,今天就来整理一下!我们知道,call、apply、bind这三兄弟都是可以改变this指向的,那具体如何使用呢?我们先定义两个对象 var obj={ name:'Li lei', age:18, intr:function(){ console.log(`我叫${this.name},我${this.age}岁`); } } var obj2={

2020-08-17 14:44:02 2364 2

原创 在vue中如何使用addEventListener添加事件、removeEventListener移除事件

在vue中如何使用addEventListener添加事件、removeEventListener移除事件最近在项目中需要用到addEventListener监听滚动条滚动的高度,所以就研究了一下在vue中是怎么进行事件监听的。添加事件给要添加事件的元素加上ref属性在mounted中添加事件 mounted() { this.$refs.box.addEventListener('scroll',()=>{ console.log('scroll',th

2020-06-09 16:28:31 27118 12

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除