文章来源于@Elab团队，https://mp.weixin.qq.com/s/2JyaG705tnhpKvVFQTvhlQ

一、Vue3

Vue3中文文档[1]

• Vue3是什么，与Vue2区别（What）

1. Performance：性能更强。
2. Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
3. Composition API：组合式API
4. Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
5. Better TypeScript support：更优秀的Ts支持
6. Custom Renderer API：暴露了自定义渲染API

• 为什么要大版本迭代 （Why）

1. 主流浏览器对新的JavaScript语言特性的普遍支持。
2. 当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题。

• 他是如何提升的（How）

1. 响应式系统提升： 使用Proxy提升了响应式的性能和功能
2. 编译优化： 标记和提升所有的静态节点，diff时只需要对比动态节点内容
3. 事件缓存： 提供了事件缓存对象cacheHandlers，无需重新创建函数直接调用缓存的事件回调
4. 打包和体积优化： 按需引入，Tree shaking支持（ES Module）

二、编码

全局API

1. 【新增】createApp： 入口文件（main.ts）挂载方式

import { createApp } from "vue";import App from "./App.vue";// Vue2new Vue({   render: (h) => h(App)}).$mount("#app");// Vue3createApp(App)  .use(**)  .mount("#app");

1. 【修改】

2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionTip无Vue.config.ignoredElementsapp.config.isCustomElementVue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties

config.ignoredElements替换为config.isCustomElement

引入此配置选项的目的是支持原生自定义元素，因此重命名可以更好地传达它的功能，新选项还需要一个比旧的 string/RegExp 方法提供更多灵活性的函数：

// Vue2Vue.config.ignoredElements = [  // 用一个 `RegExp` 忽略所有“ion-”开头的元素  // 仅在 2.5+ 支持  /^ion-/]// Vue3const app = Vue.createApp({})app.config.isCustomElement = tag => tag.startsWith('ion-')

Vue.prototype替换为config.globalProperties

在Vue 2中，Vue.prototype通常用于添加可在所有组件中访问的属性。

Vue 3中的等效项是config.globalProperties。在实例化应用程序内的组件时，将复制这些属性

// Vue2Vue.prototype.$http = () => {}// Vue3const app = Vue.createApp({})app.config.globalProperties.$http = () => {}

生命周期

2.0生命周期3.0生命周期beforeCreate(组件创建之前)setup()created(组件创建完成)setup()beforeMount(组件挂载之前)onBeforeMount(组件挂载之前)mounted(组件挂载完成)onMounted(组件挂载完成)beforeUpdate(数据更新，虚拟DOM打补丁之前)onBeforeUpdate(数据更新，虚拟DOM打补丁之前)updated(数据更新，虚拟DOM渲染完成)onUpdated(数据更新，虚拟DOM渲染完成)beforeDestroy(组件销毁之前)onBeforeUnmount(组件销毁之前)destroyed(组件销毁之后)onUnmounted(组件销毁之后)activated(被 keep-alive 缓存的组件激活时调用)onActivated(被激活时执行)deactivated(被 keep-alive 缓存的组件停用时调用)onDeactivated(比如从 A 组件，切换到 B 组件，A 组件消失时执行)errorCaptured(当捕获一个来自子孙组件的错误时被调用)onErrorCaptured(当捕获一个来自子孙组件的异常时激活钩子函数)

新特性

1. Options API => Composition API

1. setup()

