shine_lovely

摘要： vue生命周期-父子组件 vue父子组件的生命周期 创建实例：从外到内（从父组件到子组件） 渲染：从内到外（子组件渲染完，再渲染父组件） Vue.component('comp',{ template:'<div>This is a component !</div>' }) const app = 阅读全文

摘要： 移动端前端bug汇总 参考： https://www.cnblogs.com/iovec/p/9729316.html 手机固有 某些手机上 fixed 元素在页面滚动时会消失 使用局部滚动，而不是整页滚动 某些 IOS 设备上触发不了点击事件 在元素上加 pointer:cursor IOS 设备 阅读全文

摘要： vue组件的更新：异步、批量 Vue组件的更新： 异步 批量 主要利用浏览器事件轮询的微任务机制来实现组件的异步批量更新。 当侦测到数据变化，vue会开启一个队列，将相关联的Watcher实例存入队列，将回调函数存入callbacks队列。异步执行回调函数，遍历watcher队列进行渲染。 异步： 阅读全文

摘要： new Vue()的过程 new Vue()的大致流程 new Vue() => _init() => $mount() => mountComponent() => new Watcher() => updateComponent() => render() => _update() 用户调用 n 阅读全文

摘要： EventLoop事件轮询 宏任务和微任务 浏览器从服务器获取到代码后，浏览器会开辟一个GUI渲染线程，GUI从上到下开始执行代码。 浏览器是多线程的，包含GUI渲染线程、HTTP网络请求线程（并发数6-7）、事件监听\定时器监听。但JS代码的运行是单线程的。 执行过程：执行完宏任务 ⇒ 执行微任务 阅读全文

摘要： vue2源码学习 — new Vue() 参考：https://blog.csdn.net/qq_36782473/article/details/109108477 调试环境 获取vue源码 项目地址：https://github.com/vuejs/vue 调试环境搭建 安装依赖： npm i 阅读全文

摘要： 手写router（简单实现嵌套路由） 需求分析： 简单实现嵌套路由 ① 记录当前路由的深度depth ② 路由匹配，得到深度对应的组件 代码实现 // 简单实现嵌套路由 // ① 记录当前路由router-view的深度 // ② 路由匹配，得到深度对应的组件 let Vue; class Rout 阅读全文

摘要： 手写Vuex 需求分析 Vue.use(Vuex) ⇒ 这是一个插件，需要实现一个静态方法 install new Vuex.Store(options) ⇒ 需要实现一个Store类 页面中可以通过 this.$store.xxx 可以访问store实例 ⇒ 需要挂载$store到Vue.prot 阅读全文

摘要： 手写vue-router(未实现嵌套路由) 需求分析： 页面无刷新跳转 ⇒ ① hash模式，监听onhashchange事件 ； ② history api ，利用H5的history api，来实现页面不刷新跳转 路由变化 ⇒ 页面更新 ==> 当前路由是个响应式数据 Vue.use(VueRo 阅读全文

摘要： Vue3 的 axios封装 import axios, { AxiosPromise, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import qs from 'qs' import { Toast } from 阅读全文

摘要： 手写vue - 虚拟DOM、diff算法 面试题： 1. 请简述Diff算法的执行过程 diff 的过程就是调用 名为 patch 的函数， 比较新旧节点， 一边比较，一边给真实DOM打补丁（定点更新）。 patch函数接受2个参数：oldVnode 和 vnode，分别代表 旧的节点 和 新的虚拟 阅读全文

摘要： 手写vue - 数据响应式、数据的双向绑定、事件监听 相关面试题： 1. MVVM的理解 MVVM：Model-View-ViewModel，也就是把MVC的Controller演变成ViewModel。 Model：数据模型，View：UI组件，ViewModel：View和Model的桥梁，数据 阅读全文

摘要： axios 的使用 axios.post('https://github.com/users', {}) .then(res => {}) .catch(err => {}) 结合async/await使用 async function getUser() { const res = await a 阅读全文

摘要： 非父子组件之间的通信： 1.兄弟组件 2. 用了插槽slot的组件之间通信 vue2中可以使用eventBus事件监听 vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') vue3中，可以使用第三方插件 阅读全文

摘要： Attribute 继承 当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。 同样的规则适用于事件监听器 禁用 Attribute 继承 如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: fa 阅读全文

摘要： 按照vue3的组件v-model初探1，把:value 用 v-model来替代，并使用computed计算属性 子组件： <template> <div> <input v-model="val"> <div>{{ modelValue }} {{ val }}</div> </div> </te 阅读全文

摘要： 父组件： <template> <div class="about"> <v-input v-model="inp" type="text" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from ' 阅读全文

摘要： https://blog.csdn.net/xustart7720/article/details/79960591 1. 减少Http请求 合并CSS、合并javascript、合并图片。 将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并 阅读全文

摘要： 1.1 浏览器根据域名解析IP地址 浏览器根据访问的域名找到其IP地址。DNS查找过程如下： 浏览器缓存：首先搜索浏览器自身的DNS缓存（缓存的时间比较短，大概只有1分钟，且只能容纳1000条缓存），看自身的缓存中是否是有域名对应的条目，而且没有过期，如果有且没有过期则解析到此结束。系统缓存：如果浏 阅读全文

摘要： 转发☞听风是风 通过本文，你将了解到http缓存机制是怎样的，no-cache到底有没有缓存，地址栏回车，F5，ctrl+F5的区别，以及当下较为推荐的缓存方案等。 说明 阅读前提：http缓存主要针如css，js，图片等更新频率不大的静态文件。 首先得先明确这个概念，不然以下的概念以及例子，都会显 阅读全文