1.ref、Ref

ref推荐定义基本数据类型，虽然也可以是对象，但是可能会出现深度变化监听不到的情况
遇到不更新视图问题可能是因为没有用.value取值

let infor:any = ref({})
infor.value = 'fiore test'

ts类型

//fiore code
import { ref } from "vue"
const stringList = ref<string[]>([])
const name = ref<string>("")

//有时我们可能需要为 ref 的内部值指定复杂类型。可以在调用 ref 时传递一个泛型参数以覆盖默认推断，从而简洁地做到这一点：
//意思就是类型为多种类型中的某一种时 用下面的简写??
const foo = ref<string | number>('foo') // foo 的类型：Ref<string | number>
foo.value = 123 // ok!

//other code
//Ref 为官方自带的Ref类型声明方式
import { Ref, ref } from "vue"
const dom:Ref<HTMLDivElement | null> = ref(null)
interface ValType {
  name?: string
  id?: number
}
const obj1:Ref<ValType | undefined> = ref(undefined)

获取dom对象

获取不到的原因：
1.没有return里写myDiv
2.dom还没渲染出来

<template>
  <div ref="myDiv">div</div>
</template>
<script>
  import { ref, onMounted } from 'vue';
  export default{
    setup(){
      const myDiv = ref(null);
      onMounted(()=>{
        console.log(myDiv.value)
      })
      return{
        myDiv
      }
    }
  }
</script>

2. reactive

定义对象类型
定义的字段没法直接赋值,会造成视图不更新问题

//错误示范 可能会造成视图不更新
const infor = reactive({})
infor = {a:1,b:2,c:3,d:4}
//正确示范 
const infor2 = reactive({obj:{},list:[]})
infor2.obj = {a:1,b:2,c:3}
infor2.list = [{a:1},{b:2},{c:3}]

ts 类型

//fiore code
interface ListItem{
  name:string
  id:number
}
interface ListType{
  records:ListItem[]
}
let list:ListType = reactive({records:[]})
const getList=()=>{
  //...
  list.records = res.records
}
//other code 
//其实一样的 只是用了ts的record定义一个对象的key和value
const message:Record<string,string> = reactive({
  a:'a',
  b:'b'
})

3.生命周期

//移除了该周期
beforeCreate - setup()
created - setup()

beforeMount - onBeforeMount
mounted - onMounted
beforeUpdate - onBeforeUpdate
updated - onUpdated
//销毁周期修改
beforeDestroy - onBeforeUnmount
destroyed - onUnmounted

errorCaptured - onErrorCaptured
跟踪虚拟DOM重新渲染时调用 - onRenderTracked
当虚拟DOM重新渲染被触发时调用 - onRenderTriggered

4.Provide/Inject

https://blog.csdn.net/rebornszoro/article/details/109431595

5.获取当前实例

setup里this指向window的，我们需要通过 getCurrentInstance()这个接口来获取组件实例

const proxy = getCurrentInstance();
proxy.emit('xxx')

6.toRaw

复制‘源’数据，以及一些是否刷新界面和是否会改变源数据的时候使用

7.UnwrapRef

8.props

vue3.0的子组件参数以及TS类型
自定义props ts类型需要使用ProType

import { PropType } from "vue"
import { ValueType[] } from "..."
props:{
  title:   {
      type: String,
      default: ""
   },
  list:{
    type:Array as ProType<ValueType[]>,
    default:()=>{}
  }
}

9.setup中的可选参数

props自定义参数
emit时间传递

setup(props,{emit}){
 //props.val1
 //emit("fn1", val)
}