Vue3

***如何选择Ref()和 reactive()

• 他们的作用都是生成响应式对象
• 目前只是编程上的写法不同

***onRenderTracked() 和onRenderTriggered()钩子函数

• onRenderTracked 状态跟踪

  会跟踪页面上所有响应式变量和方法，也就是return回去的值

• onRenderTriggered 状态触发

  不会跟踪每一个值，而是变化的值，返回新值和旧值

onRenderTracked((event) => {
      console.log("状态跟踪组件----------->");
      console.log(event);
    })
    onRenderTriggered((event) => {
      console.log("状态触发组件----------->");
      console.log(event);
    })

• event对象属性的详细介绍

- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数

***Watch监听器

• 监听多个值时

  不是写多个watch函数，而是出入数组的形式

   watch([overText, () => data.selectGirl], (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];
    }); 
    
    // 当监听多值时写成数组的形式，监听reactive中的值时，用一个函数来解决
    // 如： () => data.selectGirl   selectGirl为reactive中data的值
  

***ref和toRef的区别

• ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
• . ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
• . toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
• toRefs传递一个参数 这个参数是一个对象， 可以直接传一个对象进去

***Teleport函数

• Teleport方法可以把Dialog组件渲染到任意的外部Dom上,不必在嵌套在app里

• ##使用

  把编写的组件用<teleport>标签进行包裹 to属性就是你要渲染的dom ID

<teleport to="#modal">
   <div id="center">
     <h2>JSPang11</h2>
   </div>
 </teleport>

 // 在index.html中增加一个id为modal的节点 
   <div id="modal"></div> 
  这就会发现jspang11被挂载到了index.html的modal节点下  而不是app节点了 

问题：

1. Dialog被包裹在其它组件之中，容易被干扰
2. 样式也在其它组件中，容易变得非常混乱

***defineComponent

defineComponent是用来解决TypeScript环境先参数类型推断的，当类型推断不正常时，用defineComponent解决

***Suspense组件（异步请求组件）

注意点：使用Suspense组件必须要返回promise对象，而不是JSON

<suspense>
  <template  #default >
     异步请求完成时显示的组件或模块 
  </template>
  
  
  <template  #fallback >
     异步请求还在加载中显示的内容 
  </template>
</suspense>

<template>
  <h1>{{ data.result }}</h1>
</template>
<script lang="ts">
import {defineComponent, reactive} from "vue";
export default defineComponent({
  async setup() {
    const data = await reactive(new Promise((resolve => {
      setTimeout(() => {
        return resolve({ result: 'JSPang' })
      }, 2000)
    })))
    return { data }
  },
});
</script>

***onErrorCaptured钩子函数

捕获异步请求的错误

export default defineComponent({
  name: 'App',
  components: {
    GirlShow,
    // asyncShow
  },
  setup() {
    // 捕获请求异常
    onErrorCaptured((error) => {
      console.log(error)
      return true
    })
    return {}
  }
})

***多级组件传值provide和inject

const app = Vue.createApp({
    data(){
        return {house:'北京别墅一套'}
    },
     provide :{
        newHouse:'北京200平方房子一套'
    },
    template: `
        <div>我有一套房子，我先传给我的儿子</div>
        <child :house="house" />
        `
})

app.component('child-child',{
    props:['house'],
     inject :['newHouse'],
    template:`
        <div>我是孙子，等待接收房子</div>
        <div>孙子接收{{house}},{{newHouse}}</div>
    `
})

在父组件中 provide 传值， 用 inject 接收值， 可以实现多级组件之间的传值