vue3学习2.3

虚拟dom

用 js 生成 ast 的节点树
不直接操作dom 很浪费性能 dom上面属性很多 还能作为算法的复用

diff 算法

在 v-for 中有无 key 区别
无 key源码中 先

ref 学习

ref () 深层次的 响应式
isref() 判断是不是ref
shallowRef() 浅层次的响应

const aaa = shallowRef({
   name:"名字"})
const change = ()=>{
   
	aaa.value.name = '修改'  // 无法修改页面上的值  只能修改控制台中的值
	aaa.value = {
   
		name = '修改'        // 才能修改页面上的值
 	}
}

ref 不能和 shallowRef 写到同一个修改函数中 不然都会被修改
triggerRef() ref() 底层会调用 强制更新 收集依赖
customRef() 能自定义 ref

function name (value){
   
	return customRef((track, trigger)=>{
   
		return {
   
			get(){
   
				track()
				return	value
			},
			set(newVal){
   
				newVal = value
				trigger()
			}
		}
	})
}

ref 还可以获取dom 属性
方法

html
<div ref="名称">123</div>

js
const 名称 = ref()
两个名称必须一致

ref 和 reactive 区别和reactive 使用

区别 :
ref 支持所有数据类型 取值 必须 .value
reactive 只能是 引用类型 array object map set 取值不用 .value
不能直接赋值 不然会破坏响应式对象
数组解决方法 使用push 加 解构
添加一个对象 将数组变成对象

const aaa = () =>{
   
 setTimeout(()=>{
   
 	let res = [1,2.3]
 	Arr.list = res
 ])
}

reactive 中的使用 toRef() toRefs() toRaw()

toRef() 只能修改 响应式对象的值 非响应式对象视图不会变化
toRefs() 能对 reactive 进行解构
toRaw() 将 Proxy对象转成 原始对象

响应式原理

vue 2 使用的是 object.defineProperty()
vue3 使用 Proxy

computed 实现购物车

<template>
  <table border width="800opx">
    <thead>
      <tr>
        <th>名字</th>
        <th>数量</th>
        <th>单价<