vue3 -记的to do

vue2 和 vue 3 的不同

一、Composition API

代码的组织方式，解决逻辑复用的方案。

vue2 中使用的是 Options Api 选项式 api。

Options Api 的缺点：

1. 其特点是需要将代码放在特定的对象代码块中。

2. 可复用性差。

3. 代码的可读性差。

vue3 新增的 Composition API 组合式 api。

优势：

允许所有的代码写在一个函数内，解决了在大型项目中代码的复用、可读性问题。

因此 Composition API 的入口就是从 set up 函数中开始。

二、set up

set up 是先于 beforeCreated 和 Created 生命周期函数执行的一个函数，也是生命周期函数。

可以在函数内定义变量，函数，通过 return 导出。

set up中存在两个参数，props、context。

props 是从父组件传递的值，

context是

三、ref

在vue2 中使用 data、method 来定义变量和方法，如果想要改变定义的变量的值可以使用 this 获取并修改其值。

但是在 vue3 中，使用 set up 时，不能使用 this 获取修改值，因为在 set up 执行时，this 的指向还没有指到组件实例的身上。所以需要通过引入 ref 方法，来包裹变量，让定义的变量变成响应式数据。

四、reactive

ref 让基础数据类型具备了响应式，但是如果我们换成引用类型的数据，就会失效。所以引入了 reactive。

reactive 通过底层包装，将引用类型数据包装到 proxy 内。

五、toRefs

setup + ref + reactive 实现了数据响应式，不能使用 ES6 解构，会消除响应特性。

所以需要 toRefs 解构，使用时，需要先引入。

六、diff 算法

vue2

diff 算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3

diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。 只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

会查找模板中不同的数据,如果发现数据有不同就重新渲染模板。

七、在组件中支持多个根节点

八、更好的支持 ts

解决 todo

一、computed 和 watch 的区别

computed：计算属性、监听数据，可以获取到 data，props中的值。

与 watch 不同的是：存在缓存，它的变化是依赖于其他值的变化而变化，如果依赖的值不发生变化，直接从缓存中获取数值。直到依赖的值发生变化时，才会重新计算新的值。

新的值可以像data 中存储的值一样获取。

watch：监听数据，可以获取到 data，props，computed中的值。

当监听的值发生变化时，立即执行函数。函数中存在两个参数，第一个参数是当前的数值，第二个参数是以前的数值。

二、vue/cli 脚手架做了哪些事，输入了一些东西是靠什么能力来实现的

CLI的全拼是 Command-Line Interface 命令行界面, 俗称脚手架，用于自动生成vue和webpack的项目模板。

全局安装 vue/cli

会存在一个隐藏文件 package.json，文件中存在bin，注入软链接

询问问题，根据配置拉取所需要的模版

从 git 拉取模版

三、vue3 中为什么改成 createApp，有什么优势

vue2的组件系统设计中，所有的vue实例是共享一个Vue构造函数对象的（包括全局指令/全局组件等），无法做到完全隔离

createApp方法可以返回一个提供应用上下文的应用实例，应用实例挂载的整个组件树共享同一个上下文。

四、setup是有双向绑定的吗

vue3通过proxy代理进行双向数据绑定和数组监听，可以直接监听到数组中的变化，

但是vue2不可以直接监听数组的变化，需要通过 $set进行强制更新视图。

ref 就是用来实现双向数据绑定的。

五、defineProperty 和 proxy 有什么区别

defineProperty 是对属性劫持，proxy 是代理对象。

defineProperty 只能劫持对象的某一个属性，不能对整个对象进行劫持，如果需要监听某一个对象的所有属性，需要遍历对象的所有属性并对其进行劫持来进行监听。

设置代理对象的属性后，原始对象和代理对象都发生了变化，但是获取原始对象的属性不会触发 getter ，只有访问代理对象的属性才能触发 getter。

defineProperty 无法监听对象新增属性，proxy 可以

根据他们的监听方式的不同知道，当对象新增属性的时候，defineProperty 没有对新增的属性进行劫持，就不会监听到对象新增的属性变化，但是 proxy 是对对象进行代理，就能监听到对象属性的新增。

defineProperty 无法监听对象删除属性，proxy 可以

proxy 有专门针对属性删除的方法 deleteProperty，可以在对象属性被删除时触发。

defineProperty 不能监听数组下标改变值的变化，proxy 可以且不需要对数组的方法进行重写

defineProperty性能较差，因此它是通过循环遍历对象属性的方式来进行监听所以会比 proxy 对整个对象进行监听的方式要耗性能。

六、diff 算法，vue2 和vue3 的有什么区别（在上面）