u012174809的专栏

看过无数遍，还是说不清楚 。来个说人话的加深印象。首先再vue初始化的时候，就对data数据进行了劫持监听，其中就是监听器 Observe，用来监听所有属性。若有属性发生变化就需要告诉订阅者Watcher看是否需要更新。因为订阅者Watcher有多个，所以需要一个消息订阅器 Dep 来专门收集这些订阅者，在监听器Observe和订阅者Watcher之间进行统一管理。还需要有一个指令解析器 Compile ，对每个节点元素进行扫描解析，将相关的指令（如 v-model，v-on …）对应初始化

1、在类型上mysql是关系型数据库，而redis是缓存数据库；2、在作用上mysql用于持久化的存储数据到硬盘，而redis用于存储使用较为频繁的数据到缓存中（内存）；redis用于存储使用较为频繁的数据到缓存中，读取速度快3、mysql和redis的需求不同4.在速度上mysql用于持久化的存储数据到硬盘，功能强大，但是速度较慢。redis用于存储使用较为频繁的数据到缓存中，读取速度快,能够大大的提高运行效率，但是保存时间有限。MySQL和Redis的运行机制My

相同点require 和 import，都是为了JS模块化使用。requirerequire是Commonjs的规范，node应用是由模块组成的，遵从commonjs的规范。用法// a.jsfunction test (args) { // body... console.log(args); } module.exports = { test}// b.jslet { test } = require('./a.js'); test('th..

一声叹息，天天增删改查，来吧。什么是混入mixin将多个vue文件内重复使用的功能代码，提取成单个js文件，在需要使用的地方进行调用即可。 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有<script>中可以定义的代码。混入注意(重名情况)组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准;组件中的 methods，computed，wath名称 和 混入中的 methods

什么是工程化工程化是一种思想而不是某种特定的技术，当然我们在实现项目工程化的过程中，我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。目前，web业务日益复杂化和多元化，单页面应用和webApp风靡。而且前端的生态圈繁荣，各种框架，组件出现，使得前端发展迅速，快速开发已经成为了前端的一个标准。靠传统的前端三剑客 JavaScript、HTML、 CSS

<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive>当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。首先我们来看看keep-alive是什么东西keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。它的作用不言而喻用来...

1. key的作用首先v-for在列表渲染时，我们可以用v-for基于一个数组来渲染一个列表。v-for指令需要使用item in arr形式的特殊语法来进行渲染列表，arr是源数据，<ul id="example-1"> <li v-for="item in arr" :key="item.id"> {{ item.message }} </li></ul>当Vue正在使用v-for渲染元素列表的时候，它默认的是使用

25、watch 和computed区别 以及computed的缓存 - 简书

