今年真的好不容易啊

大家好，现在是2021年12月10日星期五

你好，我是一名前端，今年真的好不容易，但是我扛过来了。

今年经历的事情

今年年初我还是一名大二的学生，享受我们专科学校的生活。这段时间还是跟原来一样整天泡图书馆，搞我喜欢的前端。每天还是挺轻松的。

好景真的不长哦，到了今年的六月，没错身为一个专科生，到了大二下学期的六月就属于你已经没有校园生活了该出去自己找实习工作了，因为就算到现在这个阶段我也已经学前端两年了，我甚至当时还有自己的团队，我们在闲鱼上接了不少的单子整了一些外快，不过都是一些毕业设计，微信小程序啊这些东西没有什么技术水平。这样的经历让我觉得我真的还挺不错的。

开始找工作了打开boss直聘，好家伙这石家庄的前端工作还真不少啊还有好多主动联系我的，“您好，您公司现在还招聘实习生吗？您回复我一下，这样我给您发我的简历您可以看一下。”， “嗯，你什么时候有空啊，来公司面试一下吧”， “好今天下午好吗”， “嗯可以”。当我到达了我的面试场地，我去一个小屋子挤了好多人，这是在干嘛？？？算了没事先去面面看看什么情况。“你是大学生？还没毕业吗？”， “嗯对”， “不好意思我们不需要实习生”，卧槽？啊？这是在干嘛？算了我走！

就这样我当时真无语，但是没想到无语的还在后面，六月七月初期我碰到的都是这样的公司石家庄这是怎么了？没找到工作一直到了七月初，因为我自己在外面租房子每个月起码花销得要1000这1000都得找我爸去要，但是很不幸我爸的公司倒闭了他也没有钱了，啊啊啊啊啊我爸说我也没办法了你自己赶紧找工作养活你自己吧？？？？当时真的经历了一个月那样的公司折麽结果还来这个情况当时真的崩溃了，但是还没有完全崩溃，后面我面试了一个公司，那个时候就只想着啥公司都行赶紧让我赚点钱我得活着，抱着这样的心态很快就找到了一个公司，公司就三个人。。。干了不到一个星期我实在干不下去真不是人呆的地方，

我选择了走人，家里知道了给我打电话就说，是个工作你就先干着吧，哪有你这样的一点机会也把握。我们一点钱也不给你了。嗯

现在我是真的崩溃了，但是我还有我的光，我奶奶还有我对象，我奶奶年纪大了我也真舍不得找他要钱，我媳妇就说 “我学校发的贫困补助我现在手里有2000多块钱养你两个月肯定没问题！！你就去找工作吧，我等着你” 你们可能不知道我媳妇那个时候大一，大一了女孩子都开始臭美了，我平时都经常说你也赶紧买点化妆品打扮打扮自己你又有钱，她总是跟我说这些钱先攒着吧万一你有个啥事儿我能帮上你。没想到真的帮上了，我真的好感谢我媳妇。

从那一刻开始我觉得我不能堕落了赶紧再加把劲儿，面试面试面试终于8月9日我进入了一家起码我觉得挺可以的公司就是给我的工资还是有点低，没关系我先赚钱，稳住发育等着崛起。

不得不说呢这家公司真的很给力每天给我学习的时间非常充足几乎每天我的累都是学习学累的。

到现在生活过的还挺不错有滋有味的但是准备朝着更大的目标前进了！

我希望我的事情能给你们一些鼓励，挺一挺一定能过去！！！！！

故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。

今年学到的知识

虽然今年过的很艰难但是今年再前端领域我的进步是最大的，为此我整理了我今年已经掌握的技能以资鼓励！

Vue3.x

vue3的基本使用

setup语法糖

封装hooks

pug模板

vue中JSX的使用

义愤填膺后台管理系统

这个是我用 vue3.2.6 + vite + pug + tailwindcss + springboot 写的一个后台管理系统，在我写这个系统之前我在github上看了特别多的开源后台管理系统，及他所能超其发挥

我封装了非常多的hooks，表单表格我都做足了封装可以下看一下以下代码

giee： gitee.com/wu_hong_che…

const dataFormOptions: Array<FormItem> = [
  {
    label: '用户名称',
    key: 'userName',
    value: ref(''),
    render(formTtem) {
      return useCreateInput({
        inputPropsOptions: {
          size: 'small',
          placeholder: '请输入用户名称',
        },
        refState: formTtem.value,
      })
    },
  },
  {
    label: '用户账号',
    key: 'accountNumber',
    value: ref(''),
    render(formTtem) {
      return useCreateInput({
        inputPropsOptions: {
          size: 'small',
          placeholder: '请输入用户名称',
        },
        refState: formTtem.value,
      })
    },
  },
]


DataForm(ref="modalForm" :form-config="{}" :options="modalFormOptions" )



// 可以看一下formItem里面有什么
export interface FormItem {
  key: string | number
  label: string
  value: Ref
  required?: boolean //必须填写？
  validator?: (value: FormItem, message: MessageApi) => boolean // 自定义验证规则
  maxLength?: number
  disabled?: Ref<boolean> // 禁用？
  path?: string 
  optionList?: Ref
  reset?: (formItem: FormItem) => void // 自定义重置表单方法
  beforeRender?: (formItem: FormItem) => Promise<any> // 生命周期渲染前的函数
  render?: (formItem: FormItem) => VNode // 渲染组件
}
复制代码

这样一个表单就写完了我为此表单封装了内置方法

    /**
     * @description: 重置表单（清空表单）
     */
    function reset() {}

	   /**
     * @description: 更新表单
     */
    function update(it: any) {}

    /**
     * @description: 获取表单的值
     * @return {Object} 表单的值
     */
    function generatorParams() {}

    /**
     * @description: 开启表单验证
     * @return {boolean}
     */
    function validator() {}

		
复制代码

封装这个表单我是借鉴的一个一个开源项目的思路从而做了一些创新。

tailwindcss

说真的这个css写的太舒服了建议大家也赶紧用起来

vue2

手写了一遍模板编译原理（template > ast > vnode > render）

手写了一遍响应式原理

手写了组件化的原理

整体对vue2已经更加熟悉了，还没有手写完等写完了我可能会出一篇文章来给大家分享

haojiahuo脚手架

这个是我自己的脚手架，其中更能真的很杂乱，有自动化构建工程项目初始化文件，自动生成页面等等我就不说了。

其实重要的是我的思维，我的思维在今年转变了真的好多编程的思维哈哈哈哈，这个是我切切实实感受到的东西真的好神奇。

结束语

剩下的我也不知道要说什么了，就祝我自己越来越好，祝大家也越来越好，等我们一起手撕vue3的源码干就完了！！！！明年有了毕业证跳槽！！还有最感谢的还是我的媳妇！吾妻妙哉！！！