vue学习笔记之组合式API

第九章 组合式API

9.1 认识组合式API (Composition API)

• 为了实现基于函数的逻辑复用机制而产生
• 提供一组函数来组织和管理组件的逻辑代码，将相关功能按照逻辑关系进行分组，使得代码更加清晰、可维护，并且能够更方便地实现逻辑的复用。
• 主要思想：定义为从setup函数返回的JavaScript变量，不再将组件的功能（state、methods、computed等）定义为对象属性
• 使用：
  • setup函数：用来初始化组合式API。它接收两个参数，props和context，并返回一个对象，包含了组件中需要的响应式数据、计算属性、方法等
  • 组合函数：在setup函数里自定义组合函数用于封装和复用一些逻辑。例如，使用ref、computed、watch等函数创建响应式数据，使用onMounted、onUpdated等函数注册生命周期钩子等
  • 使用组合函数：在模板和其它组合函数中，可以直接使用定义的组合函数，并将其返回的值用于渲染视图或执行其他操作。

9.2 setup()方法应用

• 定义setup函数

  使用语法糖

• 执行时机

  • 在 beforeCreate之前（组件实例还没被创建）就执行

  • 此时this是undefined，无法通过它来访问data/computed/methods等

    export default{
      setup(){
        //调用时机，在没有创建该vue实例前就被调用
        console.log('setup方法被调用')
        console.log(this)//结果是undefined
        //setup中无法直接使用this.$router $store $refs $emit
      },
      //允许共存，但setup优先级更高
      data(){
      }
    

• 返回值

  • 不使用语法糖，需要在模板中使用的变量和方法，setup必须返回

  • setup返回的属性和方法会和data、methods中的成员合并，重名setup优先

• setup()的参数：

  • 第一个参数是props

    父组件

    子组件

  • 第二个参数是 上下文context/ {attrs,slots,emit}

    • attrs包含没有在props配置中声明的属性的对象

    • slots包含所有传入的插槽内容的对象

    • **emit**用来分发自定义事件的函数，子组件向父组件传值

      父组件

      子组件

9.3 Composition常见API

9.3.1 响应式API

实现原理

• vue2响应式
  • 对象：通过定义property对对象的已有属性值读取和修改进行劫持（监视/拦截）
  • 数组：通过重写数组更新数组一系列更新元素的方法是实现元素修改的劫持
• vue3的响应式
  • 内部基于ES6的Proxy实现，通过代理，对象操作源对象内部数据都是响应式的
  • 通过Proxy(代理)：拦截对data任意属性的任意(13种)操作，包括属性值的读写，属性的添加，属性的删除等
  • 通过reflect(反射)：动态对被代理对象的相应属性进行特定操作

方法

• ref()

  ref()可以创建一个响应式的数据引用，函数返回一个 RefImpl对象，是Vue内部定义的一个类，它包装了原始值和一些方法

  常见的方法和属性有：value、getValue、setValue(value)、unref()、isRef等

• reative()

  reactive()创建一个响应式的数据对象，可以访问对象中的属性。

  函数接收参数为普通js对象，返回一个代理对象Proxy,这个代理对象会拦截对于原始对象属性的访问和修改操作，并通过触发依赖追踪来实现响应性。

• toRefs()

  与前者搭配，可以解构响应式对象

9.3.2 计算属性API

• computed()创建计算属性，返回值是一个ref的实例

  computed()函数接收一个计算函数作为参数，该函数用于定义计算属性的逻辑。

  计算函数会在相关的响应式属性发生改变时自动重新计算，并缓存计算结果，只有在依赖的响应式属性发生改变时才会重新执行计算函数

  计算属性只能用于获取数据，不能用于修改数据。如果需要进行双向绑定或修改计算属性的值，可以考虑使用带有**get和set函数**的计算属性

9.3.3 侦听器watch

• watch()函数用于监视某些数据项的变化，从而触发某些特定的操作

• watchEffect立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数

9.4 组合式API中生命周期函数

• Vue 3的组合式API中，生命周期函数被替换为一组新的函数，以更灵活和可组合的方式来管理组件的生命周期

• Composition和原生命周期函数之间的映射关系（对应Vue2.x）

  • setup()– beforeCreate 、created
  • onBeforeMount–beforeMount
  • onBeforeUpdate– beforeUpdate
  • onUpdated– updated
  • onBeforeUnmonted– beforeUnmount
  • onErrorCaptured– errorCaptured

• 新的生命周期函数按需导入到组件中，只能在setup()函数中使用，不能和原来的生命周期函数混用

  111
  222
  ###
  

9.5 组合API中provide和inject使用

• 组件间数据的传递

  • 父子组件：通过props,$emit,【$root,$parent,$children】
  • 非父子组件：通过Vuex实现数据的共享、父子组件层层传递、$ref
  • vue3引入 provide和 inject用于跨组件传递数据，允许在组件树中的任何地方直接注入和获取数据，隔代传递，无需通过组件层级传递。使用频率较少，前两种情况已经包括大多数

• provide/inject这对选项允许一个祖先组件向其所有子孙后代注入一个依赖，无论组件层次有多深，在上下游关系成立的时间里始终生效

  • provie相当于加强版父组件prop，提供变量：Object|()=>Object
  • inject相当于加强版子组件的props，注入变量：Array|{[key:string]:string |Object}

• 实例

  grandparents

  parents

  grandson

  export default {
    name:'sun',
    //vue2使用方式
    inject:['title','num'],
    setup(){
  
      let title2 = inject('title2');
      let num2 = inject('num2');
  
      return{
        title2,
        num2
      }
  
    }
  }
  
  
  
  

9.6 组合式API结合路由

• 在setup()中利用Router，使用 useRouter()和 useRoute()等效于 this.$useRouter和 this.$useRoute 模板可以直接访问，不需要返回

• 为特定的路由定义导航守卫：

  • onBeforeRouteLeave((to,from)=>{//离开当前路由前执行的逻辑})
  • onBeforeRouteUpdate(async(to,from)=>{//当前路由重新渲染或参数发生变化前执行的逻辑})

9.7 组合式API结合Vuex

• 在setup()中使用store，可以调用useStore()函数，等效this.$store, 模板可以直接访问，不需要返回

  import {useStore} from 'vuex'
  const store = useStore()
  

• 为了访问状态和获取方法，需要创建computed引用以保留响应式

• 直接调用 store.state、store.

9.8 其他API

• defineProps
• defineEmits(原来使用emits定义)