对Promise的理解

概念

Promise 对象是异步编程的一种解决方案。Promise 是一个构造函数，接收一个函数（executor）作为参数，返回一个 Promise 实例。 一个 Promise 实例有三种状态，分别是pending、fulfilled和rejected，分别代表了进行中、已成功和已失败， 实例的状态只能由 pending 转变 fulfilled 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变。 状态改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态， 它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。
注意：在构造 Promise 的时候，构造函数内部的代码是立即执行的。

前言

传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。

前端路由

vue上

vue下

MVVM

• 概念

  • Model(数据)
  • View(视图)
  • ViewModel(负责两者之间的数据处理操作)

• 特点

  • 低耦合: 视图view可独立于model的变化和修改
  • 可复用性: 视图逻辑viewModel可用于不同的view
  • 独立开发
  • 可测试性

• 总结

vue2与vue3的区别

生命周期

• 钩子函数加 on
• beforeCreate 和 created 包含在 setup 函数中
• beforeDestroy 改为 onBeforeUnmount，destroyed 改为 onUnmounted

word-break

• word-break: normal

• word-break: break-all

记忆: 当一个单词到达边界时，下个字母会自动到下一行。

深度选择器的使用场景一般是 修改第三方UI组件库，如vant，elementUI，antd，同时页面中又使用了 scoped

>>>

原生css式样使用 >>>

<style scoped>

.myclass >>> .el-tag {
  // 样式
}
</style>

小程序

编译到微信小程序u-icon上的class无效

• 问题：编译到微信小程序上后，组件如<u-icon />上的class、style无效

与vue相比

• 相同点

  1. 都使用虚拟DOM提高性能
  2. 专注自身核心库，将其他功能如路由和全局状态管理交给其他库
  3. 都提倡组件化，提高复用性
  4. 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板
  5. 都有props的概念，允许组件间的数据传递

• 不同的

  1. 语法 vue-SFC模板系统，接近html写法、react-JSX语法
  2. 数据绑定 vue-v-model双向绑定、react-setState单向流动
  3. 监听数据变化的原理
  • vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化
  • vue 计算 Virtual DOM 的差异是以组件为颗粒度的，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
  • react 默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的 VDOM 的重新渲染。 可以用 shouldComponentUpdate/PureComponent/React.memo() 进行优化
  4. 条件渲染 vue-v-if、react-借助三元运算符，逻辑性更强
  5. 组件通信
  • vue 子组件向父组件发送消息有两种方式：事件(emit)和回调函数(定义在props)
  • vue 通过 provide/inject 来实现跨层级的通信
  • react 子组件向父组件发送消息，都是使用回调函数的
  • react 可以通过 context 进行跨层级的通信
  6. css模块作用域 vue-scoped、react-module(xxx.module.css)

变量声明 let、const

箭头函数 =>

• 自身不绑定this，this指向当前上下文
• 不能作为构造函数
• 没有arguments，用rest

模板字符串 ${}

扩展运算符 ...

可选链操作符 ?.

• 概念

  MDN: 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 ?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

• 用法

  if (res && res.data && res.data.success) ​等同于 if (res?.data?.success)

开发的时候我们会用框架如Vue、React，ES6模块语法、Promise，开发样式使用LESS、SASS预处理器，这些代码是不能被浏览器识别的，如果要运行，就必须经过编译。

前言

1. webpack会以一个或者多个文件作为打包入口，将项目所有文件编译组合成一个或者多个文件输出，称为bundle，输出的文件可以在浏览器运行。
2. webpack本身功能有限：
   开发环境：仅能编译JS中的ES module语法
   生产环境：能编译JS中的ES module语法，还能压缩JS代码

entry