vue3相对vue2有哪些改变？

https://blog.csdn.net/weixin_44475093/article/details/112386778
https://blog.csdn.net/userDengDeng/article/details/114941956

一、vue3的新特性：

1、速度更快

vue3相比vue2

重写了虚拟Dom实现
编译模板的优化
更高效的组件初始化
undate性能提高1.3~2倍
SSR速度提高了2~3倍
体积减小

2、体积更小

通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的能够tree-shaking，有两大好处：

对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大。
对使用者，打包出来的包体积变小了

3、更易维护

compositon Api
composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理。

可与现有的Options API一起使用
灵活的逻辑组合与复用
Vue3模块可以和其他框架搭配使用

image.png

4、更好的Typescript支持

VUE3是基于typescipt编写的，可以享受到自动的类型定义提示

5、更接近原生

6、更易使用

第二篇文章

源码组织方式的变化

 使用 typescript 重写

Composition Api

1、vue.js 3.x 新增的一组 API
2、一组基于函数的API
3、可以更灵活的组织组件的逻辑

性能提升

响应式系统升级

vue.js 2.x 中响应式系统的核心 defineProperty
Vue.js 3.x 中使用 proxy 对象重写响应式系统
1. 可以监听动态新增的属性
2. 可以监听删除的属性
3. 可以监听数组的索引和length属性

编译优化

vue.js 2.x 中通过标记静态根结点，优化 diff 的过程
vue.js 3.x 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点的内容。
1、静态提升
2、 Patch flag
3、事件监听缓存：cacheHandlers

优化打包体积

 Tree-shaking

二、vue2.x和vue3.x中的双向数据绑定原理有什么不同？

1、vue2.x实现原理

主要还是通过Object.defineProperty实现双向数据绑定的。
observe方法的具体逻辑：

Vue.prototype.observe = function(obj) {var value = '',_this = this;for (var key in obj) {value = obj[key];(function(key, value) {if (typeof obj[key] === 'object') {this.observe(obj[key]);} else {Object.defineProperty(_this.$data, key, {get: function() {console.log('get value');return value;},set: function(newVal) {value = newVal;_this.render();}});}})(key, value);}
}

2、vue3.x实现原理

vue3.x主要使用的是proxy对象，proxy对象的定义是：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
使用语法如下：

let p = new Proxy(target, handler);

参数如下：
target: 用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数。

var ob = {a: 1,b: 2
}
var obj = new Proxy(ob, {// target就是第一个参数ob, receive就是返回的obj(返回的proxy对象)get: function(target, key, receive) {// 返回该属性值return target[key];},set: function(target, key, newVal, receive) {// 执行赋值操作target[key] = newVal;}
})

3. Proxy的优势

相比于vue2.x，使用proxy的优势如下:

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作。

4、Proxy带来的问题：

Proxy的问题在于浏览器兼容有点问题，IE下完全不兼容，如果要兼容的话应该是需要添加polyfill等内容。

三、Vue3 如何重写 Vdom

https://blog.csdn.net/qq_26443535/article/details/114079572

1、patch flag 优化静态树

当我们创建了一个动态的 dom 元素，我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */，这个标记就叫做 patch flag（补丁标记）
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比。

2、 patch flag 优化静态属性

只关注它有变化的部分。

3、静态提升

刚刚我们提到 Vue3 突破 Vdom 的性能瓶颈的方式是，而在更新时具体的做法就是静态树的提升和静态属性的提升。
我们已经知道处理后的 Vdom 都在 _createBlock 函数之中，而观察结果我们发现，所有的静态元素都被放在了 _createBlock 函数之外了，也就是说他们只会在页面初始的时候被渲染一次，而在更新的时候，静>态元素是不予搭理的。这个优化就是 Vue3 的静态提升。

4、事件监听缓存：cacheHandlers

使用cacheHandlers之后，会自动会生成一个内联函数，在内联函数里面在引用当前组件最新的onClick，再把这个内联函数cache起来。
第一次渲染的时候，创建这个内联函数，并将这个内联函数缓存起来，后续的更新就从缓存里面读同一个函数，同一个函数就没有更新的必要了，通过这种事件监听缓存的方式也能对性能提升起到作用。

四、vue3的新增的composition Api及使用

https://juejin.cn/post/6875253488017342478

1）Vue3为什么要使用Composition API？

为了解决什么问题？
当前使用Vue2开发的项目，普遍存在的问题：

代码的可读性随着组件变大而变差
每一种代码复用的方式，都存在缺点
TypeScript支持有限

2）常用的api方法：

1、ref和reactive
将数据创建和监听响应式就需要通过vue暴露出来的功能 ref或reactive。两者有所区别，ref用于基础赋值类型的数据，而reactive用于引用类型的数据。

其中基础赋值类型的值，在setup方法中，需要用 .value的方式进行获取和修改。因为赋值类型的值如果return出去返回值，就失去了数据的双绑定。但是在template中，可以进行直接访问。

我们来讨论一下两者选择问题：

如果是单值，建议ref，哪怕是个单值的对象也可以

const counterRef = ref(1)
const usersRef = ref(['tom', 'jerry'])

一个业务关注点有多个值，建议reactive

const mouse = reactive({x: 0,y: 0
})

2、watchEffect和watch有啥不同？
这俩方法很相似，都是观察响应式数据，变化执行副作用函数，但有如下不同：

watch需要明确指定监视目标,

watch(() => state.counter, (val, prevVal) => {})

watchEffect不需要

watchEffect(() => {console.log(state.counter)
})

watch可以获取变化前后的值
watch是懒执行的，它等效于vue2中的this.$watch()，watchEffect为了收集依赖，要立即执行一次。
3、setup
setup是vue新增的一个选项，它是组件内使用Composition API的入口。setup是在创建vue组件实例并完成props的初始化之后执行

4、生命周期