vue3问题

问题

1. h函数和ref函数的作用
2. vue2和vue3响应式原理
3. setup执行周期
4. 怎么在setup接收父组件信息
5. setup计算属性
6. watch
7. vue3生命周期
8. 自定义hook
9. toref
10. shallowReactive,shallowRef
11. provide,inject
12. isref，isreadonly，isproxy
13. fragment，teleport
14. transform
15. defineasynccomponent ， suspense
16. directive
17. 全局api

答案

1. h函数接受标签和内容，返回dom，可以覆盖页面的template，ref可以将数据变为响应式的数据，修改之后页面刷新，ref帮你管理

   setup(){
       return () => h('h1','pkq')
     }

2. 一个是object.defineproperty一个是proxy传入对象和配置proxy能接收到源对象和操作属性，新增deleteproperty set增加,底层使用reflect因为reflect可以返回一个函数判断是否成功，方便我们操作，而不需要用try，catch这种繁杂的操作

   let obj = {
         name:"张三",
         age:12
       }
       let o = {}
       Object.defineProperty(o,'name',{
         set(val){
           obj.name = val
         },
         get(){
           return obj.name
         }
       })
       let newObj = new Proxy(obj,{
         set(target, prop, val){
           console.log("set");
           target[prop] = val
         },
         get(target, prop){
           console.log("get");
           return target[prop]
         },
         deleteProperty(target, prop){
           console.log("delete");
           return delete target[prop]
         }
       })

3. 在beforecreate生命周期之前执行一次，this是undefined，也就是说你用不了this

4. props定义数组之后传入props对象

5. 传入computed之后传入函数返回值，或者传入对象和get与set方法返回设置新值

6. watch(变量，（new,old）=>{变量逻辑},{immediate:true,deep:true})，但是reacttive无法接收旧对象

7. setup，onbeforemount，onmount，onbeforeupdate，onbeforeupdate，onbforeunmount，onunmount

8. 核心就是逻辑复用，将逻辑封装到一个文件或者函数里，暴露最终需要响应式的对象给setup就可以了

9. toref将数据变为响应式，ref返回新的响应式数据，给新数据添加get set方法，toref是在原数据添加set和get方法，返回新的对象一个是用自己建的一个是new的，toref（val，’name’） …torefs(person)

10. 将第一层对象变为响应式，shallowref只能传入对象

11. provide传入k-v数据，inject可以get provide属性

12. fragment碎片化节点，teleport闪现传送，到别的任意属性to(选择器)

14. translate(-50%,-50%)

15. 异步引入，先出来的先引入，不需要等全出来后引入，不会被阻塞，传入箭头函数引入，suspense可以给异步引入腾出空间，有点像switch

16. app.directive(‘名字’,{钩子和钩子函数 insert:el=>el.focus()})

17. 可以混入，可以directive，可以use，mixin，prototype ，config.globalproperties