[JavaScript知识库]关于Vue3组合API

• Vue3 组合API的入口？

  • setup()

• 如果明确知道数据是对象且知道字段名称，用什么函数什么响应式数据？

  • reactive()

• 如果不知道数据类和字段，使用什么声明响应式数据？

  • ref()

• 如果去解构 reactive 声明的数据对象，需要使用那个函数保持响应式特性？

  • toRefs()

• 组合API中定义计算属性？

  • Computed(()=>计算后的数据)

• 使用watch进行侦探数据的改变

  • 监听一个数据

    • watch(数据,()=>{})

  • 监听多个数据

    • watch([数据1,数据2],()=>{})

  • 监听对象中的一个属性，简单数据

    • watch(()=>对象.属性,()=>{})

  • 监听对象中的一个属性，复杂数据

    • watch(()=>对象.属性,()=>{},{deep:true})

  • 如果想立即执行

    • watch(()=>对象.属性,()=>{},{deep:true,immediate:true})

• 声明周期钩子函数，那个钩子发请求？

  • onMounted

• 父子通讯

  • 父给子：props 传递，模板中直接使用，setup(props){ // 使用props }

  • 子给父：setup(props,{emit}){} 通过emit触发事件，规范：emits选项需要显性声明

• 跨级组件通讯

  • 祖先到后代

    • 祖先 provide('money', money)

    • 后代 injec('money')

  • 后代到祖先

    • 祖先 provide('修改数据函数', (newVal)=>{ moeny.value=newVal })

    • 后代 inject('修改数据函数') 调用这个函数传递需要改的值

• 通过获取dom元素和组件实例

  • 通过ref定义一个响应式数据，return 给模板使用，组件或元素上通过ref属性绑定即可

  • 组件渲染完毕后课获取实例和元素