前端开发
文章平均质量分 92
一拳小和尚LXY
学而不思则罔
展开
-
学透Vue源码~Computed和Watch区别是什么?
Computed和Watch区别是什么?这可能是Vue技术面试最常问到的面试问题之一,我们都知道计算数据是监听数据变化并返回计算函数返回值的,watch就是单纯的数据监听处理。那么二者究竟又是如何实现的呢?下面我们就从源码实现层面为同学们详细说一说二者的区别,加深各位同学对计算属性和watch的理解。阅读本文前需要对Vue的响应式原理有一定的了解,响应式原理的内容不在这篇进行讲解,感兴趣的可以看这篇学透Vue源码~nextTick原理的响应式原理部分。本文是基于Vue2.6的源码解读${}vm。......原创 2022-08-01 08:41:24 · 352 阅读 · 0 评论 -
理论+实践,彻底掌握Vue自定义指令
本篇主要介绍Vue自定义指令的封装流程和实践应用,下面👇是本文的概述内容,各位同学可以选择直接去阅读感兴趣的小节。准备自定义指令介熟系的同学可以跳过,直接下一小节试炼实现一个v-mymodel这部分是拔掉上一篇文章不要再搞混Vue的响应式原理和双向数据绑定了立下的flag,自己实现一个数据双向绑定的指令。应用实践4个实用的自定义指令除了核心功能默认内置的指令(v-model和v-show等),Vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件。VueVue。......原创 2022-07-20 09:38:38 · 300 阅读 · 0 评论 -
不要再搞混Vue的响应式原理和双向数据绑定了
之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是,所以免不了问到其响应式原理和的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别。是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~是借助实现的,而是借助实现的,下面我们先来看一下2.x的实现。我们通过为对象添加属性,可以设置对象属性的和函数。之后我们每次通过点语法获取属性都会执行这里的函数,在这个函数中原创 2022-07-07 09:23:30 · 667 阅读 · 0 评论 -
Vue nextTick彻底理解
前言含义和使用nextTick的官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。啥意思呢,即我们对Vue中data数据的修改会导致界面对应的响应变化,而通过nextTick方法,可以在传入nextTick的回调函数中获取到变化后的DOM,讲起来可能还是有点梦幻,下面我们直接使用nextTick体验一下效果。比如我们有如下代码:<template> <div> <button @c.原创 2021-02-19 13:58:03 · 5968 阅读 · 0 评论 -
彻底理解weex原理
思路我们要从weex的runtime-jsFramework源码出发理解weex的实现原理。runtime-jsFrameworkentries各种前端框架的入口文件,比如vue.js:import setup from './setup'import * as Vue from 'weex-vue-framework'setup({ Vue })以index.js为入口会编译所有框架的版本。import * as Vanilla from './vanilla/index'imp原创 2021-02-19 13:56:44 · 1857 阅读 · 0 评论 -
Weex中js服务的理解
js服务weex中注册js服务,会在当前运行的js环境中注入一个对应service的create方法返回的对象,这个对象有两种返回形式:在返回对象的instance上声明一个实例服务;直接在返回对象对象上声明一个服务。如下面代码中的InstanceService和NormalServiceservice.register(SERVICE_NAME /* same string with native */, { /** * JSService lifecycle. JSServic原创 2021-02-19 13:54:22 · 1111 阅读 · 0 评论 -
这一次,彻底理解js原型和继承
先讲面向对象面向对象是一种编程思想,其重要特征就是多态和继承,通常涉及到类和类和类的实例(对象)、接口等概念。JavaScript中没有类,但是我们可以使用构造函数和原型模拟类的实现。js如何实现继承说到js的继承,那首先想到的肯定是原型链,实际上js中实现继承就是依赖原型链的机制,那么下面就让我们详细了解一下原型链。什么是原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型原创 2021-01-25 14:40:49 · 108 阅读 · 0 评论 -
模仿实现一个直播的点赞动画
前言在阅读了H5 直播的疯狂点赞动画是如何实现的这篇文章后感觉这个点赞效果很不错,并且也跟着作者实现了一下这个动画效果。其中css的实现方式很容易理解,但是我在读完作者canvas实现方法之后有不同的实现思路,因此又按照自己的思路实现了一下。实现效果如下:实现思路我看到这个动画效果首先想到的,声明一个包含多个小图标对象的数组,通过在不同的位置绘制这些小图标实现这个点赞动画。那么首先我们实现一个小图标的动画。动画流程分解要做动画我们首先把整个动画流程分解一下,这个动画包含如下几个:放大图片刚原创 2020-11-27 11:18:26 · 423 阅读 · 0 评论 -
简单理解Webpack原理
前言webpack是一个代码编译打包工具,有入口,出口、loader和插件等,大多数前端开发人员能够熟练的使用webpack管理我们的代码,但我们可能还没有尝试理解过webpack编译的原理,让我们怀着好奇(`ヘ´)=3的心态通过阅读编译后的源码来尝试理解一下webpack编译的基本原理吧ヾ(◍°∇°◍)ノ゙。原创 2020-11-27 11:14:41 · 467 阅读 · 0 评论 -
dom元素滚动条滚动控制详解
前言不知道大家有没有遇到过这样的需求,在某个dom元素中添加新的子元素,然后要求如果新添加的新元素超出容器的范围,那么我们需要自动滚动到新添加的子元素的位置,如下图所示效果:那么接下来我们一边学习一些dom元素滚动相关的知识点,一边实现一个上图的效果和一些其他滚动相关的功能。需要了解的dom属性和方法scrollTop、clientHeight和scrollHeightscrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值,即容器中内容向上原创 2020-05-25 19:54:29 · 2297 阅读 · 0 评论 -
Blob总结和使用案例
Blob介绍Blob是对大数据块的不透明引用或者句柄。名字源于SQL数据库,表示“二进制大数据”(Binary Large Object)。在JavaScript中Blob通常表示二进制数据,但是不一定是大量数据。Blob是不透明的,我们可以对它执行的操作只有获取它的大小,MIME类型和将他切割成更小的Blob。——《JavaScript权威指南》Blob 对象表示一个不可变、原始数据的...原创 2020-04-29 18:59:20 · 2603 阅读 · 0 评论