前言
上一篇文章 一份超详细VuePress + Github Pages教程 中详细介绍了 VuePress 的搭建和部署到 GitHub Pages 上，其中部署 GitHub Pages 采用的是手动部署。这篇文章教大家另一种部署方法 Github Actions，文章还是以部署 VuePress 静态网站为例：
准备工作
-
准备一个 VuePress 网站
-
完成 ssh的配置
-
创建 GitHub个人令牌
...大约 6 分钟
前言
个人认为，有自己的个人博客是一种很酷的象征，同时在求职的时候，也会给人留下一个良好的印象。所以我一直想搞一个自己的博客网站，但是想到搞网站还要学习 后端知识+服务器知识 ，我就失去动力了...
最近发现了一个神奇的工具 VuePress ，它满足了我所有的需求
- 静态网站生成器（不用另外学后端知识啦）
- 路由会根据 Markdown 文件的相对路径来自动生成（约定式路由）
- 可以部署到 GitHub 上（没有自己的服务器也可以部署哇）
- V2.0版本支持
Vue3 + TypeScript + Vite（就是你了）
...大约 8 分钟
对Promise的理解
概念
Promise 对象是异步编程的一种解决方案。Promise 是一个构造函数，接收一个函数（executor）作为参数，返回一个 Promise 实例。
一个 Promise 实例有三种状态，分别是pending、fulfilled和rejected，分别代表了进行中、已成功和已失败，
实例的状态只能由 pending 转变 fulfilled 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变。
状态改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，
它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。
注意：在构造 Promise 的时候，构造函数内部的代码是立即执行的。
...大约 2 分钟
前言
传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。
前端路由
你对前端路由/vue-router的理解？ 前端路由/vue-router的实现原理？
前端路由是基于hash模式和history模式实现的。
hash模式是通过监听浏览器的hashchange事件，当浏览器hash值（锚点#）部分发生变化，做出相应渲染。
优点：1.兼容性好，大部分浏览器都支持；2.不需要后端配合
缺点：1.外观上带#号；2.影响seo搜索
history模式是使用html5推出的historyAPI，使用popstate来监听变化，pushState和replaceState来实现渲染。
优点：1.有更符合浏览器链接的外观；2.利于seo搜索
缺点：1.兼容性较差；2.需要后端配合，非则可能出现404错误
...大约 5 分钟
MVVM
-
概念
- Model(数据)
- View(视图)
- ViewModel(负责两者之间的数据处理操作)
-
特点
- 低耦合: 视图view可独立于model的变化和修改
- 可复用性: 视图逻辑viewModel可用于不同的view
- 独立开发
- 可测试性
-
总结
...大约 20 分钟
vue2与vue3的区别
生命周期
- 钩子函数加
on beforeCreate和created包含在setup函数中beforeDestroy改为onBeforeUnmount，destroyed改为onUnmounted
...大约 4 分钟
word-break
- word-break: normal
word-break: break-all
记忆: 当一个单词到达边界时，下个字母会自动到下一行。
...小于 1 分钟
深度选择器的使用场景一般是 修改第三方UI组件库，如vant，elementUI，antd，同时页面中又使用了 scoped
>>>
原生css式样使用 >>>
<style scoped>
.myclass >>> .el-tag {
// 样式
}
</style>
...小于 1 分钟
小程序
编译到微信小程序u-icon上的class无效
- 问题：编译到微信小程序上后，组件如
<u-icon />上的class、style无效
...小于 1 分钟
与vue相比
-
相同点
- 都使用虚拟DOM提高性能
- 专注自身核心库，将其他功能如路由和全局状态管理交给其他库
- 都提倡组件化，提高复用性
- 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板
- 都有props的概念，允许组件间的数据传递
-
不同的
语法vue-SFC模板系统，接近html写法、react-JSX语法数据绑定vue-v-model双向绑定、react-setState单向流动监听数据变化的原理
- vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化
- vue 计算 Virtual DOM 的差异是以组件为颗粒度的，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
- react 默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的 VDOM 的重新渲染。
可以用
shouldComponentUpdate/PureComponent/React.memo()进行优化
条件渲染vue-v-if、react-借助三元运算符，逻辑性更强组件通信
- vue 子组件向父组件发送消息有两种方式：事件(emit)和回调函数(定义在props)
- vue 通过 provide/inject 来实现跨层级的通信
- react 子组件向父组件发送消息，都是使用回调函数的
- react 可以通过 context 进行跨层级的通信
css模块作用域vue-scoped、react-module(xxx.module.css)
...大约 3 分钟