new Vue({ el: '#app', router, store, i18n, render: h => h(App)})render: h => h(App) 是下面内容的缩写：render: function (createElement) { return createElement(App);至于什么是render,【Vuejs】render函数的使用_朵朵和太阳的博客-CSDN博客进一步缩写为(ES6语法)：re..

当我知道Vue2.0的双向绑定内部是如何实现的时候(不清楚的可见我前期博客),听说现在已更新到Vue3.0了，新版本肯定是更轻，更快，更易使用。那它是如何实现的呢？Vue3.0较Vue2.0的优势如下图:官网传送门介绍 | Vue.js核心区别Vue2.0是基于javascript的，Vue3.0是基于TypeScript,而javascript和TypeScript的区别如下图:图解即（下面这块不清楚的，可要好好补了，这下面知识是前端人的最基本素养）：语言层面.

在2020年以前，我所接触的是前后端都在后端(非前后端分离),那个时候浏览器想要什么页面，是由后端决定再返回一个html。之后接触了前后端分离，前端有了自己的服务端，不再是要后端来决定是显示哪个html，并且前后端分离后，各种便利框架，本人用的是VUE。当技术发展到巅峰，在最终依旧会回归本质，这不SSR也就出世了。什么是服务端渲染（SSR）SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html。服务端渲染是一种方式，不限定语言，

检查加载性能一个网站加载性能如何主要看白屏时间和首屏时间。白屏时间：指从输入网址，到页面开始显示内容的时间。 首屏时间：指从输入网址，到页面完全渲染的时间。将以下脚本放在</head>前面就能获取白屏时间。<script> new Date() - performance.timing.navigationStart // 通过 domLoading 和 navigationStart 也可以 performance.timing.domLo..

重排当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。重绘当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。记住，重排会导致重绘，重绘不会导致重排 。重排和重绘这两个操作都是非常昂贵的，因为 JavaScript 引擎线程与 GUI 渲染线程是互斥，它们同时只能一个在工作。什么操作会导致重排？添加或删除可见的 DOM 元素 元素位置改变 元素尺寸改变 内容改变 浏览器窗

温故而知新也，重温一次。大白话讲解Promise（一） - 吕大豹 - 博客园

1.v-for为什么要加key值vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM不清楚的同学举例传送门VUE中演示v-for为什么要加key - 简书2.v-for与v-if不能同用的原因当 Vue 处理指令时，v-for比v-if具有更高的优先级(此见解在VUE2版本里，VUE3版本里已是v-if比v-for的...

如果是这样 .iconfont::after{ content: ' '; }兄才，你失策了，这并没有作用，听说是被CSS渲染时吃掉了。 .iconfont::after{ content: ' '; white-space: pre; }加个white-space:pre 搞定...

效果图我就不上传了，就是一直在抖(谷歌浏览器)。(本人电脑没出现这种问题，不同分辨率的电脑就偶尔会出现)，起先我并不打算处理这个BUG，因为它捉摸不透，我不知从何下手。后来，测试人员反应的越来越频繁，我起先的怀疑是宽度或高度达到了临界值，然后一直在自动计算。可是，我并不能十分确定，不知是我的CSS有问题，还是element插件出了问题，我并不能确定。直到我百度发现了同款问题，最终就确定了。element-ui 表格无限抖动问题及解决 | = - =vue中element-ui的表格抖动 - 博客天天

forEach循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度 this.list.forEach(item => { item.codeshow = false })map遍历数组每个元素，并回调操作，可以有返回值，返回值组成新的数组，原数组不变,如没有返回值则原数组可改变。//无返回值 原数组改变 this.data.map(async v => { if (v.city) {

本人对Vue的原型prototype有了解过,知道这是啥玩意，但对于Vue.use只知会用，却不知其意。今天来看看。示例// 引入公共方法扩展import common from '@/prototypeEx/common.js'Vue.prototype.common = common// 引入公共缓存方法import cacheEx from '@/prototypeEx/cacheEx.js'Vue.prototype.cacheEx = cacheEx// 引入大数据展示 插件

当我们知道HTTP请求的第一步是域名解析时，那么问题来了1.IP需要域名解析吗?不需要,DNS就是来解析域名的,你没有域名就用不到,直接使用IP地址就OK2.如是域名，是否每次请求都要经过DNS解析？不会，用缓存。...

数组乱序在使用需要某种程度的随机化的算法时，你会经常发现洗牌数组是一个相当必要的技能。下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌。const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5) const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log(shuffleArray(arr))复制到剪贴板在Web应用程序中，复制到剪贴板因其

当我们知道进行一次网络请求的过程时:域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户我们是否想过同一浏览器请求相同服务器，是否每次请求都是要TCP的3次握手。我试着去百度，果然，和我有相同疑问的还挺多。正确答案如下:在最早的http协议中，每进行一

最近工作清闲，静下心来有必要温故而知新，每次温故都有不同的见解，收获。打开VUE源码，我看到了一脸懵逼的代码，我竟到了这JS代码都看不明白的地步唉。/* @flow */export function isDef (v: any): boolean %checks { return v !== undefined && v !== null}上面代码里用到了flow的知识:Flow 是javascript代码的静态类型检查工具。我对(v:any) :boole

scope代表仅在本组件中渲染，不污染其它组件

使用场景不想创建定时器实例，创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;(本人在这方面栽过跟头) getServeTimeSetTime() { // 开启定时器，五分钟获取一次服务器时间 const timer1 = setInterval(this.handleGetServerTime, 5 * 60 * 1000) // this.$once('hook:beforeDestroy', () =&gt

格式化针对html css js 均有效1.file（文件）-preferences（首选项）-settings (设置)2.2.2.搜索关键词 format 并打上勾，如图假如以上失败。请先安装美化插件eslint（可组装的JavaScript和JSX检查工具）...

.redStar::before{ content: "*"; color: #ff0000; font-size: 12px; position: relative; top: 0px; }效果::为css的伪元素，详情学习见CSS 伪元素

我竟然从未知道这玩意儿，当我知道后感觉，啊，好实用。<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form

水平居中margin:0 auto;解读上面的代码值设置了两个值，那么第一个值就是元素的上下边距，第二个值就是左右边距。当元素的定义了width属性时，auto能实现水平居中的效果。这是固定写法。垂直居中(小编之弱点)例一<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script></script

var reg = new RegExp(/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{8,18}$/)console.log(reg.test('Ab3377133771'))

var regExp = new RegExp(/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,18}$/) console.log(regExp.test('Ab3377133771'))

假如你也和我一样，面对这个问题，虽然明白是什么东西，但始终答的不清不楚，这说明，我们是同一类人，对于不清楚的东西想要一探究底。即使我你已在开发岗上待了N年，却发现我们终究还是只学会简单的增删改查。先看一个示例结果点开一层一层的看(建议自己在浏览器亲自输入并查看)看到这里，我陷入了思考。引入知乎高赞的一张图总结:1.对象(Object)对象有属性__proto__,指向该对象的构造函数的原型对象。在JS里，万物皆对象。方法（Function）是...

这是es6新增的数据类型，我们重新回顾一下，JS的基本数据类型。Number String Boolean Null Undefined Symbol（ES6新增数据类型） bigInt（ES6新增数据类型）这里表示数据类型的只有Number，但是你知道吗?Number只提供:-9007199254740991 (-(2^53-1))和9007199254740991(2^53-1)之间的整数超出这个数，程序将会自动四舍五入，失去精度。那怎么办呢，bigint它来了，它真的来了.

因为不是很清晰，于是我决定自己写一篇，即当复习。什么是css?css即是层叠样式表 (CascadingStyleSheets),用我的话来描述就是样式渲染它不需要预编译，能直接被浏览器识别并解析。横空出蓝的css3只是css的升级版本，写法一样，只是新增的些属性。box-shadow(阴影效果)border-colors(为边框设置多种颜色)boder-image(图片边框)text-shadow(文本阴影)text-overflow(文本截断)border-radi...

什么是ES6ES6，是 JavaScript 的一个版本标准，2015横空上世。ES6 主要是为了解决 ES5 的先天不足，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。我在目前的ES6标准中，用了哪些提供的特征。1.let我基本在ffor循环，块级范围内用，优点是我不用在每个for里通过var a var i var c 来换名字防止变量被不小心污染,只要有for循环的地方，我只要let i即可。因为它的作用域是块级的。var是全局的。并且在量大时，l

箭头函数和普通函数有什么区别 - 简书

js 宏观任务和微观任务> promise的代码为什么比setTimeout先执行_bigBax的博客-CSDN博客_宏观任务和微观任务执行顺序

async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log('async2') } async1() console.log('script start') // js是单线程的 是非阻塞的 我们去掉await 再看结果 functio...

这两年一直在用promise虽熟悉，但也有些不是非常清晰。现在复习下。ES6 Promise 用法讲解 - 王汉炎 - 博客园

为什么JS是单线程的？因为JS里面有可视的Dom，如果是多线程的话，这个线程正在删除DOM节点，另一个线程正在编辑Dom节点，导致浏览器不知道该听谁的如何实现异步编程?1.回调函数(这个本人未尝试过，学习下)假定有两个函数f1和f2，后者等待前者的执行结果。　　f1();　　f2();如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。　function f1(callback){　　　　setTimeout(function ...