import {toRefs} from 'vue'export default {    name: 'demo',    props:{      name: String,    },    // setup()作为在组件内使用Composition API的入口点。    // 执行时机是在beforeCreate和created之间,不能使用this获取组件的其他变量，    // 而且不能是异步。setup返回的对象和方法，都可以在模版中使用。    setup(props, context){      // 这里需要使用toRefs来进行解构      // 这里的props与vue2基本一致,当然这里的name也可以直接在template中使用      const { name }=toRefs(props);      console.log(name.value);            // context是一个上下文对象      //【从原来 2.x 中 this 选择性地暴露了一些 property（attrs/emit/slots）】      // 属性，同vue2的 $attrs      console.log(context.attrs);      // 插槽      console.log(context.slots);      // 事件，同vue2的 $emit      console.log(context.emit);      // 生命周期钩子      onMounted(() => {})  }}

注意点：

• 注意 props 对象是响应式的，watchEffect 或 watch 会观察和响应 props 的更新，不要解构 props 对象，那样会使其失去响应性
• attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值。所以可以解构，无需担心后面访问到过期的值
• this在 setup()中不可用。由于 setup() 在解析 2.x 选项前被调用，setup() 中的 this 将与 2.x 选项中的 this 完全不同。同时在 setup() 和 2.x 选项中使用 this 时将造成混乱

1. 响应式reactive，ref

import { ref, reactive, toRefs } from 'vue';setup() {    // ref    // ref 对我们的值创建了一个响应式引用    const counter = ref(0);         // reactive    // 接收一个普通对象然后返回该普通对象的响应式代理    const obj = {a:1};    const objReactive = reactive(obj);    const add = () => {      counter.value++;      objReactive.a++;    }        return {      counter,  // return返回会自动解套【在模板中不需要.value】      objReactive,      add,    }; // 这里返回的任何内容都可以用于组件的其余部分}

refreactive入参基本类型引用类型返回值响应式且可变的 ref 对象响应式代理（Proxy）访问方式1.ref 对象拥有一个指向内部值的单一属性 .value
2.在dom和setup()的return中会自动解套
3.ref 作为 reactive 对象的 property 被访问或修改时，也将自动解套直接.访问即可

问题 & 注意点： 因为reactive是组合函数【对象】，所以必须始终保持对这个所返回对象的引用以保持响应性，不能解构该对象或者展开

例如：

const { a } = objReactive或者return { ...objReactive }

解决方法：

toRefs API

用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref【把对象转成了ref】。

import { reactive, toRefs } from 'vue';setup() {    // reactive    // 接收一个普通对象然后返回该普通对象的响应式代理    const obj = {a:1};    const objReactive = reactive(obj);        // toRefs    // 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref    const objRef = toRefs(objReactive);        const { a } = objRef;    const addObj = () => {      a.value++;      console.log(a.value, objRef, objReactive, obj);    }    return {      ...objRef,      addObj    }; }

• Hooks方式

1. counter.js

import { ref } from 'vue';export function useCounter() {    const count = ref(0);    const decrement = () => {        count.value--;    }    const increment = () => {        count.value++;    }    return {        count,        decrement,        increment    }}

1. 父组件

<template>    <h2>{{ count }}</h2>    <button @click="increment">increment</button>    <button @click="decrement">decrement</button></template><script>import { useCounter } from './counter.js';export default {    setup() {        return {          ...useCounter(),        };    }}</script>

响应式计算和侦听

1. computed

const count = ref(1)/*不支持修改【只读的】 */const plusOne = computed(() => count.value + 1)plusOne.value++ // 错误！/*【可更改的】 */const plusOne = computed({  get: () => count.value + 1,  set: (val) => {    count.value = val - 1  },})

1. watch

 // 直接侦听一个 refconst count = ref(0)watch(count, (count, prevCount) => {  /* ... */})// 也可以使用数组来同时侦听多个源watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {  /* ... */})

1. watchEffect

• 定义：在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它
• 第一个参数：effect，顾名思义，就是包含副作用的函数。如下代码中，副作用函数的作用是：当 count 被访问时，旋即（随即）在控制台打出日志。
• 返回值：也是一个函数，显式调用可以清除watchEffect，组件卸载时会被隐式调用

const count = ref(0);const stop = watchEffect(() => console.log(count.value)); // -> logs 0setTimeout(() => {  count.value++; // -> logs 1}, 100);// 清除watchEffectstop();

• 清除副作用（onInvalidate）

watchEffect 的第一个参数——effect函数——自己也有参数：叫onInvalidate，也是一个函数，用于清除 effect 产生的副作用。

onInvalidate 被调用的时机很微妙：它只作用于异步函数，并且只有在如下两种情况下才会被调用：

1. 当 effect 函数被重新调用时
2. 当监听器被注销时（如组件被卸载了）

import { asyncOperation } from "./asyncOperation";const id = ref(0);watchEffect((onInvalidate) => {  const token = asyncOperation(id.value);  // onInvalidate 会在 id 改变时或停止侦听时，取消之前的异步操作（asyncOperation）  onInvalidate(() => {    token.cancel();  });});

• 第二个参数：options

主要作用是指定调度器，即何时运行副作用函数。

// fire before component updateswatchEffect(  () => {    /* ... */  },  {    flush: "pre",    onTrigger(e) {      // 依赖项变更导致副作用被触发时，被调用      debugger;    },    onTrack(e) {      // 依赖项变更会导致重新追踪依赖时，被调用【调用次数为被追踪的数量】      debugger    },  });

五、感悟

优点：很优秀

缺点：他的对手（React），更优秀

虽然好多地方神似React，但是我们也可以从中看出，他们的都源于比较成熟的编程范式——FP（Functional Programming）。

框架只是工具，解决问题才是终极目标；我们还是要把重点放在领悟框架的设计思想上；悟到了，才是真正掌握了解决问题的手段。（抄的）