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、生命周期
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured