【Vue】3-2、组合式 API

一、setup 选项

若未 return 在浏览器也会有警告  

每次都需要 return，若数据与函数的量很大，就会很麻烦，所以可以通过语法糖来简化代码  

二、reactive 和 ref 函数  

reactive()：接收对象类型数据的参数传入并返回一个响应式的对象 

步骤：

• 从 vue 中导入 reactive 函数

• 在

  ref()：接收简单类型或对象类型的数据传入并返回一个响应式的对象

  底层是将简单类型数据包装成对象类型的数据，然后借助 reactive 实现响应式  

  步骤：

  • 从 vue 中导入 ref函数

  • 在

    三、computed 

    步骤：

    • 导入 computed 函数

    • 执行函数在回调函数中 return 基于响应式数据做计算的值，用变量接收

    以上创建的是一个 只读 的计算属性 ref，若要创建一个 可写 的计算属性 ref，可以这样做：  

    const count = ref(1)
    const plusOne = computed({
      get: () => count.value + 1,
      set: (val) => {
        count.value = val - 1
      }
    })
    
    plusOne.value = 1
    console.log(count.value) // 0

    在计算属性中不要进行异步请求或这修改 DOM 的操作

    避免直接修改计算属性的值

    四、watch 

    侦听一个或者多个数据的变化，数据变化时执行回调函数  

    

    两个参数：

    • immediate（立即执行）

    • deep（深度侦听）  

    watch(count, ()=>{
      console.log('count变了')
    },{
      immediate: true
    })

    watch 可以直接监视简单类型数据

    const ref = ref(简单类型)

     watch 无法监视复杂类型内部数据的变化

    const ref = ref(复杂类型)

    watch(复杂类型对象, (newValue) => {
    	console.log(newValue);
    }, {
    	deep: true
    })

    若没有添加 deep 参数，默认的是监听对象的地址是否变化，除非修改了对象的地址，否则不会被监听到。

    若要监听复杂类型对象内部属性的变化，则需要添加 deep 参数，即可对其进行监听

    精确监听对象的某个属性

    在不开启 deep 的前提下，侦听对象属性的变化，只有属性变化时才执行回调

    // 精确侦听某个属性
    const info = ref({
      name: 'cp',
      age: 18
    })
    watch(
      () => info.value.age,
      () => console.log('age变了')
    )

    五、生命周期函数 

    

    选项式 API	组合式 API
    beforeCreate/created	setup
    beforeMount	onBeforeMount
    mounted	onMounted
    beforeUpdate	onBreforeUpdate
    update	onUpdate
    beforeUnmount	onBeforeUnmount
    unmounted	onUnmounted

    六、父子通信 

    1、父传子 

    基本思想：

    • 父组件给子组件绑定属性

    • 子组件内部通过 props 选项接收  

    

    defineProps 原理：编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换  

    2、子传父 

    基本思想：

    • 父组件中给子组件标签通过 @绑定事件

    • 子组件内部通过 emit 方法触发事件  

    

    七、模板引用

    通过 ref 标识获取真实的 DOM 对象或者组件实例对象  

    步骤：

    • 调用 ref 函数生成一个 ref 对象

    • 通过 ref 标识绑定 ref 对象到

    获取模板引用的时机：组件挂载完毕  

    默认情况下在

    八、provide 和 inject  

    作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信  

    

    跨层传递普通数据

    • 顶层组件通过 provide 函数提供数据

    • 底层组件通过 inject 函数获取数据

    // 顶层组件
    provide('key', 顶层组件中的数据)
    
    // 底层组件
    const msg = inject('key')

    顶层组件可以向子层组件传递方法，底层组件调用方法修改顶层组件中的数据【实际在修改数据的依然是顶层组件】

    一  叶  知  秋，奥  妙  玄  心