chengnan114 / blog Goto Github PK

1、库阶段(pre1.0)(2013-2015)，嵌入已有体系里去，只是很简单的用。框架是定义一套广泛的工程实践，希望你去遵循一定的最佳实践，使用配套的工具，遵循一套完整的规范。
库的设计重点：
基于ES5 getter/setters和原生JS对象的的响应式系统
MVVM模板数据绑定
像jQuery一样可以直接通过<script>引用的简单库
库阶段的特征：
还不算是个框架
受backbone/Ractive影响的API:
响应式系统和组件实例有很强的耦合，所有的响应式都是在this上做操作来实现的，影响逻辑复用
直到0.11才引入Mixins(混入)，用于逻辑复用
还在摸索完善模板语法和作用域规则
基于DOM的渲染机制：
没有编译的过程
模板直接实例化为DOM树
通过遍历DOM树实现数据绑定
类似现在petite-vue的实现
2015.12 vue-cli发布
2016.3 vuex发布
2、框架阶段的设计重点 1.0
稳定模板语法和作用域设计
确定了v-bind，v-on和对于简写的语法
第一次引入v-for（取代了v-repeat）
将项目的涵盖范畴扩大到SPA框架
SPA路由
状态管理
工具链
热更新
Scoped CSS
3、通用框架阶段 2.0 2016-2019
2016.3 第一次明确提出”渐进式框架“的概念
2016.4 开始开发2.0
2.0阶段的设计重点：
第二次彻底重写，代码架构改进(后来又ts重写)
引入了将模版编译为Virtual DOM渲染函数的编译流程（2.0才有编译）
基于Virtual DOM的服务端渲染（SSR）
基于Virtual DOM的跨端渲染（Weex,NativeScript）
和类型系统的结合
源码中使用flow（后来看，选错了）
手动TypeScript类型定义
Vue-hackernews-2.0
Webpack + SFC + Vue Router + Vuex + SSR
第一个完整展示Vue2 SSR架构的demo
Vue2SSR相关功能的测试平台
启发了上层SSR框架如Nuxt
4、Vue Cli3.0 2018
针对SPA的高度集成工具链
5、编译和运行时混合阶段 3.0
6、3.0重构初期的重心
提高浏览器最低支持要求，使用现代ES语法和功能
全面提升性能
改善类型系统整合
改善在大型应用中的可扩展性
7、composition Api的意义
options API在扩展性方面有明显上限
对类型系统更友好
提供灵活且可维护的逻辑组合/复用
8、2020.4 3.0beta 完全优化的SSR编译输出（不存在virtual Dom的开销了，完全是做成字符串拼接）
9、2020.4-2021.2 开发vite
10、vite的意义
大幅优化开发体验
跨框架的工具
11、2020.9 3.0稳定版发布
2021.8 <script setup>，对composition Api体验的改进，开发体验比较舒服
2022.1 vue3切换为默认版本
12、Vue3目前所定义的框架范畴
核心（运行时+编译器）
文档
工具链（create-vue）
SPA路由（Vue Router）
状态管理（Pinia）
浏览器开发工具（vue-devtools）
IDE支持（Volar）
TypeScript支持（vue-tsc）
静态分析（eslint-plugin-vue）
单元测试（@vue/test-utils）
13、向编译/运行时混合模式进化
同一份模板，不同的编译输出
浏览器：高度优化的Virtual DOM渲染函数
SSR: buffer+字符串拼接
单文件组件语法糖
<script setup>
CSS v-bind()
14、展望
Reactivity Transform / Suspense 稳定化
Vapor Mode

vuex的数据是响应式的，而本地存储的数据不是响应式的。

Vue有一组默认指令，比如v-model或v-for。
我在项目中常用到一些自定义指令，例如：
复制粘贴 v-copy
长按 v-longpress
防抖 v-debounce
图片懒加载 v-lazy
按钮权限 v-premission
页面水印 v-waterMarker
拖拽指令 v-draggable

Prettier和ESLint一起使用，办法就是停用可能与 Prettier 冲突的所有 ESLint 规则。使用eslint-config-prettier 。
必须运行两个命令的来检测与格式化文件非常的不便。eslint-plugin-prettier 包让 ESLint 集成 Prettier。
.eslintrc.js 的 extends 数组的顺序，每次一个新配置添加到这个数组中，它都会覆盖前面的配置。prettier 要放到数组尾部。

