vue3初识

vue3性能提升

响应式系统的重写 （vue2 Object.defineProperty）(vue3 Proxy)
虚拟 DOM 的改进
更好的 Tree Shaking 支持 （按需引入）
编译器的优化
销毁和卸载的改进

新增特性

Composition API 组合式api
setup: 组件实例化前被调用，可以用来设置组件数据、收集依赖、注册事件等；
ref和reactive：用来声明响应式变量和对象；
新增 v-once 指令，用于只渲染一次元素；

转化非响应式数据

reactive

用于定义引用类型数据（如对象或数组）的响应式
将对象内部所有嵌套属性都转换为响应式的属性

reactive的局限性
不支持非对象或非数组类型的数据
性能开销较大
浏览器支持限制

ref

函数用于将数据类型转换为响应式
使用时加value

this.$forceUpdate() 强制页面刷新

nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

计算属性 计算的属性不能声明

computed(()=>{}) 相当于get方法
computed({get(){},set(){}})

监听属性

watch(监听的属性（ref 直接写 reactive 用函数），（newVal.oldVal）= >{},{ immediate:true,deep:true})
watch监听多个属性 用数组
watchEffect(()=>{}) 监听⻚面的所有响应式数据 立即执行监听

watch和watchEffect的区别

watch

• watch显式指定依赖数据，依赖数据更新时执行回调函数
• 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
• 监视ref定义的响应式数据时可以获取到原值

• 既要指明监视的属性，也要指明监视的回调

watchEffect

• watchEffect自动收集依赖数据，依赖数据更新时重新执行自身
• 立即执行，没有惰性，页面的首次加载就会执行
• 无法获取到原值，只能得到变化后的值

• 不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性