介绍一下vue
Vue就是渐进式框架，与其他框架不同的是，Vue的核心就是只关注图层，容易上手，自低向上逐层应用，他是属于MVVM（model-View-ViewModel）架构
- View-视图层（UI用户界面）
- ViewModel-业务逻辑（一切js可视为业务逻辑）
- Model-数据层（储存数据以及对数据都处理如增删改查）
我们可以把ViewModel看做是一个桥梁，当View视图发生改变的时候，就会通知ViewModel这个桥梁，Model-数据层就会去更新我们想要的数据；当然 Model-数据层的数据发生改变，也会去通知ViewModel的这个桥梁去更新view的视图，所以他们是永远保持这个同步的，只需要关注这个视图层即可，就就是MVVM架构的运行过程。
Vue2和Vue3的区别
- Vue2是使用这种options API的形式去构建的
- Vue3是使用这种competiton API的形式去构建的（组合式）
//Vue2
<script>
export default {
data() {
return {
}
},
methods: {
},
watch: {
},
components {
},
filters: {
},
procide: {
}
}
</script>
//Vue3
<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from "vue";
const name = ref<string>("小石");
watch(name, () => {
name + 'watch'
})
computed(() => {
return name + 'computed'
})
onMounted(() => {
name.value = 'onMounted'
})
</script>
通过对比发现，Vue2的options api写的是比较分散的，首先得在data里面定义数据，然后在methods去使用，有在watch里面用，比较分散的；而Vue3的competiton的api可以把这些逻辑写到一块，也还可以封装成一个hook，写起来是非常分明的。
Vue3的新特性介绍
- 重写双向数据绑定
- VDOM性能瓶颈
- Fragments
- Tree-Shaking的支持
- Composition API
这里就重点说一下 重写双向数据绑定
我们知道Vue2是基于object.defineProperty()来实现的,Vue3是基于Proxy()来实现的,Proxy与object.defineProperty(obj, prop, desc)方式有以下优势
- 丢掉麻烦的备份数据
- 省去for in循环
- 可以监听数组的变化
- 代码更加的简化
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和length属性
通过看Vue2的源码得知，他的响应式原理是通过object.defineProperty通过get(),set()去做一个数据劫持，他处理数组的方法是重写这些数组的原型方法，都可以被监听到的
Vue3是通过Proxy做的代理，因为object.defineProperty是数组处理的不太友好，也监听不到数组长度的变化
