vue3笔记

vue3.0的优势

1. 性能： 比vue2.x快1.2~2倍
   diff算法优化：
   vue2.x: 生成新的虚拟DOM树 与 之前的虚拟DOM树， 全量比较，部分更新
   vue3.0：创建虚拟DOW的时候，根据DOM内容是否发生变化添加patchFlag标志, 虚拟DOM比较时，静态标记的节点进行比较
   静态提升：
   vue2: 无论是否参与更新，每次都会重新创建，然后渲染。
   vue3: 把不需要更新的元素做静态提升，只被创建一次，在渲染时直接复用
   事件侦听器缓存
   默认情况下，onclick被视为动态绑定（做patchFlag标志），每次会追踪它的变化，但是因为是同一个函数，没有做追踪变化，直接缓存起来复用

2. 体积： 按需编译，比vue2.x更小

3. 组合API（Composition API）：
   vue2： data,methods, 业务数据和业务逻辑分开，不便于管理
   vue3： setup函数时组合API的入口: 将业务模块业务数据和业务逻辑放在一起，便于管理

4. 支持TS

vue3响应式原理

• 通过proxy来实现

let state = new Proxy(obj,{
	get(obj,key){
		return obj[key]
	},
	set(obj,key,newValue){
		obj[key] = newValue
	}
})

setup

• setup执行时机在beforeCreate之前
• 在setup中是不能使用data和methods,因为还没初始化好
• 由于不能再setup函数中使用data和methods,所以Vue为了避免我们错误的使用,它直接将setup函数中的this修改成undefined.
• setup只能同步,不能异步，异步无法执行

ref

• 只能监听简单类型的变化,不能监听复杂数据类型变化（数组|对象）
• ref(值)底层调用reactive({value: 值})
• ref对象有一个__V_ref属性，表示是ref数据
• ref是递归监听,ref对象的每一层都是一个ref对象
• ref将对象的属性变成响应式数据，不会影响原始数据

isRef

shallowRef

• state = shallowRef（obj）-> shallowrRactive（{value: obj}），只有state 被包装成ref类型数据，修改state .value的值才能更新页面（state .value不是第一层）
• 只修改state.value.xx无法更新页面，需要triggerRef(state)
• 应用场景:数据量大的情况下

triggerRef

• 用来触发 shallowRef类型数据 更新页面
• shallowReactive类型无法使用

toRef

• toRef将对象的属性变成响应式数据，会影响原始数据，但是界面不会更新

toRefs

• toRefs将对象变成响应式数据，会影响原始数据，但是界面不会更新

customRef

function myRef (value) {
	return customRef((track,trigger)=>{
		return {
			get(){
				track(); //需要被追踪
				return value;
			},
			set(newValue){
				value = newValue;
				trigger();  //触发页面更新
			}
		}
	})
}

reactive

• 参数必须是对象（自定义对象或arr），若不是对象，无法实现响应式
• reactive返回的是proxy对象
• reactive是递归监听,reactive对象的每一层都是一个proxy对象

isReactive

shallowRactive

• state = shallowrRactive（obj）非递归监听，只有state 被包装成proxy对象,state .xx(第一层)修改时会更新页面

• state 的子对象不是proxy对象，修改时无法更新页面

• 当state .xx更新时，更新其他层，会更新页面

• 应用场景:数据量大的情况下

  -如何实现响应式数据
  es6 proxy实现

toRaw

• 获取ref或reactive数据的原始值，非响应式
• toRow（reactiveObj, toRow（refObj.value）

markRaw

• markRaw(obj)，obj数据不能被追踪