柯森（Cosen）

> Vue 官方团队于 2020 年 9 月 18 日晚 11 点半左右发布了`Vue3.0`版本 🎉。代号为`One Piece`。  其实`Vue3.0`版本发布的消息，我是昨天晚上刷朋友圈看到的（已经差不多凌晨 1 点了），然后我就立刻起来，打开电脑，看了一下`github`，把官方发布文档过了一遍。其实我感觉这次版本更新，最主要的还是`Composition API`以及对于`TypeScript`的支持，而且早在 4 月 21 日，尤大在 B 站关于`Vue.js 3.0 Beta`最新进展的分享上就已经提到了这些改动。 此次版本更新提供了改进的性能，更小的捆绑包大小，更好的`TypeScript`集成，以及用于处理大规模用例的新`API`，为框架的长期未来迭代奠定了坚实的基础。 这里我就参考官方`releases`给大家大概说一下主要更新（更详细的直接查看[releases docs](https://github.com/vuejs/vue-next/releases/tag/v3.0.0 "releases...

## 写在最前面（不看也不会少一个亿） ### 最开始的一个小需求 前两天项目中有个小需求：前端下载后台小哥返回的二进制流文件。 起初接到这个需求时，我感觉这很简单啊（虽然我不会，但可以百度啊，，，，）  然后就写出了如下的代码： ```js let blob = new Blob([res.data]); let fileName = `Cosen.csv`; if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName); } else { let link = document.createElement("a");...

## 引言 一些开源的生产力工具能极大的提升我们的开发效率（我一直是这么认为的 🤠）。 今天推荐一些我一直在用的、比较香的工具给大家。其中包括一些文档、可视化工具、分析工具、代码片段、调试工具等。 ## `Collect UI` 🦑 [`Collect UI`](http://collectui.com/designs)画廊是一个免费的在线资源，用于每日`UI`设计灵感。 目前，它有 6500 多个条目，并且持续保持更新最新内容。 在边栏中，有做分类。包括 404 页面、登陆/登出、购物车、日历、视频播放器等。如果你想在某方便需求灵感，然后用于你的公司项目或者个人项目，我想是会有很大的帮助的。 ## `Taskade` 📝 在平时生活中总会有很多的事要做，比如工作时有很多待办事项，但是很容易就会忘记一些事情，这时我们就需要一款具有带有待办事项的`chrome`插件--[`taskade`](https://www.taskade.com/)。  `Taskade`简单，整洁并且设计精美，有着令人放松的主题和背景。使用`Taskade`来整理您的思路，这样您可以集中精力做事情。  ## `Colordot` 🌈 有时候我们想寻求一个自己喜欢的颜色（有点像起一个自己满意的昵称），却没有灵感，这时候我们就可以来[这里](https://color.hailpixel.com)  网页区域内随意滑动鼠标，可以产生不同的色彩。确定一个色彩，再随意滑动产生下一个色彩，直到找到自己满意的配色。...

 ## 什么是 CRP？ `CRP`又称关键渲染路径，引用`MDN`对它的解释： > 关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。 优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。 ## 如何结合`CRP`进行性能优化？ 我想对于性能优化，大家都不陌生，无论是平时的工作还是面试，是一个老生常谈的话题。 如果单纯针对一些点去泛泛而谈，我想是不太严谨的。 今天我们结合一道非常经典的面试题：`从输入URL到页面展示，这中间发生了什么？`来从其中的某些环节，来深入谈谈`前端性能优化 CRP`。 ## 从输入 URL...

## 写在前面 本篇是`「源码级回答」大厂高频Vue面试题`系列的第二篇，本篇也是选择了面试中经常会问到的一些经典面试题，从源码角度去分析。 想从第一篇开始看的，地址[这里](https://github.com/Jack-cool/blog/issues/43) 话不多说，干就完了！ ## 简述 Vue 中 diff 算法原理 ### diff 简介 `diff` 算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，所以时间复杂度只有 `O(n)`。`diff` 算法的在很多场景下都有应用，例如在 `Vue` 虚拟 `dom` 渲染成真实 `dom` 的新旧 `VNode` 节点比较更新时，就用到了该算法。`diff` 算法有两个比较显著的特点： - 比较只会在同层级进行, 不会跨层级比较。...

​最近一直在读`Vue`源码，也写了一系列的`源码探秘`文章。 但，收到很多朋友的反馈都是：源码晦涩难懂，时常看着看着就不知道我在看什么了，感觉缺乏一点动力，如果你可以出点面试中会问到的`源码`相关的面试题，通过面试题去看源码，那就很棒棒。 看到大家的反馈，我丝毫没有犹豫：安排！！ 我通过三篇文章整理了大厂面试中会经常问到的一些`Vue`面试题，通过源码角度去回答，抛弃纯概念型回答，相信一定会让面试官对你刮目相看。 ## 请说一下响应式数据的原理？ `Vue`实现响应式数据的核心`API`是`Object.defineProperty`。 其实默认`Vue`在初始化数据时，会给`data`中的属性使用`Object.defineProperty`重新定义所有属性,当页面取到对应属性时。会进行依赖收集（收集当前组件的`watcher`） 如果属性发生变化会通知相关依赖进行更新操作。 这里，我用一张图来说明`Vue`实现响应式数据的流程： - 首先，第一步是初始化用户传入的`data`数据。这一步对应源码`src/core/instance/state.js`的 112 行 ```javascript function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data...

## 引言 由于业务需要，近期团队要搞一套自己的`UI`组件库，框架方面还是`Vue`。而业界已经有比较成熟的一些`UI`库了，比如`ElementUI`、`AntDesign`、`Vant`等。 结合框架`Vue`，我们选择在`ElementUI`基础上进行改造。但`造轮子`绝非易事，首先需要先去了解它整个但构建流程、目录设计等。 本文通过分析`ElementUI`完整的构建流程，最后给出搭建一个完备的组件库需要做的一些工作，希望对于想了解`ElementUI`源码或者也有搭建`UI`组件库需求的你，可以提供一些帮助！ 我们先来看下`ElementUI`的源码的目录结构。 ## 目录结构解析 - github：存放了`Element UI`贡献指南、`issue`和`PR`模板 - build：存放了打包相关的配置文件 * examples：组件相关示例 demo - packages：组件源码 * src：存放入口文件和一些工具辅助函数 - test：单元测试相关文件，这也是一个优秀的开源项目必备的 * types：类型声明文件 说完文件目录，剩下还有几个文件（常见的`.babelrc`、`.eslintc`这里就不展开说明了），在业务代码中是不常见的：  - .travis.yml：持续集成(CI)的配置文件 - CHANGELOG：更新日志，这里`Element...

## 引言 🏂 写这篇文章的缘由是上周在公司前端团队的`code review`时，看了一个实习小哥哥的代码后，感觉一些刚入行不久的同学，对于真实项目中的一些`js`处理不是很熟练，缺乏一些技巧。 因此整理了自己开发中常用的一些`js`技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的改观。 ## 数组去重 🐻 正常我们实现数组去重大多都是通过双层遍历或者`indexOf`的方式。 ### 双层`for`循环去重 ```js function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j =...

## 引言 上一节我们分析了计算属性`computed`，这一节我们一起来看下侦听器`watch`。 大家平时在项目开发中，有时会对这两种特性感到模棱两可，不知道该选择那个。相信看完本篇文章，结合上一篇，你会有一个答案的。 让我们开始吧！ ## watch 首先组件实例化过程中，会调用`initState`函数： ```js // src/core/instance/state.js export function initState(vm: Component) { // ... if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch); } } ```...

## 引言 计算属性(`computed`)是 `Vue`中比较强大又十分重要的功能 ，它具有 `分离逻辑`、`缓存值`、`双向绑定` 等作用或功能。 本节我就带大家一起来看下计算属性 `computed`部分的源码。 ## computed 官方文档对于计算属性的使用时机有一个很清晰的说明：如果模板内的逻辑过于复杂，那就应该考虑使用计算属性来代替。 这里引用官方的示例来说明计算属性的用法： ```js // App.vue {{ reverseName }} export default { data() { return { name: 'forest' } },...