Vue3实用知识

1. 杂记

Vue 3 的设计目标

• 设计目标：更小、更快、TypeScript 支持、API 设计一致性、提高自身可维护性、开放更多底层功能。
• 优化方案：vue3 从很多层面都做了优化，源码、性能、语法 API。【1】源码管理：vue3 整个源码是通过 monorepo 的方式维护的，根据功能将不同的模块拆分到 packages 目录下面不同的子目录中；【2】TypeScript：Vue3 是基于 typeScript 编写的，提供了更好的类型检查，能支持复杂的类型推导；【3】性能：体积优化 -- Tree shanking，编译优化 -- diff 算法优化 / 静态提升 / 事件监听缓存 / SSR优化，响应式系统优化：Proxy；【4】语法 API：composition API，两大显著的优化 -- 优化逻辑组织 / 优化逻辑复用。
• 在 vue2 中，数据劫持是通过 Object.defineProperty，这个 API 有一些缺陷，并不能检测对象属性的添加和删除。Vue 为了解决这个问题提供了 set 和 delete 实例方法，但在面对嵌套层级比较深的情况下，就存在性能问题。数组 API 方法也无法监听到。

Vue 3 中 Tree-shaking 特性

• Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。
• Tree shaking 是基于 ES6 模板语法（import 与 export），主要是借助 ES6 模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。
• 带来的好处是：减少程序体积（更小）、减少程序执行时间（更快）、便于将来对程序架构进行优化（更友好）。

Proxy 与 Object.defineProperty 相比优劣如何

• Object.defineProperty 的作用是劫持一个对象的属性，劫持属性的 getter 和 setter 方法，在对象的属性发生变化时进行特定的操作。而 Proxy 劫持的是整个对象。
• Proxy 会返回一个代理对象，我们只需要操作新对象即可，而 Object.defineProperty 只能遍历对象属性直接修改。
• Object.defineProperty 不支持数组，更准确的说是不支持数组的各种 API，因为如果仅仅考虑 arry[i] = value 这种情况，是可以劫持的，但是这种劫持意义不大。而 Proxy 可以支持数组的各种 API。
• 尽管 Object.defineProperty 有诸多缺陷，但是其兼容性要好于 Proxy。

2. 安装

Vue 官网

npm init vue@latest

Vite

npm create vite@latest

Vue CLI

npm install -g @vue/cli
npm update -g @vue/cli
vue create vue-cli-demo

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save   
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No