vue3特性

从技术角度，变化有几点

1.defineProperty ------> Proxy

2.diff逻辑优化

3.使用typescript 重写，IDE提示更智能

从api角度来看，使用的角度来看，变化较大的有这么几点

1.option base → function base 使用方式从 基于选项的 变为 基于函数 的，vue将原本通过选项提供的功能，比如：watch, data, computed等等，解耦成了一个个函数，我们可以很方便的通过函数的组合来实现功能，这个变化带来的影响就是，代码的组织可以更加灵活了

 

function base 的 api，也叫 composition api, 即组合式api

具体可以参考官方文档 https://vue-composition-api-rfc.netlify.com/#summary ，里面介绍了设计动机，设计理念，具体api 等等

2,新加了一个setup的选项，在该选项里使用composition api

列举一些比较重要的api，大部分是原来的options，改成了函数，比如watch，computed，生命周期等

1. reactive
2. ref
3. toRefs
4. watch
5. computed
6. onMounted
7. onUpdated
8. unmounted

有一个很容易混淆的部分，就是 reactive 和 ref 的区别，二者都可以让数据成为响应式数据，那什么时候用ref，什么时候用reactive呢

import { ref, reactive } from 'vue'

 

// 风格一

const x = ref(0)

const y = ref(0)

 

// 风格二

const state = reactive({

    x: 0,

    y: 0

})

根据文档的说法 https://vue-composition-api-rfc.netlify.com/#ref-vs-reactive ，使用哪个，取决于你习惯怎么书写js逻辑，对于变量的赋值，一种情况是直接声明变量，另一种情况是使用一个object包裹住变量，对于前者，使用ref，它可以让一个基本数据类型变为响应式的，对于后者，使用reactive，它可以让object成为可响应的。

 

那么 toRefs 这个 api 又有什么用呢，它的作用主要是为了解决解构赋值或对象展开导致响应式失效的问题

// x, y不再是可响应式的了，对象展开后，x，y成为了基本类型，vue无法追踪

const { x, y } = state 

 

import { toRefs } from vue

toRefs(state)

// x, y 是包装后的类型，可响应

const { x, y } = state

 

3.写插件时，原来我们会在this上放置一些属性，比如$router, $store等等，现在用组合api时不再使用this，而是利用提供的 provide 和 inject 方法 https://vue-composition-api-rfc.netlify.com/#plugin-development

其他

 

1. 组合式api的定位：作为一种纯粹的新增特性，给开发人员提供新的选择，不会影响现有的api
2. 组合式api可以和现有的选项api共存，覆盖优先级：组合式api < 选项api
3. 在vue组件里，组合式api要全部放到setup选项里书写
4. setup选项返回的属性，会暴露在组件this上，以供其他选项api使用（如果需要的话）