手掌日月摘星辰-CSDN博客

原创史上最全最新的前端面试宝典，将持续更新...

请见：Github地址，欢迎Star！也欢迎小伙伴们拍板砖！

2019-08-20 17:53:05 632 2

原创 git 提交代码某个文件夹一直提交不上去

有时我们会遇到这种情况，提交到远程的是个空的文件夹。

2024-01-09 15:14:10 420 1

我们使用Vue开发应用，实际上是编写若干Vue组件，实现模板、data、生命周期钩子等，然后执行new Vue()，将根组件挂载到指定的DOM节点上面，当我们编写的组件中生命周期钩子里面的或者在模板的元素事件中改变数据时候，视图会响应地更新。对于一个Vue组件，Vue首先会进行模板编译，将模板编译为render函数，render函数返回虚拟DOM，如果遇到子组件，也对子组件做同样操作，最终形成一个虚拟DOM树。当数据改变后，Vue会根据初始化时候收集的依赖，更新视图，这时候我们就看到最新的界面了。

2023-09-14 09:24:55 160

原创 Vue篇(013)-Vuex工作机制

它Vuex通过createStore创建了一个数据中心，然后通过发布-订阅模式来让订阅者监听到数据改变。Vuex的store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期钩子beforeCreate 完成的。Vuex的数据流是组件中触发action，action提交mutations，mutations修改states。Vuex使用vue中的reactive方法将state设置为响应式，这样组件就可以通过computed来监听状态的改变了。Vuex是个状态管理器。

2023-09-11 15:12:31 142

原创 Vue篇(012)-Vue组件为什么采用异步渲染？异步渲染原理是什么？nextTick的原理？

Vue可以响应数据变化，数据变化后会自动更新视图，如果每次修改都触发视图更新，会导致多次重复和不必要的渲染操作，例如一个组件使用了两个data的属性，更新两个属性如果触发两次渲染的话，会影响性能。整个更新渲染的过程是： 1. data的属性更新 2. 通知依赖的render 3. render的watcher加入队列（队列去重） 4. nextTick清空watcher队列，执行各watcher中的回调。每次更新响应的属性之后，会将渲染的watcher放到一个队列中，在下个事件循环中再执行。

2023-09-11 15:11:30 337

原创 Vue篇(011)-说说你对虚拟 DOM 的理解？

直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其。操作 dom 是比较昂贵的操作，频繁的dom操作容易引起⻚面的重绘和回流，但是通过抽象 VNode 进行。会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新。同一 VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在。中间处理，可以有效减少直接操作dom的次数，从而减少⻚面重绘和回流。

2023-09-11 14:57:17 42

原创微信小程序精选源码

微信小程序各行业源码

2023-01-10 11:05:07 144 1

原创 ssh: connect to host github.com port 22: Connection refused fatal: Could not read from remote 报错解决

在SSH配置文件中，设置github的主机名为 ssh.github.com 设置443端口。git push 或 git pull 到 github项目，遇到如下报错，复制如下代码到config文件。

2022-08-29 08:38:21 2054

原创前端打包工具rollup、webpack、vite的区别

rollup更适合打包库，webpack更适合打包项目，vite基于rollup实现了热更新也适合打包项目。

2022-08-15 16:17:17 1108

原创选择篇(067)-下面代码的输出是什么?

考察：解构赋值

2022-08-08 15:02:43 138

原创选择篇(066)-下面代码的输出是什么?

考察：delete操作符

2022-08-08 14:59:29 130

原创选择篇(065)-下面代码的输出是什么?

考察：export与import

2022-08-08 14:57:32 117

原创 Vue篇(010)-vue3如何通过ref属性获取元素

参考答案：1.在template中的写法跟vue2一样，给元素添加个ref=‘xxx’2.在setup中，先创建一个响应式数据，并且要把响应式数据暴露出去3.当元素被创建出来的时候，就会给对应的响应数据赋值4.当响应式数据被赋值之后，就可以利用生命周期方法onMounted中获取对应的响应式数据，即DOM元素解析...

2022-07-28 10:08:13 1724

原创 Vue篇(009)-vue 组件中 data 为什么必须是函数

在newVue()中，data是可以作为一个对象进行操作的，然而在component中，data只能以函数的形式存在，不能直接将对象赋值给它，这并非是Vue自身如此设计，而是跟JavaScript特性相关，我们来回顾下JavaScript的原型链。...

2022-07-28 10:04:02 183

原创 Chrome浏览器截取整个网页方法

快捷键f12，打开浏览器控制台；快捷键：Ctrl + Shift + P，打开指令列工具；（mac电脑快捷键是Command + Shift + P） 3. 搜索框输入 full 关键字，回车即可下载整个网页的png格式图片

2022-05-13 14:38:54 1514

原创如何在内网环境，用git上传代码到github

1.git设置http/https代理假设192.168.80.100:18888 是外网代理地址git config --global http.proxy http://192.168.80.100:18888git config --global https.proxy https://192.168.80.100:18888然后再git clone等命令就会自动走代理了。如果要取消代理：git config --global --unset http.proxygit config

2022-03-23 14:07:58 900

原创 Vue篇(008)-vue2.0中的$router 和 $route的区别

参考答案：$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数；而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等。解析

2022-03-04 09:09:21 390

原创选择篇(064)-下面代码的输出是什么?

const set = new Set([1, 1, 2, 3, 4]);console.log(set);A: [1, 1, 2, 3, 4]B: [1, 2, 3, 4]C: {1, 1, 2, 3, 4}D: {1, 2, 3, 4}参考答案

2022-03-04 09:03:15 136

