你觉得vue3.0好吗，好在哪

这种问题 是开放的 多说就是都是对的 可以讲差异 也可以讲新增 的知识点

比如说 常用的api特别好用

1. ref、toRefs、toRef、isRef
   1. ref 用于定义响应式变量、快捷DOM访问。
   2. 基本语法：const a = ref(1) // {value:1}
   3. 基础使用： 一般用于定义 String、Number、Boolean 这种基于数据类型，外在表现统一使用 .value 访问。
   4. 补充：ref 还可以访问 DOM对象或者组件实例对象，可做DOM操作。
   5. toRef、toRefs 用于把一个object的变量，变成响应式的变量。
   6. 基本语法：const msg = toRef(obj, key)// 把obj[key]变成响应式的
   7. 基本语法：const { msg } = toRefs(obj) // 把整个obj都变成响应式的
   8. unref 返回一个变量的值
   9. 基本语法：const x = unref(x) // 如果x是ref变量则返回x.value，如果x不是ref变量则直接返回x。
   10. isRef 用于判断一个变量是不是ref响应式变量
   11. 基本语法：const bol = isRef(x)

function useUpdBoxStyle() {
  const el = ref(null)
  const updateStyle = color => {
    el.value.style.color = color
  }
  return [el, updateStyle]
}

1. shallowRef、triggerRef
   1. shallowRef 用于性能优化，只对对象的第一层进行proxy
   2. 基本语法：const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})
   3. triggerRef 用于手动触发那些shallowRef的变量进行更新视图
   4. 基本语法：triggerRef(obj) // 当obj.value.b.c.d发生变化，triggerRef(obj) 强制更新视图。
   5. customRef 自定义ref，把ref变量拆成get/set的写法
   6. 基本语法：customRef((track, trigger) =>({get,set})

function useObj() {
  const obj = { a: 1, b: { c: { d: 2 }}}
  const obj1 = ref(obj)
  const obj2 = shallowRef(obj)
  // console.log('obj1', obj1)
  // console.log('obj2', obj2)
  const changeObj = (obj, newD) => {
    // obj1.value.b.c.d = 100
    obj.value.b.c.d = newD
    triggerRef(obj)
  }
  return [[obj1, obj2], changeObj]
}

1. reactive、readonly

• reactive 用于定义响应式变量（引用数据类型）
• 基本语法：const arr = reactive([]) // {value: []}
• ref和reactive是什么关系呢？ref背后是使用reactive来实现的。
• shallowReactive 用于性能优化，只对对象的第一层进行proxy
• 基本语法：const c = shallowReactive({a:{b:{c:100}}}) // 只对这个对象的第一层进行proxy
• readonly 把响应式变量变成“只读的”，如果修改就报警告。
• 基本语法：const user = readonly({name:1,age:2})
• isReadonly 用于判断一个变量是否是readonly的，返回布尔值
• 基本语法：const bol = isReadonly(x)
• isProxy 用于判断一个变量是否是响应式的，返回布尔值
• 基本语法：const bol = isProxy(x)
• isReactive 用于判断一个变量是否是reactive响应式变量，返回布尔值
• 基本语法：const bol = isReactive(x)

function useUser() {
  const user = readonly(reactive({name:'list',age:30}))
  console.log('user', user)
  // setTimeout(()=>user.age=40, 2000)
  const x = 1
  const y = readonly({a:1,b:{c:3}})
  console.log('是否被proxy拦截过', isProxy(user), isProxy(x), isProxy(y.b))
  return user
}

1. toRaw、markRaw

• toRaw 用于返回一个响应式变量的原始值
• 基本语法：const a3 = toRow(reactive(a1))// a1===a3是true
• markRaw 用于把一个普通变量标记成“不可proxy”的
• 基本语法：const b2 = markRaw(b1)// b2是无法被reactive的

function useRaw() {
  const a1 = { title: 100 }
  const a2 = reactive(a1)
  const a3 = toRaw(a2)
  console.log('toRow(a2)===a1', a3===a1)
  console.log('a2===a1', a2===a1)
  return [a1,a2,a3]
}

1. computed、watch、watchEffect

• computed 用于对响应式变量进行二次计算，当它依赖的响应式变量发生变化时会重新计算
• 基本语法：const c = computed(()=>c1.value*c2.value)// 只读
• 基本语法：const c = computed({get:()=>c1.value*c2.value,set:(newVal)=>c1.value=newVal}) // 可写可读
• watch 用于监听响应式变量的变化，组件初始化它不执行
• 基本语法：const stop = watch(x, (new,old)=>{}) // 调用stop()可以停止监听
• 基本语法：const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{})
• watchEffect 用于监听响应式变量的变化，组件初始化会执行
• 基本语法：const stop = watchEffect(()=>ajax({cate,page,size}))

export default function useWatchComputed() {
  const c1 = ref(10)
  const c2 = ref(20)
  const c3 = computed(()=>c1.value*c2.value)  // 只读
  // 可读也可写
  const c4 = computed({
    get: ()=>c1.value*c2.value,
    set: (newVal)=>{
      c1.value = parseInt(newVal) / c2.value
    }
  })
  const stop1 = watch(c4, (newC4, oldC4)=>console.log('c4变了', newC4, oldC4))
  const stop2 = watch([c1,c2], ([newC1,newC2],[oldC1,oldC2])=>{
    console.log('[c1,c2] 新值：', [newC1, newC2])
    console.log('[c1,c2] 旧值：', [oldC1, oldC2])
  })
  const stop3 = watchEffect(()=>{console.log('watch effect', c1.value, c2.value)})
  const update = (c,v) => c.value = v
  return [[c1,c2,c3,c4],[stop1,stop2,stop3,update]]
}

也可以说亮点

1. 性能比vue2.x快1.2~2倍
2. 支持tree-shaking，按需编译，体积比vue2.x更小
3. 支持组合API
4. 更好的支持TS
5. 更先进的组

更可以说性能

1. diff算法更快
   1. vue2.0是需要全局去比较每个节点的，若发现有节点发生变化后，就去更新该节点
   2. vue3.0是在创建虚拟dom中，会根据DOM的的内容会不会发生内容变化，添加静态标记， 谁有flag！比较谁。
2. 静态提升
   1. vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染 vue3中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可
3. 事件侦听缓存
   1. 默认情况下，onclick为动态绑定，所以每次都会追踪它的变化，但是因为是同一函数，没有必要追踪变化，直接缓存复用即可
   2. 在之前会添加静态标记8 会把点击事件当做动态属性 会进行diff算法比较， 但是在事件监听缓存之后就没有静态标记了，就会进行缓存复用