失败总是贯穿人生的始终，这就是人生

开发日常

element组件库

使用form表单时，validate方法内的回调不执行。

请检查在自定义校验规则中是否所有的判断都执行到了callback，否则不会执行validate回调

`npm`

`—ignore-script`

有些依赖在安装的时候会执行一些定义在package.json中的preinstall、postinstall、prepublish 或 prepare 脚本，安装过程中可能会由于网络原因出现阻塞。

使用npm install —ignore-script可忽略这些脚本，只安装依赖，但要注意–-ignore-script可能导致的副作用：

可能会错过一些重要的安装后操作。例如，某些包可能需要在安装后运行自定义脚本来配置环境或生成文件。如果使用 --ignore-scripts 命令，这些操作将不会被执行。
可能会导致依赖项未正确安装。某些包可能需要在安装过程中执行特定的脚本来安装其依赖项。如果使用 --ignore-scripts 命令，这些依赖项可能无法正确安装。
可能会导致安装过程出现问题。某些包需要在安装过程中执行特定的脚本来处理兼容性问题或其他错误情况。如果使用 --ignore-scripts 命令，这些问题可能无法得到解决。

在HTML标记中正确使用块级元素和内联元素

一些常见的错误要避免：

避免在<p>标签内容嵌套块级元素，<p>标签应该只用于段落，内部应该只包含文本内容，不应有<div>, <h1>等块级元素，这样的嵌套会导致 html 结构不正确，可能会引起虚拟 dom 的不匹配问题
避免在内联元素嵌套块级元素，内联元素是用于包裹文本的，内部不应该包含块级元素，在<span>内包含<div>是不正确的
避免闭合标签丢失，每个 html 标签应该被正确闭合

阻止form表单的默认提交刷新行为

使用button提交时，将type设置为button。button的默认类型是submit
event.preventDefault()
在click事件方法添加return false
form的submit事件 ·return false

1
2
3

<form @submit="return false">
	<button type="button"></button>
</form>

那些会改变上下文this的场景

箭头函数

箭头函数没有自己的this，在它内部的this指向箭头函数被定义时this指向的值

setTimeout

在vue中使用setTimeout，传参回调函数时，推荐用箭头函数，这样箭头函数里面的this指向VueComponent

递归函数

addEventListener

在class中方法返回一个promise，传入的回调函数中的this

JavaScript中的精度丢失问题

这是一个在处理浮点数运算时常见的问题。精度丢失的问题原因是：在计算机内部是用二进制存储的，某些十进制小数转换为二进制时是无限循环小数，因此无法精确表示，从而导致精度丢失问题。
比如，在浮点数计算中

console.log(0.1 + 0.2)
// 0.30000000000000004
console.log(0.28*100)
// 28.00000000000000004

解决的方法有：

将浮点数转换为整数计算，再换回浮点数
使用第三方库

在js中，==所有的数字==都是以==64位浮点数==保存的（IEEE754标准），即使是整数也是这样保存的，根据这个标准，js中的数字类型能够安全表示和操作的整数范围是$-2^{53}+1$ ~ $2^{53}-1$

1 2	Number.MAX_SAFE_INTEGER // 9007199254740991 Number.MIN_SAFE_INTEGER // -9007199254740991

当超出这个安全范围，就可能会出现精度丢失问题，例如

1 2	JSON.parse('89820364123042234234') // 89820364123042230000

这种情况下，js不会精确地存储原始的值，可考虑使用 BigInt 类型来处理

vue响应式变量无效

如果碰到传给style的变量发送变化但是页面dom没有变化，注意看一下传给style的变量是否是有效的，比如是不是带了单位px

错题本

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

console.log(member.getFullName());

上述代码执行，将报TypeError错误，当使用new Person创建一个member对象时，member会继承Person.prototype的属性和方法，但不会继承Person的属性和方法，因此member只能访问Person.prototype的属性和方法，而不能访问Person的属性和方法。
【注】：任何函数只要使用new操作符来调用，那么它就可以作为构造函数

业务开发注意事项

开发新分支一定要先将本地分支和远程分支同步最新
提merge request时一定要看看本地提交是否已全部提交，格外注意本地reset之后的commit有没有同步至远程
需求提测前必须自己过一遍

搞不定的兼容问题

webpack

以vue-hackernews-2.0为基础，写vue-ssr 服务端渲染的模板项目，如果使用webpack5版本，因为用到了vue-ssr-webpack-plugin插件，内部使用了compiler.plugin(xxxx)的写法，但在webpack5中已经废弃了这种写法，需要换成compiler.hooks.[hookName].tap('MyPlugin', () => {// callback}

node node-sass sass-loader 之间的版本兼容问题

node-sass scripts.postinstall run “node scripts/build.js”
安装node-sass依赖时可能会遇到下面这个问题
node-sass_build_error
较低版本的node-sass要注意其对应的python版本是2还是3，如下图就是一个python的报错：

如果遇到找不到memory之类的环境问题，mac建议重装xcode command line

1 2	sudo rm -rf /Library/Developer/CommandLineTools xcode-select --install

根据报错日志的，我们去node-sass源码里面去找，Build failed with error code:，搜索这条log，定位到node_modules/node-sass/scripts/build.js:line79，
node-sass_build_js
定位到第一行，执行了node-gyp/bin/node-gyp.js这个文件，进到这个文件，在这里能看到error log里的另几条：
Pasted image 20240731143850

10.25补充
node-sass仓库已经被弃用，建议使用sass或sass-embed
npm-gyp依赖python2 or python3、c++、make
11.25再补充

在本地安装node-sass依赖，要按照文档写的，首先准备好node-gyp依赖的对应当前操作系统的python2(or python3),c++,make环境，先排除环境问题，再处理版本对应关系
对一些比较旧的项目，无法避免node-sass的依赖，例如在项目创立初期用的node12版本，这时可能对应的node-sass版本是4.9.2，sass-loader版本是7.0.3，后来node升级到node14，并且项目中用到了一些新的语法，比如可选链 ?.（项目中用了babel则另外考虑插件问题），这种情况下就出现矛盾，如果用node12，则新的语法不支持，如果用node14，低版本的node-sass又不兼容。
解决办法：基于新的node14，参照版本对照表，升级node-sass和sass-loader版本。例如：在node14环境下，升级node-sass: 4.14.1，sass-loader: 10.0.1，

11.26含泪补充
如果出现哈希完整性校验不匹配的问题，考虑是不是淘宝更换源的问题，尝试修改已过期的淘宝源

onMounted is called when there is no active component instance to be associated with
检查onMounted之前是否有异步操作

Throw new Error

Noplace