前端面试系列
vue、react 系列
会点php的前端小渣渣
技术栈:mvc框架+react+vue+小程序+微信公众号开发
展开
-
前端性能优化持续记录(2022-2-23)
不搞那些什么花里胡哨的。。。1.干掉调式时候的 console.log2.项目里面的本地图片使用熊猫压缩,缩小3.将moment.js 替换成 day.js4.ui库组件按需引入,用不到的不要写。原创 2021-07-01 17:09:08 · 100 阅读 · 0 评论 -
ES Module 和 Commonjs | require和import的区别
1. 语法1.1 ES Module导出:export / export default导入: import * from 'module'1.2 Commonjs导出:module.exports导入:const module = require('module')2. 特性2.1 ES Module静态引入、编译时引入(支持Tree shaking 按需加载)2.2 Commonjs动态引入、执行时引入...原创 2022-01-05 11:01:38 · 1277 阅读 · 0 评论 -
setTimeout和Promise进行混合操作的执行顺序
console.log('同步-0.1')Promise.resolve().then(() => { console.log('P-1.1')})setTimeout(() => { console.log('S-1.1')});Promise.resolve().then(() => { console.log('P-1.2')})setTimeo...原创 2020-03-06 16:07:14 · 754 阅读 · 0 评论 -
js的原型、原型链、new、Object.create 的理解
理解原型编程范式类是先抽象后具体,也就是必须先有类,之后才是实例,然后在关注具体层面的东西。比如 JAVA 中,类是它面向对象系统的根本。原型是先具体后抽象,将相似实例关联到一个原型对象,从而囊括较为通用的行为和属性。基于此原型,通过 “复制” 来创建新对象。JS 中,原型是面向对象系 统的根本。JS 中怎么实现复制的呢?JS 是通过使新对象保持对原型对象的引用来做到了 “复制”(就是新对象上面有 proto)。JS 不是有 Class 么?注意,JS 的 class 只是原型的原创 2021-01-21 14:36:56 · 239 阅读 · 0 评论 -
webpack 相关原理(6)
1.webpack打包、构建原理?2.loader加载原理? 常用loader的原理? loader执行顺序?3.plugins加载原理? 怎样自己写插件? webpack plugin执行顺序?4.webpack HMR原理?原创 2021-11-15 09:55:32 · 378 阅读 · 0 评论 -
使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架
<article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css"> ...原创 2021-11-12 17:10:44 · 1577 阅读 · 0 评论 -
vue的computed原理(5)
Vue响应系统,其核心有三点:observe、watcher、dep:observe:遍历data中的属性,使用 Object.defineProperty 的get/set方法对其进行数据劫持dep:每个属性拥有自己的消息订阅器dep,用于存放所有订阅了该属性的观察者对象watcher:观察者(对象),通过dep实现对响应属性的监听,监听到结果后,主动触发自己的回调进行响应对响应式系统有一个初步了解后,我们再来分析计算属性。首先我们找到计算属性的初始化是在src/core/instance.原创 2021-11-12 13:50:45 · 884 阅读 · 0 评论 -
vue的vuex存储原理(4)
第一步:先说下为什么会 new store() 它是怎么来的我们先来看段element-ui里面的table表格源码,里面会出现一个小型封装的vuex 这里只放代码片段,嘿嘿,便于理解这段在watcher.jsexport default Vue.extend({ data() { return { states: { // 3.0 版本后要求必须...原创 2020-02-18 16:09:33 · 729 阅读 · 0 评论 -
vue 组件属性 name有什么用?
说白了。。。就是用的时候必须有,不用就无所谓。。。但还是建议大家写上去组件是有name属性的,匹配的就是组件的name。和vue-router中配置的name是不同的含义。 1.当项目使用keep-alive时,可搭配组件name进行缓存过滤 配置<keep-alive>标签的exclude或者include属性做组件筛选 实例: <div id="app"> <keep-alive exclude="Detail"> <rout.原创 2021-11-11 15:24:22 · 1044 阅读 · 0 评论 -
2022年的vue、react面试题目汇总集合(持续更新)
vue系列:2021 Vue.js 面试题汇总及答案 - Jack Niu - 博客园react系列:React面试题及答案(2021年React面试题大全带答案) - 知乎2021年React常见的面试题以及答案(持续更新中...)_再见已是路人的博客-CSDN博客_react面试题及答案20212021年前端React面试题大汇总(收藏)-js教程-PHP中文网掘金高频前端面试题汇总之React篇(上)掘金高频前端面试题汇总之React篇(下)综合...原创 2021-11-05 15:55:12 · 3464 阅读 · 1 评论 -
vue中keepAlive组件的作用及使用方式
keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个输入框组件切换后不进行销毁,而是保存之前的状态(就是输入的内容还在),那么就可以利用keep-alive来实现在keep-alive上有两个属性字符串或正则表达式。只有匹配的组件会被缓存。include 值为字符串或者正则表达式匹配的组件name会被缓存。exclude 值为字符串或正则表达式匹配的组件name不会被缓存。..原创 2021-11-05 15:20:48 · 1068 阅读 · 0 评论 -
Vue实例中的template讲解(1)
//别忘了引包<body> <div id="app-1"> {{msg}} </div> ================ <div id="app-2"> {{msg}} </div> ================= <div id="app-3"> {{msg}} </div> <script> //在vue.js中,可以使.原创 2021-11-04 14:57:58 · 5795 阅读 · 0 评论 -
vue项目针对第三方库的优化、Vue.use作用(2)
引入图表、各种第三方库....<script crossorigin="anonymous" integrity="sha512-L11muaArB67yhW3UCrsyxxErXr6IntjHMb7tzl0aQr56ccZA2c90pyF4iMhhMwRjYhE9LV1JjTS6PgmDbD+M7g==" src="https://lib.baomitu.com/vuex/4.0.2/vuex.cjs.js"></script><script crossorigin=.原创 2021-11-05 10:51:19 · 213 阅读 · 0 评论 -
vue中v-for 中 :key的一系列问题 (3)
为什么不能用 默认的index 作为 key?如果你用 index 作为 key,那么在做特殊操作新增或者删除某项的时候,内部默认的index 永远都是连续的,可能会出现bug, 所以有时候不写key、或者写了默认的key效果是一样的。再通俗点:这也是vue不推荐使用数组下标作为key的原因。例如数组删除了一个元素,那么这个元素后方元素的下标全都前移了一位,之前key对应的数据和dom就会乱了,除非重新匹配key,那就容易产生错误。如果重新匹配key,等于全部重新渲染一遍,违背了使用...原创 2021-11-05 14:11:33 · 468 阅读 · 0 评论 -
说下v-model的实现原理,戏法
v-model只不过是一个语法糖而已,真正的实现靠的还是 v-bind:绑定响应式数据 触发oninput 事件并传递数据 <input v-model="sth" />// 等同于<input :value="sth" @input="sth = $event.target.value" /> //自html5开始,input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变;//$event原创 2020-05-26 17:47:09 · 203 阅读 · 0 评论 -
vue.js观察者模式+双向绑定
什么是双向绑定?道理你们都懂,我就不再打字了。无非就是数据在view,model同步改变了。代码非常简单,非常容易理解。vue的双向绑定也是这个原理。不过人家那个是使用了 发布-订阅模式结合defineProperty进行循环遍历对象key属性值进行监听,下面这个demo只是把对象key值写死而已。<!DOCTYPE html><html><he...原创 2019-07-10 16:58:42 · 249 阅读 · 0 评论