主要亮点
-
Performance：通过Proxy实现双向绑定，相比2.0版本的defineProperty的遍历属性的方式效率更高。虚拟DOM更新只diff动态部分，事件缓存等，带来了性能上的提升。
-
首先是Object.defineProperty无法监听到数据下标的变化，导致直接通过数据的下标给数组设置值，不能实时响应。2.0版本中，Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
-
push(),pop(),shift(),unshift(),splice(),reverse(),sort()这些方法会修改数组的原始数据 -
filter(),concat(),slice()会将修改的数据作为新数组返回。
-
-
接着由于Object.defineProperty只能劫持对象的属性，需要对每个对象的每个属性进行遍历，不能直接劫持一个完整的对象。
-
相比较而言，Proxy可以劫持整个对象，并返回一个新的对象。
-
简单说一下
Proxy（代理），他是es6中新增的一个特性，MDN上的解释是Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。-
const p = new Proxy(target, handler) -
target表示要使用
Proxy包装的目标对象，handler是一个以函数作为属性的对象。 -
简单来说Proxy会在访问目标对象之前设置一层拦截，每次访问目标对象时，需要先通过这层拦截。与defineProperty代理对象属性，对属性进行监听类似。
-
-
-
Tree-Shaking Support ，全局 API 现在只能作为 ES 模块构建的命名导出进行访问，Vue 应用程序中未使用的全局 api 将从最终捆绑包中消除，从而获得最佳的文件大小。
-
Composition API：组合式API，面向函数编程
特性
1. createApp({})
Vue3使用createApp()函数来创建实例，每个 Vue 应用都会暴露一个 config 对象，该对象包含此应用的配置设置：Vue.createApp({})，{}对象就是一个vue文件。
const app = Vue.createApp({})
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 是组件的继承关系追踪
}
app.use(router).use(store).mount('#app')
2. globalProperties
定义属性，代替 Vue 2.x Vue.prototype 扩展
app.config.globalProperties.foo = 'bar'
app.component('child-component', {
mounted() {
console.log(this.foo) // 'bar'
}
})
3. isCustomElement
指定一个方法，用来识别在 Vue 之外定义的自定义元素（例如，使用 Web Components API）。如果组件符合此条件，则不需要本地或全局注册，并且 Vue 不会抛出关于 Unknown custom element 的警告。
// 任何以“rcc-”开头的元素都将被识别为自定义元素
app.config.isCustomElement = tag => tag.startsWith('rcc-')
4. optionMergeStrategies
自定义选项合并策略
Composition API
组合式API的主要思想是，从新的 setup 函数返回JavaScript变量，而不是将组件的功能（例如state、method、computed等）定义为对象属性。
steup()
steup()是Vue3中专门新增的方法，step组件选项在创建组件之前执行，一旦props被解析，就作为组合式API的入口点。
setup()函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。
从 setup() 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
在setup()中无法访问this。
-
参数props 接收props对象
-
参数context 上下文对象，这个上下文对象包含了
-
context.attrs -
context.slots -
context.parent -
context.root -
context.emit -
context.refs
reactive
创建响应式数据对象
ref
-
ref()函数用来给定的值创建一个响应式的数据对象,ref()的返回值是一个对象,这个对象上只包含一个.value属性。 -
将ref响应式数据挂载到
reactive()中时，自动把响应式数据对象展开成原始值，不需要在通过.value访问。 -
新的ref会覆盖旧的ref 。
-
isRef用于判断某个值是否为ref创建出来的对象**。**
toRefs
将响应式数据对象转换为单一响应式对象,将一个 reactive 代理对象打平，转换为 ref 代理对象，使得对象的属性可以直接在 template 上使用。
toRef
为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值,更新时二者是同步的。相当于浅拷贝一个属性。
computed
computed()用来创建计算属性,返回值是一个ref的实例。
在使用computed函数期间，传入一个包含get和set函数的对象，可以额得到一个可读可写的计算属性。
watch watchEffect
watch : 创建 watch 监听
watchEffect : 如果响应性的属性有变更，就会触发这个函数。
