前端
前端小白 - GavinWu
keep learning
展开
-
解析vue2.x源码之组件的生命周期
基本概念介绍:在日常开发中,我们会在组件的生命周期函数内编写代码,等待组件在适当的时机调用。生命周期函数有: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryd。那么组件是在什么时候调用这些生命周期函数的?在调用生命周期函数时又分别做了什么呢?created:在...原创 2020-03-08 18:52:08 · 351 阅读 · 0 评论 -
解析vue2.x源码之vue实例方法与全局API
基本概念介绍:vue实例方法:vm.$set、vm.$del、vm.$nextTick等,挂在Vue.prototype上的方法。全局API: Vue.directive、Vue.filter、Vue.component等,挂在Vue构造函数上的方法。本章从源码角度分析,Vue.js是如何实现这些功能的一、Vue实例方法的实现:Vue构造函数源码:import { ini...原创 2020-03-07 22:06:44 · 390 阅读 · 0 评论 -
实现百度图片搜索页面
最近开发一个类似百度图片的页面,遇到了一个技术难点。所有的图片的宽高都不一样,怎么使得图片正好铺满屏幕。首先我们图片的高度是固定的,但是由于每张图片的宽高比都是不一样的,所以算出来每张图的宽度也是不一样的,要使得图片正好铺满屏幕,只能对图片的宽度进行裁剪,那怎么样裁剪才是最合理的呢?假设一行最多可以放置n张图片,则取n+1张图片进行裁剪,将多余部分按比例分配到每张图片进行裁剪,宽度大的...原创 2020-01-21 13:40:49 · 1186 阅读 · 0 评论 -
vue3.0 响应式原理实战
最近在学习vue3.0的源码,对照着源码手写了一个响应式demo。用proxy实现响应式数据,改变数据时自动更新视图。在线demo:http://gavincat.cn:8081/具体实现原理可看源码,我在里面做了详细的注释。源码链接:https://github.com/752848087coder/vue3.0-reactiveDemovue3.0响应式源码...原创 2019-12-22 23:13:12 · 399 阅读 · 0 评论 -
解析vue2.x源码之API $set、$del
本章内容是基于vue变量侦测的相关API,对vue变量侦测的源码不了解的同学可以先看这篇文章:解析vue2.x源码之Object与Array的变化侦测基本概念介绍:上一章讲过vue的变量侦测存在缺陷,以下两种情况vue无法侦测到数据的变化,导致依赖无法被触发1.object新增或者删除key2.通过下标修改array的值针对这个缺陷,vue提供了$set, $del用于...原创 2019-12-13 00:08:15 · 272 阅读 · 0 评论 -
解析vue2.x源码之Object与Array的变化侦测
基本概念介绍:Vue框架是如何实现变量的变化侦测的呢?Object 利用了 Object.defineProperty 进行变量的getter与setter拦截,但数组的实现与 Object 有所不同,下面会从源码层面具体讨论这两种类型的变量如何实现变化侦测。首先我们需要先了解Vue源码中的三个类:一、ObserverObserver类负责将复杂类型的变量转化成响应式数据,转化...原创 2019-12-06 00:53:11 · 468 阅读 · 0 评论 -
解析vue2.x源码之diff算法
tips: 本章内容需要 vnode(虚拟DOM) 作为基础,对vnode还不太了解的小伙伴可以先看一下这一篇文章解析vue2.x源码之虚拟DOM基本概念介绍:在vue框架中,我们写的html模板会被编译成渲染函数,渲染函数会生成vnode,最终以vnode渲染视图。渲染流程如下:若是首次渲染,此时并没有oldVnode,直接以vnode为模板渲染视图。若并非首次渲...原创 2019-11-20 01:34:34 · 483 阅读 · 1 评论 -
解析vue2.x源码之虚拟DOM
基本概念介绍:虚拟DOM节点, vue源码中命名为vnode。vnode是一个用来描述真实DOM节点的js对象,它与真实DOM节点一一对应,vue渲染视图时会根据vnode为模板进行渲染。vnode源码:export default class VNode { tag: string | void; data: VNodeData | void; children: ...原创 2019-11-28 22:47:52 · 219 阅读 · 0 评论 -
vue大数据滚动组件
最近在开发项目中遇到一个需求,需要实现一个渲染上千条数据的列表,但如果一次渲染出这么多DOM节点对性能会是很大的消耗。于是上github找了一下相关的优化方案,最终找到一个组件https://github.com/Akryum/vue-virtual-scroller,它能把渲染DOM节点的数量控制在一定范围内,仅仅是渲染当前屏幕所看到的部分DOM节点,从而实现优化。参考了vue-virtu...原创 2019-11-17 14:25:46 · 4125 阅读 · 0 评论 -
浅谈对js原型链的理解
最近重新学习了一下JS原型链的知识,为了避免之后自己再忘记,在此记录下自己对原型链的理解,欢迎大家一起讨论交流js中的对象分为函数对象与普通对象,函数对象有prototype与__proto__,普通对象只有__proto__,那么怎么区分这两种对象呢?var f = function(){} //f为函数对象var o = new f() //o 为普通对象这里涉及两个属性 pro...原创 2018-11-08 18:13:55 · 378 阅读 · 0 评论 -
小程序自定义tabbar
最近写小程序新项目时,设计师给出了如下设计图点击除中间的其他四个按钮切换页面,点击中间的按钮弹出actionsheet查阅文档后发现小程序文档提供的tabbar无法实现该效果,所以只能自己动手写一个tabbar了实现效果如下: 我将这个tabbar组件从项目中分离出来写了个demogithub代码地址:https://github.com/75284...原创 2018-06-12 18:37:25 · 630 阅读 · 0 评论 -
分享链接进入小程序全局变量获取异常
最近做公司的小程序项目时遇到一个问题,通过小程序分享出去的链接进入小程序,进入活动页面,在页面onload()方法中获取全局变量uid,根据uid获取用户信息,结果发现uid为空(开发者工具中运行正常),代码如下app.js onlauch()中进行登录操作获取用户Uid ,存到全局变量 app.config.uid login: function (code) { var that ...原创 2018-06-12 00:01:20 · 1250 阅读 · 0 评论