前端复习笔记——Vue篇

1. Vue双向绑定原理

1.利用Object.defineproperty函数实现一个监听器Observer，给每一个属性设置getter和setter，用来劫持并监听所有属性，如果有变动的，就通知订阅者

2.实现一个订阅者Watcher，每个Watcher都绑定一个更新函数，Watcher可以收到属性的变化通知并执行相应的函数，从而更新视图

3.实现一个消息订阅器 Dep ,主要收集订阅者，当 Observe监听到发生变化，就通知Dep 再去通知Watcher去触发更新。

4.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，若节点存在指令，则Compile初始化这类节点的模板数据（使其显示在视图上），以及初始化相应的订阅者。

缺点：对象直接添加新的属性或删除属性，数组通过下标修改数组元素，页面不会自动刷新，需要使用vm.$set()

2. keep-alive

  使用is特性切换组件时，若用keep-alive包裹组件可以保存组件的数据

3. Vue3新特性
setup函数
ref和reactive来代替data，区别：ref基本数据类型，reactive对象
computed写法不同，写在setup里，var xx = computed(箭头函数)
watch函数写法不同：Vue2: watch:{变量名(newV, oldV){…}}，Vue3: watch(变量名, (newV, oldV) => {…})
生命周期函数：在组合式API中，created,beforeCreate没有了，beforeMount->OnBeforeMount, mounted->OnMounted, beforeUpdate -> OnbeforeUpdate， updated -> OnUpdated, beforeDestory变为beforeUnmount, destoryed变为unmounted, renderTracked, renderTriggered用于调试的钩子
自定义hook函数：把可以重复使用的业务进行封装，可以使用组合式API
toRef和ref一样是创建响应式数据，但改变toRef的value时会改变原始数据，但视图上数据不会更新，ref不会改变源数据，但可以改变视图上数据的显示。toRefs作用和toRef相同，区别是可以为对象的所有属性一起创建响应式数据，并且可以利用结构对象来方便的调用

4.