通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。
真实DOM∶ 生成HTML字符串＋重建所有的DOM元素
虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新

vue-loader是用于处理单文件组件（SFC，Single-File Component）的webpack loader。
因为有了vue-loader，可以把代码分割为、<script>和<style>，代码会异常清晰。

可以采取分页的方式获取，避免渲染大量数据
vue-virtual-scroller等虚拟滚动方案，只渲染视口范围内的数据
如果不需要更新，可以使用v-once方式只渲染一次
通过v-memo可以缓存结果，结合v-for使用，避免数据变化时不必要的VNode创建
可以采用懒加载方式，在用户需要的时候再加载数据，比如tree组件子树的懒加载

SPA即单页面应用。一般也称为客户端渲染， 简称 CSR。SSR即服务端渲染（以前的jsp）。一般也称为多页面应用。
SPA应用只会首次请求html文件，后续只需要请求JSON数据即可，因此用户体验更好，节约流量，服务端压力也较小。但是首屏加载的时间会变长，而且SEO不友好。
SSR，由于HTML内容在服务器一次性生成出来，首屏加载快，搜索引擎也可以很方便的抓取页面信息。
另外nuxt.js/next.js中给我们提供了SSG（Static Site Generate）静态网站生成方案也是很好的静态站点解决方案，结合一些CI手段，可以起到很好的优化效果，且能节约服务器资源。
部署上SSR多一层node服务器。

Webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而 Vite 是直接启动开发服务器，不需要打包，请求哪个模块再对该模块进行实时编译。
在 HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
rollup使用新的ESM，而Webpack用的是旧的CommonJS。
rollup支持相对路径，webpack需要使用path模块。
rollup使用起来更简洁，并且rollup打出更小体积的文件，所以rollup更适合vite。
vite生产环境的构建，目前用的 Rollup：原因在于 ESBuild 对于代码分割和 CSS 处理方面不是很友好。
Rollup使用起来更简洁，并且Rollup打出更小体积的文件。
vite 内置支持 postcss , 不需要我们在项目根目录创建一个 postcss.config.js 配置文件，来定义样式的兼容性改动，如果要改通过改动 vite.config.js 中的 css 配置项来实现。
在 webpack 中我们可以借助 webpack.DefinePlugin 来向项目中注入一些环境变量（如项目版本），在 vite 中defineConfig.define里。
大型项目的目录结构复杂，为了方便文件调用，一般会通过 “别名” 的方式，与 webpack 一样， vite 中通过 vite.config.js 中设置 resolve.alias 来实现。
webpack中html-webpack-plugin 插件生成html文件，vite中vite-plugin-html 插件来实现同样的功能。
webpack和vite入口打包配置也不一样了。

函数嵌套函数，内层函数引用了外层函数作用域下的变量，并且内层函数在全局环境下可访问，进而形成闭包。
IIFE（自执行函数），上传多张图片的预览。i作为实参传入。
防抖：
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}

computed：具有响应式的返回值。具有缓存性，依赖性不变，不会重新计算。
watch：侦测变化，执行回调。无缓存性，页面重新渲染时值不变化也会执行。
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

每一个函数都会有一个原型属性（.prototype），本质上是一个对象。该原型属性指向该函数构造的对象的原型对象（.proto）。
prototype是函数里面的一个属性，本质上是一个对象。
使用原型的好处是 可以让所有对象实例共享它包含的方法和属性。
实例对象通过__proto__查找构造函数的prototype，如果构造函数不存在，则向上继续查找，查object.proptype。 最后Object.prototype的__proto__属性指向null。

parent created
child created
child mounted
parent mounted
Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列。

watchEffect 将在方法的任何依赖项发生更改时运行，watch 跟踪一个或多个特定的响应性属性，并且仅在该属性发生更改时运行。
watchEffect在使用时，传入的函数会立刻执行一次。watch默认情况下并不会执行回调函数，除非我们手动设置immediate选项。
从实现上来说，watchEffect(fn)相当于watch(fn,fn,{immediate:true})，watchEffect就是一种特殊的watch实现。