原创选择篇(063)-下面代码的输出是什么?

class Dog { constructor(name) { this.name = name; }}Dog.prototype.bark = function() { console.log(`Woof I am ${this.name}`);};const pet = new Dog("Mara");pet.bark();delete Dog.prototype.bark;pet.bark();A: "Woof I am Mara", TypeErro

2022-03-04 09:02:22 130

原创选择篇(062)-下面代码的输出是什么?

(() => { let x = (y = 10);})();console.log(typeof x);console.log(typeof y);A: "undefined", "number"B: "number", "number"C: "object", "number"D: "number", "undefined"参考答案

2022-03-04 09:00:46 183

原创选择篇(061)-下面代码的输出是什么?

function Car() { this.make = "Lamborghini"; return { make: "Maserati" };}const myCar = new Car();console.log(myCar.make);A: "Lamborghini"B: "Maserati"C: ReferenceErrorD: TypeError参考答案

2022-03-04 08:59:26 150

原创选择篇(060)-下面代码的输出是什么?

2022-03-04 08:57:40 134

原创选择篇(059)-下面代码的输出是什么?

2022-03-04 08:55:55 140

原创选择篇(058)-下面代码的输出是什么?

[1, 2, 3].map(num => { if (typeof num === "number") return; return num * 2;});A: []B: [null, null, null]C: [undefined, undefined, undefined]D: [ 3 x empty ]参考答案

2022-03-04 08:52:51 131

原创选择篇(057)-下面代码的输出是什么?

const num = parseInt("7*6", 10);A: 42B: "42"C: 7D: NaN参考答案

2022-03-04 08:51:25 124

原创选择篇(056)-下面代码的输出是什么?

console.log(3 + 4 + "5");A: "345"B: "75"C: 12D: "12"参考答案

2022-03-04 08:50:18 174

原创选择篇(055)-下面代码的输出是什么?

const person = { name: "Lydia", age: 21};for (const item in person) { console.log(item);}A: { name: "Lydia" }, { age: 21 }B: "name", "age"C: "Lydia", 21D: ["name", "Lydia"], ["age", 21]参考答案

2022-03-01 10:53:15 143

原创选择篇(054)-下面代码的输出是什么?

let person = { name: "Lydia" };const members = [person];person = null;console.log(members);A: nullB: [null]C: [{}]D: [{ name: "Lydia" }]参考答案

2022-03-01 10:51:55 114

原创选择篇(053)-下面代码的输出是什么?

const firstPromise = new Promise((res, rej) => { setTimeout(res, 500, "one");});const secondPromise = new Promise((res, rej) => { setTimeout(res, 100, "two");});Promise.race([firstPromise, secondPromise]).then(res => console.log(res));

2022-03-01 10:50:54 154

原创选择篇(052)-下面代码的输出是什么?

function* generator(i) { yield i; yield i * 2;}const gen = generator(10);console.log(gen.next().value);console.log(gen.next().value);A: [0, 10], [10, 20]B: 20, 20C: 10, 20D: 0, 10 and 10, 20参考答案

2022-03-01 10:49:54 166

原创选择篇(051)-下面代码的输出是什么?

[...'Lydia']A: ["L", "y", "d", "i", "a"]B: ["Lydia"]C: [[], "Lydia"]D: [["L", "y", "d", "i", "a"]]参考答案

2022-02-22 15:58:13 167

原创选择篇(050)-setInterval 方法的返回值是什么？

setInterval(() => console.log('Hi'), 1000)A: 一个唯一的idB: 该方法指定的毫秒数C: 传递的函数D: undefined参考答案

2022-02-17 09:21:34 2071

原创选择篇(049)-下面代码的输出是什么?

!!null!!''!!1A: false true falseB: false false trueC: false true trueD: true true false参考答案

2022-02-17 09:20:23 157

原创选择篇(048)-下面代码的输出是什么?

[[0, 1], [2, 3]].reduce( (acc, cur) => { return acc.concat(cur) }, [1, 2])A: [0, 1, 2, 3, 1, 2]B: [6, 1, 2]C: [1, 2, 0, 1, 2, 3]D: [1, 2, 6]参考答案

2022-02-17 09:16:57 198

原创选择篇(047)-JavaScript中的所有内容都是…

A：原始或对象B：函数或对象C：技巧问题！只有对象D：数字或对象参考答案

2022-02-17 09:15:44 320

原创选择篇(046)-下面代码的输出是什么？

(() => { let x, y try { throw new Error() } catch (x) { (x = 1), (y = 2) console.log(x) } console.log(x) console.log(y)})()A: 1 undefined 2B: undefined undefined undefinedC: 1 1 2D: 1 undefined undefined参考答案

2022-02-17 09:13:44 317

原创选择篇(045)-下面代码的输出是什么？

const numbers = [1, 2, 3]numbers[10] = 11console.log(numbers)A: [1, 2, 3, 7 x null, 11]B: [1, 2, 3, 11]C: [1, 2, 3, 7 x empty, 11]D: SyntaxError参考答案

2022-02-17 09:12:39 172

原创选择篇(044)-下面代码的输出是什么？

console.log(typeof typeof 1)A: "number"B: "string"C: "object"D: "undefined"参考答案

2022-02-17 09:11:17 216

原创选择篇(043)-下面这些值哪些是假值?

0new Number(0)('')(' ')new Boolean(false)undefinedA: 0, '', undefinedB: 0, new Number(0), '', new Boolean(false), undefinedC: 0, '', new Boolean(false), undefinedD: All of them are falsy参考答案

2022-02-14 15:11:30 186