- 博客(24)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 谈谈对Vue2响应式系统的理解
谈谈对Vue2响应式系统的理解对于Vue的响应式系统随着框架不断的迭代，使用者不断的学习，对其已经相当的熟悉。再加上Vue官方文档上也有对于响应式系统的深入讲解。使我们对其实现的原理也有了足够的了解。现在是时候通过Vue的源码来对响应式系统进行一个细致的了解了。响应式系统的构成及局限通过官方文档我们都知道Vue的响应式系统是通过Object.defineProperty方法来设置一个普通js对象的属性描述符。进而通过自定义js对象属性的getter/setter实现了数据拦截的效果。使其可以在获取
2021-05-20 21:10:55
273
原创 Vue中的nextTick浅析
nextTick(基于Vue2.6.x)在Vue中提供的nextTick方法，其作用是将回调函数推入到当前执行主栈后的任务队列之中。使其可以在主栈同步代码执行结束后执行。具体实现是通过nextTick方法将回调函数包裹到一个匿名函数中，然后推入到一个callbacks队列之中。随后就调用初始化后的timerFunc。最后在支持promise的环境未传入callback函数时会返回一个promise对象。其中的重点内容是对timerFunc的实现：支持原生Promise则首选Promise使回调函数
2021-05-13 10:21:16
249
原创 vue3中的watch源码浅析
watch源码浅析通过对reactive的解读中明白了在vue中将被响应式系统收集的依赖为组件更新，computed，watch三类。而watch的具体实现具体是怎样的？这就是本次学习的目标。依然通过暴露的composition api入手，从watch方法看整个watch的实现过程。一开始就是连续的4个函数重载，就知道vue3中的watch肯定也还是有所变化的了。// apiWatch.ts// overload #1: array of multiple sources + cbexport
2021-04-16 10:14:08
961
原创 vue3中的computed源码浅析
computed源码浅析前面通过对reactive的阅读了解了一下响应式系统的概貌。现在开始对computed进行一定的了解，学习和理解这其中的思路。在vue3中computed以composition api的形式暴露出来，因此可以直接通过computed方法作为入口去阅读理解其中的思路。// computed.ts// 函数重载export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T
2021-04-14 16:36:27
721
原创 关于谷歌Chrome浏览器sessionStorage的跨tab页共享问题
Chrome浏览器跨tab页sessionStorage共享问题问题现象在当前页面下开启一个新的同源tab页sessionStorage中的内容未有效共享到新开tab页中，导致新开tab页sessionStorage为空。解决办法首先抛出一个十分简单的解决办法，那就是使用window.open()方法打开这个同源tab页即可实现sessionStorage的有效共享。第二种方法是通过window.addEventListener('storage', () => {})事件监听，来进行同源跨
2021-04-06 10:33:43
4945
1
原创 vue3中reactive源码浅析
reactive源码学习这次clone下来的vue3.0.5的代码，学习reactive模块相关内容。了解vue3中的响应式数据的设计、实现。首先进入到源码中，可以很方便的找到reactivity模块。打开这个模块之后呢？要如何下手就一脸懵逼了，然后猛然发现了__test__文件夹，灵机一动从单测入手不就可以快速的知道这个模块下主要暴露出的api会有哪些，具体的功能会有哪些了吗？于是就愉快的开始阅读单测相关的内容。测试用例第一个相关单测：test('Object', () => { con
2021-04-02 17:01:12
482
原创 记录一个按钮小效果
按钮小特效通过js与css的配合可以非常方便的实现一些简单的小特效。这里记录一个按钮点击出现扩散的动画特效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
2021-03-10 14:32:29
61
原创 npm发布插件记录
npmnpm依赖全局依赖，在命令行中使用本地依赖，可以在项目中使用项目依赖: dependencies开发依赖: devDependencies同等依赖: peerDependencies, 此包依赖于的其他包可选依赖: optionalDependencies打包依赖: bundledDependenciesnpm版本版本号与package.json中的version保持一致如：1.0.0（major.minor.patch）升级版本可以通过 npm version [maj
2021-02-23 10:20:25
103
原创 uni-app离线打包覆盖安装无法自动更新内部js文件问题
官方文档中给出的配置选项为<hbuilder debug="true" syncDebug="true">这个选项是用于开发时的非正式包，内部的js文件只有在hbuilderX中运行时才会自动更新。打正式包的时候需要将debug相关配置去除，就可以覆盖安装自动更新js文件了。...
2021-01-29 11:31:41
823
3
原创 浅析vue-router中history模式
浅析vue-router中history模式文章目录浅析vue-router中history模式路由初始化history模式初始化history模式浏览器行为监听history模式路由导航流程之前的学习中写过一篇有关vue-router中hash模式的一点思考现在呢有时间就打算把history模式的源码也看一看学习一下。然后写一下自己对于history模式的理解。路由初始化本次学习使用的是vue-router v3.0.2版本源码进行。对于前端路由主要就是解决了改变浏览器url输入框中的值，可以在不
2021-01-28 17:29:08
2434
原创 renderjs中视图层与逻辑层数据传输坑点
renderjs中视图层与逻辑层数据传输坑点最近在学习使用uni-app的过程中发现了一个比较违反认知的情况。即renderjs通过逻辑层传递到视图层的数据在只是引用改变的时候不会触发视图层的接受方法。示例如下<template> <view> 这是一个测试组件 <button type="default" @click="changeTest"> 改变测试数据 </button> <view :rend
2021-01-14 15:05:46
3275
原创 uni-app安卓打包
uni-app打包因为本次app开发主要应用于安卓设备，故目前主要记录一下安卓相关的打包流程及配置。安卓证书安卓打包时需要的数字证书可以自己通过java对应的包生成，用于验证开发者的身份，具体操作方式参考官方文档。需注意JRE版本，环境变量配置。安卓离线打包Android Studiouni-app使用离线打包时需要配置对应目标平台的工程，安卓工程需要使用Android Studio(提取码：r1ni)来进行对应打包工程配置。也可前往安卓中文网下载，推荐下载v3.0.1.0版本使用。SDK官
2020-12-15 16:51:47
287
原创 uni-app renderjs通信
renderjs使用renderjs是一个运行在视图层的js。它只支持app-vue和h5。renderjs的主要作用有2个：大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力在视图层操作dom，运行for web的js库使用时的注意事项目前仅支持内联使用。不要直接引用大型类库，推荐通过动态创建 script 方式引用。可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstan
2020-11-11 15:28:55
11515
6
原创 基于nodejs的简易静态资源服务
目录基于nodejs的简易静态资源服务静态资源服务代码命令行配置代码模板页面代码基于nodejs的简易静态资源服务最近在学习nodejs的时候写了一个简易的静态资源服务，记录一下学习代码。静态资源服务代码// server.tsimport crypto from 'crypto';import ejs from 'ejs';import fs, { promises } from 'fs';import http from 'http';import mime from 'mime';
2020-10-12 09:36:24
196
2
原创 html有趣行为——直接通过id操作dom
分享一个有趣的经验最近在学习中，偶然发现一个有趣情况：在html文档中可以在未定义变量的情况下直接通过html标签上的id值获取到dom元素并进行操作。可以先看看如下的情况：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-09-17 15:33:00
478
原创 浅谈对vueRouter的理解
在前端spa应用中，前端路由占据了举足轻重的地位。改变了浏览器的url地址，不请求服务器资源，自动刷新渲染页面视图。那么在前端路由中是如何实现的呢？通过vueRouter的实现方式做一个简要的了解。我们都知道在vueRouter中，浏览器下可以通过mode字段来控制路由的模式，而vueRouter将路由模式分为了两个类型：hash模式history模式首先可以了解一下是如何通过mode...
2020-04-22 16:04:18
711
2
原创 浏览器cookie中SameSite的理解
浏览器cookie中的SameSite的理解浏览器中的cookie信息，可以用于保存用户登录某个站点的信息保存，保持其用户验证的状态。但是cookie又是每次随着请求会自动发送到服务器去的，这就给了其他站点发起CSRF攻击和用户追踪的机会。于是就有了cookie的SameSite属性，用于限制第三方网站的cookie发送机制，具体如下：1. Strict最严格的模式，完全禁止跨站点请求时携...
2020-04-10 11:39:33
5531
5
原创 通过css动画实现一个表格滚动轮播效果
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下<template> <section> <div class="box"> <ul class="header"> <li class="cell">序号</li> <li ...
2020-03-05 14:08:07
1785
原创 css3动画实现无缝轮播走马灯
通过css3可以创建炫酷的动画特效让页面效果倍增，提高用户的使用感官。同时css动画可以被浏览器优化，提升性能，并且css动画相对js动画来说代码会更加简单。但是同时css动画控制不够灵活，兼容性不够好缺点也是同样的显著。不过脑洞够大就可以创造足够灵活的动画，怎么选择还是看具体的需求情况。通过css动画实现一个简单的走马灯效果，对应的代码如下，简单易懂，分段控制还可以实现滚动，暂停再继续滚动的效...
2020-03-05 13:40:55
3276
原创 字符串无重复最长子串长度-javascript实现
求取字符串中无重复最长子字符串得长度，之前在面试中也有碰到。然后在leetcode得题目中也看到了这个题目。现在记录一下当时得解题方法和思路。1.解题思路首先想到的将未重复的子字符串维护起来，最后来比对字串长度，得出最大长度。然后在实现的过程中发现这样的维护并不好做，于是想到了另一个思路，记录未重复子字符的长度，当有重复的字符出现的时候记录下此时的子串长度，最后输出最长的子串长度即可。2.实...
2020-03-04 13:59:01
303
原创 vue3.0源码调试
随着vue3.0的到来越来越近，将vue-next的代码clone到本地来研读的计划再次打开，鉴于之前在发布alpha版本的时候已经clone过一次了，这次只是简单的更新了一下代码。但是看着那可怕的更新数量还是被尤的高产惊到了。1. vue3.0打开之路首先自然是需要找到vue3x的代码库咯，在GitHub上直接搜索vue next就可以看到已经用typescript重写之后的vue了此...
2020-03-04 09:43:56
1081
2
原创 weex及vue多页面应用编译优化
weex采用的是多页面app模式，在此模式下每次编译会编译各个html文件尤为耗费时间，而在页面数量不断增加的情况下，编译耗时会越来越长，此种问题在vue的多页面开发中应该也是存在的。需要一个优化方法来解决编译时间过长的问题，那么就会想到如果只是在有修改的html文档中去编译文件，那么速度就会得到很大的提升。因此采用了html-webpack-plugin-for-multihtml...
2019-05-01 16:36:03
515
原创 使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式
使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式标签（空格分隔）： vue eslint vue-cli3+最近学习了一下vue-cli 3+的使用，也使用vue-cli 3+创建了一个demo项目。在感受其vue GUI的魅力的同时也深深的被vue-cli 3+创建的项目的简洁所折服。本文主要叙述如何在vue-cli 3+的项目中配置eslint-l...
2019-04-18 23:28:23
4531
8
原创 element+vue实现表格跨行
在项目开发中表格的使用还是很频繁的，而其中难免会涉及到表格的跨行跨列行为。这是一次记使用element-ui的table组件加vue实现的表格跨行跨列实践。 首先是查看element的table组件的api：<template> <div> <el-table :data="tableData6" :spa...
2019-02-24 15:08:23
3555
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人