在Vue 3.0源代码版本中，98%代码由Typescript编写,同时也是 vue 3.0 最重要的一些新特性，例如 setup() 函数、reactive()、ref() 等这些 Vue Hooks, 总的来说给我的第一映像就是有一点点像写react hook的感觉, 接下来总结一下vue 3.0 带来的新特性。
- setup()
- ref()
- reactive()
- isRef()
- toRefs()
- computed()
- watch()
- LifeCycle Hooks(新的生命周期)
- Template refs
- globalProperties
- Suspense
Vue2与Vue3的对比
- 对TypeScript支持不友好（所有属性都放在了this对象上，难以推倒组件的数据类型）
- 大量的API挂载在Vue对象的原型上，难以实现TreeShaking。
- 架构层面对跨平台dom渲染开发支持不友好
- CompositionAPI。受ReactHook启发
- 更方便的支持了 jsx
- Vue 3 的 Template 支持多个根标签，Vue 2 不支持
- 对虚拟DOM进行了重写、对模板的编译进行了优化操作...
一、setup 函数
setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口, setup 函数会在 beforeCreate 之后、created 之前执行, vue3也是取消了这两个钩子，统一用setup代替, 该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中
setup(props, context) {
context.attrs
context.slots
context.emit
return {
}
}
- props: 用来接收 props 数据
- context 用来定义上下文, 上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this，是个 undefined
- 返回值: return {}, 返回响应式数据, 模版中需要使用的函数
二、reactive 函数
reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可
{{name}} // test
三、ref() 函数
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value
{{count}} // 10
在 reactive 对象中访问 ref 创建的响应式数据
{{count}} -{{t}} // 10 -100
四、isRef() 函数
isRef() 用来判断某个值是否为 ref() 创建出来的对象
五、toRefs() 函数
toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据
{{name}} // test
{{age}} // 18
六、computed()
该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象。 里面可以传方法，或者一个对象，对象中包含set()、get()方法
6.1 创建只读的计算属性
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup(props, context) {
const age = ref(18)
// 根据 age 的值，创建一个响应式的计算属性 readOnlyAge,它会根据依赖的 ref 自动计算并返回一个新的 ref
const readOnlyAge = computed(() => age.value++) // 19
return {
age,
readOnlyAge
}
}
});
6.1 通过set()、get()方法创建一个可读可写的计算属性
七、 watch() 函数
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源数据变更时才执行回调。
7.1 监听用reactive声明的数据源
7.2 监听用ref声明的数据源
7.3 同时监听多个值
7.4 stop 停止监听
在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下：
八、LifeCycle Hooks(新的生命后期)
新版的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用, 但是也可以在setup 外定义, 在 setup 中使用
九、Template refs
通过refs 来回去真实dom元素, 这个和react 的用法一样,为了获得对模板内元素或组件实例的引用，我们可以像往常一样在setup()中声明一个ref并返回它
- 还是跟往常一样，在 html 中写入 ref 的名称
- 在steup 中定义一个 ref
- steup 中返回 ref的实例
- onMounted 中可以得到 ref的RefImpl的对象, 通过.value 获取真实dom
1111
十、vue 的全局配置
通过vue 实例上config来配置,包含Vue应用程序全局配置的对象。您可以在挂载应用程序之前修改下面列出的属性:
const app = Vue.createApp({})
app.config = {...}
为组件渲染功能和观察程序期间的未捕获错误分配处理程序。错误和应用程序实例将调用处理程序
app.config.errorHandler = (err, vm, info) => {}
可以在应用程序内的任何组件实例中访问的全局属性，组件的属性将具有优先权。这可以代替Vue 2.xVue.prototype扩展：
const app = Vue.createApp({})
app.config.globalProperties.$http = 'xxxxxxxxs'
可以在组件用通过 getCurrentInstance() 来获取全局globalProperties 中配置的信息,getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，这样我们就能在setup中使用router和vuex, 通过这个属性我们就可以操作变量、全局属性、组件属性等等
setup( ) {
const { ctx } = getCurrentInstance();
ctx.$http
}
十一、Suspense 组件
在开始介绍 Vue 的 Suspense 组件之前，我们有必要先了解一下 React 的 Suspense 组件，因为他们的功能类似。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
import React, { Suspense } from 'react';
const myComponent = React.lazy(() => import('./Component'));
function MyComponent() {
return (
Loading... }>