vue2与vue3的区别
更小
vue2采用的是面向对象编程，vue3采用函数式编程
更快
vue3修改了细腻dom算法，只针对变化的层进行diff，而vue2是对所有的dom进行diff
加强typescript支持
api一致性
提高可维护能力
开放更多底层功能
把更多的底层功能开放出来，比如render，依赖收集功能。
数据双向绑定
vue2使用的是definedOroperty，vue3使用的是proxy
vue3使用proxy的优点
使用proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象。
使用proxy只需要监听整个源对象的属性，不需要循环使用Object.definedProperty监听对象的属性。
使用proxy可以获取到对象属性的更多参数，使用definedProperty只能获取到监听属性的新值newValue。
创建vue实例
vue2：new Vue({})
vue3: vue.createApp({})
根节点
vue3是允许有多个根节点的，即template里面可以同时写多个节点并列，而vue2只能有一个根节点，在根节点里面再去添加其他节点。
在给组件上编写class名时，由于组件中可以有多个根节点，那么需要定义哪部分将接收这个class。可以使用$attrs组件property执行此操作。
vue3中的组合式api
setup
-
vue3中为什么新增了setup？
可以把业务相关的代码放在同一个位置来写。将同一个逻辑关注点相关代码收集在一起会更好的阅读和维护。组合优于继承！
-
在哪里使用？
setup是vue3新增的生命周期函数，他存在于created和beforeCreated之间。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数。所以在执行setup的时候还没有进行项目的初始化，就不能访问data或者是methods中的数据和方法，this是undefined。
一旦props被解析，就将作为组合式api的入口。
-
怎么使用？
setup选项是一个接收props和context的函数。
setup内部可以定义数据和方法，如果想在模板中使用，必须要通过return进行返回，暴露给组件的其余部分（计算属性、方法、生命周期钩子等等）以及组件的模板。
vue3中的setup之props
背景
因为props是响应式的，所以不能使用ES6解构，会消除prop的响应性，如果需要解构prop，可以在setup函数中使用toRefs。
-
使用toRefs和toRef的区别：
如果想要解构全部的可以使用toRefs（返回对象中所有属性都是响应式的，但是会耗性能）
解构其中的某个属性可以用toRef（将对象的某一个属性作为引用返回）
vue3中的context
context是一个普通的javascript对象，也就是说，他不是响应式的，可以安全的对context使用es6解构。
ref
-
带ref的响应式变量
a. 在3.0中，可以通过一个新的ref函数使任何响应式变量在任何地方起作用。
b. ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。
c. 将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的。ref是为我们的值穿件了一个响应式应用。
ref与reactive的区别
ref()和reactive()这两种方式都是对响应式数据的声明。
reactive定义复杂的数据类型的数据，ref推荐定义基本数据类型。
ref定义的数据打印结果需要.value才能获取到结果，reactive不需要。
使用ref定义基本数据类型，ref也可以定义数组和对象。但是使用reactive去定义基本数据类型的时候控制台会报出警告的信息。
-
对于应用类型，什么时候使用ref，什么时候使用reactive？
- 只打算修改引用类型的属性的时候使用reactive，想要修改变量重新赋值的时候一定要用ref。
- 如果是重新赋值的话用reactive，在onMounted里面不是检测不到变化，不能在onMounted里面用reactive或者ref去赋值，但是可以直接counter.name=’lisi’去赋值
reactive与shallowReactive的区别
如果数据是服务器返回的LIST数据，而且只显示、不变更，那么最好是使用shallowRef来包装数据，可以节能。如果会有变更，那么应该用ref
shallow的中文意义是“浅层的”，shallowReactive不代理深层property，只会指向原始对象的深层property。
shallowReactive的用途是：如果一个对象的深层不可能变化，那么就没必要深层响应，这时候用shallowReactive可以节省系统开销。(印证第一点)
未完，待续...
