2024年最新写高质量 JS 变量的5种最佳做法，2024年最新在线面试是什么意思-CSDN博客

本文链接：https://blog.csdn.net/2401_84433829/article/details/138900636

Vue

什么是MVVM？
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
组件之间的传值？
Vue 双向绑定原理
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
虚拟 DOM 实现原理
Vue 中 key 值的作用？
Vue 的生命周期
Vue 组件间通信有哪些方式?
vue 中怎么重置 data?
组件中写 name 选项有什么作用？
Vue 的 nextTick 的原理是什么？
Vuex 有哪几种属性?

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// let 初始化是可选的

let result;

// let can be reassigned

result = 14;

result = result * 2;

选择变量的声明类型时的一个好习惯是首选const，否则使用let。

function myBigFunction(param1, param2) {

/* lots of stuff… */

const result = otherFunction(param1);

/* lots of stuff… */

return something;

}

例如，如果我们正在查看函数体，并看到const result = ...声明：

function myBigFunction(param1, param2) {

/* lots of stuff… */

const result = otherFunction(param1);

/* lots of stuff… */

return something;

}

不知道myBigFunction()内部会发生什么，我们可以得出结论，result 变量只分配了一次，声明之后是只读的。

在其他情况下，如果必须在执行过程中多次重新分配变量，则可以使用let声明。

2.最小化变量的范围

变量存在于它们所创建的作用域内。代码块和函数体为const和let变量创建一个作用域。提高变量可读性的一个好习惯是将变量保持在最小作用域内。

例如，以下函数是二进制搜索算法的实现：

function binarySearch(array, search) {

let middle;

let middleItem;

let left = 0;

let right = array.length - 1;

while(left <= right) {

middle = Math.floor((left + right) / 2);

middleItem = array[middle];

if (middleItem === search) {

return true;

}

if (middleItem < search) {

left = middle + 1;

} else {

right = middle - 1;

}

return false;

}

binarySearch([2, 5, 7, 9], 7); // => true

binarySearch([2, 5, 7, 9], 1); // => false

middle和middleItem变量在函数体的开头声明。因此，这些变量在binarySearch()函数体创建的整个作用域内都是可用的。

middle变量保留二进制搜索的中间索引，而middleItem变量保留二进制搜索的中间索引。

但是，middle和middleItem变量只在while循环代码块中使用。所以为什么不直接在while代码块中声明这些变量呢?

function binarySearch(array, search) {

let left = 0;

let right = array.length - 1;

while(left <= right) {

const middle = Math.floor((left + right) / 2);

const middleItem = array[middle];

if (middleItem === search) {

return true;

}

if (middleItem < search) {

left = middle + 1;

} else {

right = middle - 1;

}

return false;

}

现在，middle和middleItem变量仅存在于使用变量的作用域。他们的生命周期和生命周期极短，因此更容易推断其作用。

3.在接近位置声明变量

我强烈希望在函数主体的顶部声明所有变量，尤其是在函数较大的情况下。不幸的是，这种做法的缺点是使我在函数中使用的意图变量变得混乱。

尽量在接近使用位置的地方声明变量。这样，我们就不用猜了:嘿，我看到了这里声明的变量，但是它在哪里被使用了。

假设我们有一个函数，该函数的主体中包含很多语句。我们可以在函数的开头声明并初始化变量结果，但是只能在return语句中使用result：

function myBigFunction(param1, param2) {

const result = otherFunction(param1);

let something;

calculate something…

return something + result;

}

问题在于result 变量在开头声明，但仅在结尾使用，没有足够的理由在开始时声明该变量。

让我们通过将result 变量声明移到return语句之前来改进这个函数

function myBigFunction(param1, param2) {

let something;

calculate something…

const result = otherFunction(param1);

return something + result;

}

现在，result变量在函数中有了它的正确位置。

4.好的命名意味着易于阅读

从良好的变量命名的众多规则中，我区分出两个重要的规则。

第一个很简单：使用驼峰命名为变量取名，并且在命名所有变量时保持一致。

const message = ‘Hello’;

const isLoading = true;

let count

有特殊含义的数字或字符串，变量命名通常是大写的，在单词之间加下划线，以区别于常规变量

const SECONDS_IN_MINUTE = 60;

const GRAPHQL_URI = ‘http://site.com/graphql’;

第二条规则，在变量命名中，我认为这是最重要的：变量名称应明确无歧义地指出哪些数据保存了该变量。

以下是一些很好的变量命名示例：

let message = ‘Hello’;

let isLoading = true;

let count;

message 名称表示此变量包含某种消息，很可能是字符串。

isLoading相同，布尔值指示加载是否在进行中。

count变量表示保存一些计数结果的数字类型变量。

选择一个明确表明其角色的变量名。

举个例子，这样就能看出区别了。假设看到了这样一个函数:

function salary(ws, r) {

let t = 0;

for (w of ws) {

t += w * r;

}

return t;

}

你能总结出这个函数的作用吗?像ws、r、t、w这样的变量名几乎没有说明它们的意图。

相反，相同的函数，但使用了解释性变量命名

function calculateTotalSalary(weeksHours, ratePerHour) {

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…