- 博客(9)
- 收藏
- 关注
原创 前端对防抖节流的理解
防抖:在一段时间内,频繁触发同一个回调函数,但是我们只需要最后一次回调函数的执行结果,此时就应该使用防抖函数。原理:你这个回调函数此时是触发行为就立马执行,太频繁了,那么我们就给这个回调函数增加一个定时器,比如3秒钟,在3秒内,如果客户没有继续触发这个回调函数,那么直接执行该回调函数,如果客户在3秒内再次触发了这个回调函数,那么就清空这个定时器重新开启定时器,反之就是不让你执行哎,一直到你不3秒钟内不再次触发行为为止。代码:debounce(fn,delay){let timer = null r
2021-12-25 18:43:17
396
原创 vue实例内部方法的this指向问题
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法,要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch和各种回调钩子,因为他们是vvue本身的方法所以只要他们使用普通函数定义this当然指向他
2021-08-19 23:16:44
844
原创 computed(计算属性)和watch(侦听属性)的区别
1.computed计算属性调用才会执行,有返回值watch侦听属性不需要调用,只要侦听的数据发生改变就会执行2.computed计算属性能够完成的操作watch侦听属性都可以完成,但是watch侦听属性能够完成的操作computed不能全部完成,比如异步操作,computed内部不能执行异步操作,watch内部可以执行异步操作3.computed计算属性实际上是调用本身的get函数,其值就是get函数的返回值watch侦听属性实际上调用的是本身的handler函数,执行handler函数内部的代码
2021-08-19 23:10:20
1142
原创 史上最容易被理解的vue响应式原理
vue响应式原理主要分为两步:1.让vue实例监听data数据的变化(数据劫持)2.让监听到变化的数据实时响应到页面上(发布订阅者模式)1.vue实例内部执行步骤:vue实例在初始化的时候,会调用observer函数,传入data数据的返回值,然后对这个返回值进行判断,如果不是对象,则说明这个返回值是基本数据类型,则直接返回这个值,如果这个参数是一个对象或者是数组,则遍历它本身,遍历出它的key和value,再调用defineReactive函数,把这个对象和他的key和value全部传进去.这一步
2021-08-19 22:53:35
124
转载 div或p标签单行和多行显示方法以及(html)当鼠标移上显示信息
1.单行显示(以h1为例)代码:< !DOCTYPE html>< html lang=“en”>< head>< meta charset=“UTF-8”>< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>< title>Document< /title>< style>h1 {background:
2021-08-17 22:59:55
2559
原创 对js中foreach函数,map函数,filter函数,some函数,every函数,以及find函数和findIndex函数的理解
1…foreach函数,直接遍历原数组成员,不能操作原数组,没有返回值,不能被return终止循环,如果你在foreach里使用了return,只能得到undefined.2…map函数,对原数组进行遍历,对原数组成员拿出来进行操作,并且把操作后的新成员放在新数组里返回,原数组不会被改变.如果你不需要对数组成员进行操作,仅仅是想要对满足条件的数组成员进行返回,则可以使用filter函数,因为map函数只会返回满足条件的数组成员对应的布尔值,而不会返回满足条件的数组成员本身.3…filter函数,对原数
2021-08-17 10:07:02
301
原创 js事件循环:宏任务与微任务
js代码执行顺序:一个宏任务->多个微任务->一个宏任务->多个微任务,如此循环,就叫事件循环event loopjs一次只能执行一个宏任务,一次可以执行多个微任务1.两个定时器中的回调函数都是宏任务2.promise中的resolve和reject都是是微任务3主线程的执行栈中的所有同步任务可以看作是一个宏任务console.log(0)setTimeout(() => { console.log(1)}, 0)new Promise((resolve) =&
2021-08-14 02:42:40
493
原创 使用vscode创建uni-app项目
使用vscode创建uni-app项目以下是使用vscode创建uni-app项目步骤最好跟着操作打开vscode 点击右上角终端 在终端里输入以下代码1丶全局安装 vue-cli 3.x(如已安装请跳过此步骤)npm install -g @vue/cli2丶通过cli创建uniapp项目vue create -p dcloudio/uni-preset-vue my-project3丶运行项目 (在终端输入)一下两种都能运行项目1). npm run serve2). npm run
2021-08-10 20:42:25
1217
1
原创 纯css如何改变盒子的宽高导致其有伸缩的动画效果?
1.对于一般的盒子我们都是直接设置宽和高的,对于这种有宽和高的盒子直接修改它的width和height值,再使用transition或者animation设置它的duration,就可以看到宽和高的伸缩效果2.有的盒子,我们为了布局和内容是不会给它height的,这种情况下,它只有靠子盒子的大小来撑开,这种情况下想要父盒子的height产生伸缩效果,使用height重新赋值就不行了,它会直接变成重新赋值后的大小,秒变,就算你transition和animation都设置了duration也还是会秒变,那这
2021-05-29 14:34:04
1779
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人