前端高级工程师（大前端）

核心代码，注释必读

// download：3w ukoou com

大前端介绍 其实大前端的概念很好理解，就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。

为什么提出大前端的概念？

文章开始大概介绍了一下，下面我们详细了解。由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢？大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

慕课前端高级工程师（大前端）- vue组件优化

优化前的组件代码如下：

html
复制代码
<template>
  <div class="cell">
    <div v-if="value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

<script>
export default {
  props: ['value'],
}
</script>

优化后的组件代码如下：

html
复制代码
<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

然后我们在父组件各渲染优化前后的组件 800 个，并在每一帧内部通过修改数据来触发组件的更新，开启 Chrome 的 Performance 面板记录它们的性能，得到如下结果。

函数式组件和普通的对象类型的组件不同，它不会被看作成一个真正的组件，我们知道在 patch 过程中，如果遇到一个节点是组件 vnode，会递归执行子组件的初始化过程；而函数式组件的 render 生成的是普通的 vnode，不会有递归子组件的过程，因此渲染开销会低很多。

因此，函数式组件也不会有状态，不会有响应式数据，生命周期钩子函数这些东西。你可以把它当成把普通组件模板中的一部分 DOM 剥离出来，通过函数的方式渲染出来，是一种在 DOM 层面的复用。

慕课前端高级工程师（大前端）- CLI工具原理

vue create vue-test-app --force -r https://registry.npm.taobao.org

1、从命令行角度解释

• vue =>主命令（启动命令），执行操作系统客户端程序
• create =>command（辅助命令），告诉vue 指令做什么
• –force =>option（选项，可以理解为一种针对create命令的配置） --force true 也可以简写成-r true --force省略了true
• -r =>option（同上）是–registry缩写

2、命令执行流程

用户从终端中输入vue create vue-test-app，首先终端会从环境变量中查找vue，终端根据vue命令链接到实际文件vue.js，终端利用node执行vue.js，vue.js解析command/options，vue执行command，执行完毕退出程序