共计 4280 个字符，预计需要花费 11 分钟才能阅读完成。
Hello 小伙伴们早上、中午、下午、早晨、深夜好，我是爱折腾的 jsliang~
「前端都在聊什么」是 jsliang 日常写文章 / 做视频 / 玩直播过程中，小伙伴们的发问以及我的解疑整顿。
本文章视频同步：https://www.bilibili.com/vide…
本期对应 2023 年的 01.24 当天直播间的粉丝互动。
次要讲 jsliang 这个 React 菜鸡，帮忙剖析 Vue 多层嵌套时界面不渲染问题，以及对代码格调的一些见解。
你的 关注 和 点赞 是我继续更新的能源💖，谢谢大家~
一 嗨！界面咋不进去
首先，那天小伙伴求助过去，我是很懵的。
因为我这 React 小菜鸡，没法确认是否能帮忙解决到问题。
如果最初没帮忙解决掉问题，想必会被打得很惨吧~
而后，想着大过年的，小伙伴还在惦记这个问题，能帮一个是一个吧~
那就问分明问题，帮忙剖析剖析！
小伙伴形容说：
用 Vue 耍级联操作组件
一开始一级联动没问题，能获取到数据并渲染
然而多级嵌套出问题了，数据获取到了，然而渲染失败
尝试过用 `setTimeout`，成果不好于是，听完形容后，我开始重复看 ta 代码，并开始 Google 之旅。
大略花了 40 分钟后，尝试用本人常识但发现没卵用后，终于找到一个貌似可行的解释：
最终通过 vm.$forceUpdate() 解决了这次「脸面」危机~
同样碰到数据渲染问题的小伙伴，能够看看这篇文章 Vue 数据更新了但页面没有更新的 7 种状况汇总及延长总结
二 唠嗑！代码格调争议
解决完小伙伴问题后，俺也是名正言顺了一回，于是跟小伙伴探讨下他们代码格调问题。
当然，小伙伴也阐明了，他们的代码由多个成员参加，没有对立的 Lint，所以才会呈现这个问题。
所以全程沟通气氛“十分敌对”，切勿瞎想妄议~
2.1 层级缩进 – 2 空格 4 空格之争
像下面代码贴图，一会 2 空格，一会 4 空格的，团队标准很是问题。
JavaScript 有个很奇怪的争执：用 2 空格还是 4 空格比拟适合。
第一次理解到这个辨别的，还是因为工作中写 2 空格被大佬吐槽。
前面跟大佬混熟后，我搞懂了：
- 屏幕比拟「大」的，都喜爱 4 空格
- 屏幕比拟「小」的，都喜爱 2 空格
震惊我一整年！！
这让我这个用笔记本电脑，而后外接显示器的情何以堪~
变身，间接成为两头党！你强任你强，能跑就成王。
2.2 正文地位 – 前置还是后置
对于正文地位放到行尾还是上方，其实是较有争议的：
- 行尾
const name = 'jsliang'; // 这是我的网名- 上方
// 这是我的网名
const name = 'jsliang';在公司团队单干的时候，也会碰到这种抵触。
因为我的项目构建问题，正文可能会被独自一行，所以会导致呈现上面的状况：
const name = 'jsliang';
// 这是我的网名所以在工作中养成了习惯，代码正文在上方独自一行。
不过感觉如果是一些比拟简短的正文，放在行尾也是 OK 的，例如：
const name = 'jsliang'; // 网名
const age = 28;
const like = 'play'; // 喜好
// ? 这个常量做什么的，如果没有正文怎么了解
const TODO = [];蹩脚！当初看行尾正文有点不习惯了~
集体感觉次要还是变量名问题。
因为有些变量名，英文翻译进去有多个意思，所以才须要咱们通过正文来增强解释。
所以工作中，不太容易了解的变量名和办法函数，最好加上正文。
感兴趣的小伙伴能够关注下 JSDoc：https://www.jsdoc.com.cn/
2.3 _this = this? 令人抓狂
上面是 Vue 中，一个我当初也没想明确的操作：
jsliang 查了下，Vue 上这么写是因为有 this 指向问题，所以才须要：
const _this = this;可参考：Vue 中 的 var that=this 语句是什么意思？
尽管下面帖子探讨能够应用箭头函数，然而我还是顺带查问了下 Vue 官网。
外面也阐明分明，申明办法时该当防止应用箭头函数：
仁者见仁，如果有 Vue 比拟纯熟的小伙伴，能够评论区下留言对于本人对这块的见解~
2.4 var/let 和 const
在文章 document-library/ 系列 - 面试材料 /JavaScript/ 变量 中，咱们探讨过。
对于 var，因为存在不可控因素：
var申明的变量会预解析，晋升到全局变量上，影响整个 JS 脚本
举个栗子：
var temp = new Date();
function f(){console.log(temp);
if(false){var temp = "hello";}
}
f(); // undefined在这个代码块执行的时候，temp 被预解析了，晋升下来了，于是成为：
var temp = new Date();
function f(){
+ var temp;
console.log(temp);
if(false){
- var temp = "hello";
+ temp = "hello";
}
}
f(); // undefined所以 ES6 进去了 let 和 const。
在变量类型和值不确认的状况，应用 let，在操作常量以及固定类型的时候，应用 const：
let age = 28;
const name = 'jsliang';
const info = {
name,
age,
};
// name: 'jsliang', age: 28
console.log(info);
// 一年后
const after1Year = () => {age++;};
after1Year();
const newInfo = {
name,
age,
};
// name: 'jsliang', age: 29
console.log(newInfo);更多能够返回 document-library/ 系列 - 面试材料 /JavaScript/ 变量 理解。
2.5 数据解构 – a.b.c.d
这个问题在工作中十分常见：
在重复调用的时候，尤其是 window.xxx 模式比拟多，须要查找外面属性的时候。
这样子写代码比拟难浏览。
能够尝试这么优化：
// 1. 就是获取，并且兼容
const dataset = e.currentTarget.dataset || {};
// 2. 解构获取
const {id, name, pid, pindex} = dataset;
// 3. 做其余操作
// 留神确保是否需判断 id/name 的兼容性
// 如果可能为 undefined，那应该 if (id) {}2.6 对象中 key 和 value 命名雷同
上面有 2 个能够尝试晋升浏览体验的操作。
尝试优化：
queryfntQueryVillage({
// param: param
param
}).then((res) => {// ...todo});尝试优化：
// _this.result[_this.navCurrentIndex] = {id: id, name: name, pid: pid};
_this.result[xxx] = {id, name, pid};这 2 个操作，能够让代码看起来更精简。
2.7 forEach 和 for 的应用
时至今日，看到下面代码，模摸糊糊还是会有点头皮发麻的感觉。
咱们应该了解，forEach 并不会停止后续的循环。
所以当数据过多的时候，对性能来说是个高挑战。
当你有 1w 条数据，尽管我第 1 条就找到了，然而它依然会遍历 1w 遍。
所以这种状况下，应用 for 能够及时止损。
const data = _this.data;
for (let i = 0; i < data.length; i++) {const item = data[i];
if (item.id === pid) {
// ...
// 停止后续循环，因为我曾经找到了
break;
}
}尽管 ES6 新增了 forEach、map 等实用函数，然而编写代码的时候，能够略微留神下性能问题。
2.8 冗余代码问题
上面咱们看一份代码：
很显著，咱们通过 VS Code 区选代码的时候，间接在同一排发现有多个反复调用代码。
const children = _this._deepQuery(_this.data, id).children;
const isDefineChildren = _this.isDefine(children);
if ((!_this.isDefine(_this.layer) && isDefineChildren)
|| (_this.navCurrentIndex < (Number(_this.layer) - 1) && isDefineChildren)
) {children.forEach((item, index) => {const { id, name} = item;
_arr.push({id, name, pid: id});
});
}这样，咱们就让代码看起来更容易了解了。
2.9 \`\` 和 '' 以及 "" 的应用
很多时候，咱们会纠结这 3 种符号的应用，例如：
jsliang 为了让本人工作不再纠结，给本人定了小标准：
- 在 HTML 上，对立应用双引号，例如
class=""，又或者data-value="" - 在 JavaScript 上，定义变量等一律应用
''，例如const name ='jsliang' - 在拼接字符上，对立应用 \`\`，例如：
const name = 'jsliang';
const info = ` 你好 ${name}
欢送来到 2077 地球~
`;
const render = () => {
return (<div className="react-class"></div>);
};2.10 == 和 ===
这一点想必很多小伙伴也理解：
像下面这种判断的时候，很容易出篓子。
举个栗子：
const d = 1；const e = '1';
console.log(d == e);
console.log(d === e);像这里，1 等于 '1' 吗？
如果你是应用 ==，那么它只会判断值是否相等，才不论你类型长啥样。
而应用 ===，它还会判断类型是否一样。
三 参考文献
- Vue 数据更新了但页面没有更新的 7 种状况汇总及延长总结
- JSDoc
Vue 中 的 var that=this 语句是什么意思？
不折腾的前端，和咸鱼有什么区别！
感觉文章不错的小伙伴欢送点赞 / 点 Star。
如果小伙伴须要分割 jsliang：
- Github
- 掘金
集体联系方式寄存在 Github 首页，欢送一起折腾~
争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。
