vue3 api学习

1.setup 为什么不能使用this？

a：因为在setup中为了避免使用this，因为他不会在组件实例上面找到；setup调用时methods 和 计算属性等 都是在解析之前，所以setup没有办法使用this

2.reactive的使用(将数据变成响应式)

setup(){
    const  objs = reactive({
        name:why
    })
    const h3click = () => {
        objs.name = "xxxx"
    }
    return{
        objs,h3click
    }
}

3.ref的使用(变成响应式数据)

setup(){
    const  count = reactive(0)
    const h3click = () => {
        count.value ++
    }
    return{
        count,h3click
    }
}

4.readonly（数据不可改变的,只读的）

5.isReactive，判断是否包裹了reactvie创建的代理他也会返回true

setup(){
     // 普通对象
    const obj1 = {
      name: 'xxx'
    }
    // 不可改变的数据
    const read1 = readonly(obj1)
    
     // ref响应式数据
    const objs2 = ref({ name: 'xxx' })
    // 不可改变的数据
    const read2 = readonly(objs2)
    
    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
    // 不可改变的数据
    const read = readonly(objs)
    const h3click = () => {
      const falg = isReactive(read1)//false
      const falg1 = isReactive(read2)//false
      const falg2 = isReactive(read)//true
        
    }
    return{
        count,h3click
    }
}

6.toRefs的使用:(进行对reactive 数据进行结构)必须是在reactive中使用

setup(){

    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
    //const {name} = toRefs(objs)
    const h3click = () => {
        //name.value = "gggg"
        objs.name = "ggg"
    }
    return{
        //name,
        ...toRefs(objs)
        h3click
    }
}

7.toRef的使用必须是在reactive中使用

setup(){

    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
   const name = toRef(objs,"name")
    const h3click = () => {
        name.value = "gggg"
    }
    return{
        name,
        h3click
    }
}

8.computed的使用

9.watchEffect自动收集响应式的依赖

10.watch的使用

11.onMounted，onUnmounted,onUpdated,的使用（生命周期）

12.provide和inject的使用（父和孙组件的时候使用）

//父组件



//孙组件

13.自定义指令局部指令

14.自定义指令案例(全局组件)

//app里面定义全局组件

15.这样获取全局属性

//main.js
app.config.globalProperties.$name = '烦死了'
//其他地方使用
import { getCurrentInstance } from 'vue'
 //获取全局内容
const { appContext } = getCurrentInstance()
console.log(appContext.config.globalProperties.$name)