摘要: 移动端前端bug汇总 参考: https://www.cnblogs.com/iovec/p/9729316.html 手机固有 某些手机上 fixed 元素在页面滚动时会消失 使用局部滚动,而不是整页滚动 某些 IOS 设备上触发不了点击事件 在元素上加 pointer:cursor IOS 设备 阅读全文
posted @ 2021-07-02 11:32 shine_lovely 阅读(167) 评论(0) 推荐(0) 编辑
摘要: vue组件的更新:异步、批量 Vue组件的更新: 异步 批量 主要利用浏览器事件轮询的微任务机制来实现组件的异步批量更新。 当侦测到数据变化,vue会开启一个队列,将相关联的Watcher实例存入队列,将回调函数存入callbacks队列。异步执行回调函数,遍历watcher队列进行渲染。 异步: 阅读全文
posted @ 2021-06-28 17:38 shine_lovely 阅读(1019) 评论(0) 推荐(0) 编辑
摘要: new Vue()的过程 new Vue()的大致流程 new Vue() => _init() => $mount() => mountComponent() => new Watcher() => updateComponent() => render() => _update() 用户调用 n 阅读全文
posted @ 2021-06-24 15:57 shine_lovely 阅读(1142) 评论(0) 推荐(0) 编辑
摘要: EventLoop事件轮询 宏任务和微任务 浏览器从服务器获取到代码后,浏览器会开辟一个GUI渲染线程,GUI从上到下开始执行代码。 浏览器是多线程的,包含GUI渲染线程、HTTP网络请求线程(并发数6-7)、事件监听\定时器监听。但JS代码的运行是单线程的。 执行过程:执行完宏任务 ⇒ 执行微任务 阅读全文
posted @ 2021-06-24 11:24 shine_lovely 阅读(144) 评论(0) 推荐(0) 编辑
摘要: vue2源码学习 — new Vue() 参考:https://blog.csdn.net/qq_36782473/article/details/109108477 调试环境 获取vue源码 项目地址:https://github.com/vuejs/vue 调试环境搭建 安装依赖: npm i 阅读全文
posted @ 2021-06-17 17:07 shine_lovely 阅读(81) 评论(0) 推荐(0) 编辑
摘要: 手写router(简单实现嵌套路由) 需求分析: 简单实现嵌套路由 ① 记录当前路由的深度depth ② 路由匹配,得到深度对应的组件 代码实现 // 简单实现嵌套路由 // ① 记录当前路由router-view的深度 // ② 路由匹配,得到深度对应的组件 let Vue; class Rout 阅读全文
posted @ 2021-06-10 21:12 shine_lovely 阅读(146) 评论(0) 推荐(0) 编辑
摘要: 手写Vuex 需求分析 Vue.use(Vuex) ⇒ 这是一个插件,需要实现一个静态方法 install new Vuex.Store(options) ⇒ 需要实现一个Store类 页面中可以通过 this.$store.xxx 可以访问store实例 ⇒ 需要挂载$store到Vue.prot 阅读全文
posted @ 2021-06-10 14:35 shine_lovely 阅读(70) 评论(0) 推荐(0) 编辑
摘要: 手写vue-router(未实现嵌套路由) 需求分析: 页面无刷新跳转 ⇒ ① hash模式,监听onhashchange事件 ; ② history api ,利用H5的history api,来实现页面不刷新跳转 路由变化 ⇒ 页面更新 ==> 当前路由是个响应式数据 Vue.use(VueRo 阅读全文
posted @ 2021-06-08 17:56 shine_lovely 阅读(159) 评论(0) 推荐(0) 编辑
摘要: Vue3 的 axios封装 import axios, { AxiosPromise, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import qs from 'qs' import { Toast } from 阅读全文
posted @ 2021-05-31 21:08 shine_lovely 阅读(2287) 评论(0) 推荐(0) 编辑
摘要: 手写vue - 虚拟DOM、diff算法 面试题: 1. 请简述Diff算法的执行过程 diff 的过程就是调用 名为 patch 的函数, 比较新旧节点, 一边比较,一边给真实DOM打补丁(定点更新)。 patch函数接受2个参数:oldVnode 和 vnode,分别代表 旧的节点 和 新的虚拟 阅读全文
posted @ 2021-05-25 16:16 shine_lovely 阅读(181) 评论(0) 推荐(0) 编辑
摘要: 手写vue - 数据响应式、数据的双向绑定、事件监听 相关面试题: 1. MVVM的理解 MVVM:Model-View-ViewModel,也就是把MVC的Controller演变成ViewModel。 Model:数据模型,View:UI组件,ViewModel:View和Model的桥梁,数据 阅读全文
posted @ 2021-05-18 17:54 shine_lovely 阅读(118) 评论(0) 推荐(0) 编辑
摘要: axios 的使用 axios.post('https://github.com/users', {}) .then(res => {}) .catch(err => {}) 结合async/await使用 async function getUser() { const res = await a 阅读全文
posted @ 2021-05-14 10:07 shine_lovely 阅读(394) 评论(0) 推荐(0) 编辑
摘要: 非父子组件之间的通信: 1.兄弟组件 2. 用了插槽slot的组件之间通信 vue2中可以使用eventBus事件监听 vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') vue3中,可以使用第三方插件 阅读全文
posted @ 2021-04-29 10:45 shine_lovely 阅读(139) 评论(0) 推荐(0) 编辑
摘要: Attribute 继承 当组件返回单个根节点时,非 prop attribute 将自动添加到根节点的 attribute 中。 同样的规则适用于事件监听器 禁用 Attribute 继承 如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: fa 阅读全文
posted @ 2021-04-28 14:06 shine_lovely 阅读(197) 评论(0) 推荐(0) 编辑
摘要: 按照vue3的组件v-model初探1,把:value 用 v-model来替代,并使用computed计算属性 子组件: <template> <div> <input v-model="val"> <div>{{ modelValue }} {{ val }}</div> </div> </te 阅读全文
posted @ 2021-04-28 11:08 shine_lovely 阅读(95) 评论(0) 推荐(0) 编辑
摘要: 父组件: <template> <div class="about"> <v-input v-model="inp" type="text" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from ' 阅读全文
posted @ 2021-04-28 10:50 shine_lovely 阅读(144) 评论(0) 推荐(0) 编辑
摘要: https://blog.csdn.net/xustart7720/article/details/79960591 1. 减少Http请求 合并CSS、合并javascript、合并图片。 将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并 阅读全文
posted @ 2021-03-09 11:09 shine_lovely 阅读(59) 评论(0) 推荐(0) 编辑
摘要: 1.1 浏览器根据域名解析IP地址 浏览器根据访问的域名找到其IP地址。DNS查找过程如下: 浏览器缓存:首先搜索浏览器自身的DNS缓存(缓存的时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否是有域名对应的条目,而且没有过期,如果有且没有过期则解析到此结束。系统缓存:如果浏 阅读全文
posted @ 2021-03-09 10:59 shine_lovely 阅读(145) 评论(0) 推荐(0) 编辑
摘要: 转发☞听风是风 通过本文,你将了解到http缓存机制是怎样的,no-cache到底有没有缓存,地址栏回车,F5,ctrl+F5的区别,以及当下较为推荐的缓存方案等。 说明 阅读前提:http缓存主要针如css,js,图片等更新频率不大的静态文件。 首先得先明确这个概念,不然以下的概念以及例子,都会显 阅读全文
posted @ 2021-03-09 10:45 shine_lovely 阅读(1293) 评论(0) 推荐(0) 编辑
摘要: 1 { 2 "javascript.preferences.quoteStyle": "single", 3 "workbench.colorTheme": "Solarized Light (no bold)", 4 "files.autoSave": "onFocusChange", 5 "es 阅读全文
posted @ 2021-02-22 16:49 shine_lovely 阅读(118) 评论(0) 推荐(0) 编辑