前言
上一篇文章 一份超详细VuePress + Github Pages教程 中详细介绍了 VuePress 的搭建和部署到 GitHub Pages 上，其中部署 GitHub Pages 采用的是手动部署。这篇文章教大家另一种部署方法 Github Actions，文章还是以部署 VuePress 静态网站为例：
准备工作
-
准备一个 VuePress 网站
-
完成 ssh的配置
-
创建 GitHub个人令牌
...大约 6 分钟
前言
个人认为，有自己的个人博客是一种很酷的象征，同时在求职的时候，也会给人留下一个良好的印象。所以我一直想搞一个自己的博客网站，但是想到搞网站还要学习 后端知识+服务器知识 ，我就失去动力了...
最近发现了一个神奇的工具 VuePress ，它满足了我所有的需求
- 静态网站生成器（不用另外学后端知识啦）
- 路由会根据 Markdown 文件的相对路径来自动生成（约定式路由）
- 可以部署到 GitHub 上（没有自己的服务器也可以部署哇）
- V2.0版本支持
Vue3 + TypeScript + Vite（就是你了）
...大约 8 分钟
ref、reactive、toRef 和 toRefs
- ref
- ref是一个函数，用于创建一个包含响应式数据的引用对象。
- ref函数可以接收原始数据类型与引用数据类型。
- ref 函数创建的响应式数据，在模板中可以直接被使用，在JS 中需要通过.value 的形式才能使用。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出: 0
count.value++;
console.log(count.value); // 输出: 1
...大约 2 分钟
vue2与vue3的区别
生命周期
- 钩子函数加
on beforeCreate和created包含在setup函数中beforeDestroy改为onBeforeUnmount，destroyed改为onUnmounted
...大约 3 分钟
对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 分钟
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 分钟