vue3-组合式API

​个人主页:前端青山
系列专栏:Vue篇
人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-组合式API

目录

组合式API

1.1 什么是组合式API

1.2 为什么使用它

1.2.1 更好的逻辑复用#

1.2.2更灵活的代码组织#

1.2.3 更好的类型推导#

1.2.4 更小的生产包体积#

1.3 第一个组合式API的例子

setup()函数

2.1 基本使用

2.2 访问 Prop

2.3 Setup的上下文

2.4 与渲染函数一起使用

组合式API

1.1 什么是组合式API

组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:

  • 响应式 API:例如 ref()reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。

  • 生命周期钩子:例如 onMounted()onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。

  • 依赖注入:例如 provide()inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本,可以使用官方维护的插件 @vue/composition-api。在 Vue 3 中,组合式 API 基本上都会配合

体验提取公共部分







组合式API


{{ count }}

setup()函数

setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:

  1. 需要在非单文件组件中使用组合式 API 时。

  2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

其他情况下,都应优先使用

请注意在模板中访问从 setup 返回的 ref 时,它会自动浅层解包,因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。

setup() 自身并不含对组件实例的访问权,即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值,但反过来则不行。


  
  
  
  组合式API


  
  {{ count }}      

生命周期先执行 组合式API 后执行选项式API,其余以组合式API为优先

2.2 访问 Prop

setup 函数的第一个参数是组件的 props。和标准的组件一致,一个 setup 函数的 props 是响应式的,并且会在传入新的 props 时同步更新。

{
  props: {
    title: String,
    count: Number
  },
  setup(props) {
    console.log(props.title)
    console.log(props.count)
  }
}

请注意如果你解构了 props 对象,解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

如果你确实需要解构 props 对象,或者需要将某个 prop 传到一个外部函数中并保持响应性,那么你可以使用 toRefs() 和 toRef() 这两个工具函数:

{
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象,然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)
​
    // 或者,将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}



  
  
  
  组合式API


  
    {{ num }}      

2.3 Setup的上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值:

{
  setup(props, context) {
    // 透传 Attributes(非响应式的对象,等价于 $attrs)
    console.log(context.attrs)
​
    // 插槽(非响应式的对象,等价于 $slots)
    console.log(context.slots)
​
    // 触发事件(函数,等价于 $emit)
    console.log(context.emit)
​
    // 暴露公共属性(函数)
    console.log(context.expose)
  }
}

该上下文对象是非响应式的,可以安全地解构:

{
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrsslots 都是有状态的对象,它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们,并始终通过 attrs.xslots.x 的形式使用其中的属性。此外还需注意,和 props 不同,attrsslots 的属性都不是响应式的。如果你想要基于 attrsslots 的改变来执行副作用,那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose 函数用于显式地限制该组件暴露出的属性,当父组件通过模板引用访问该组件的实例时,将仅能访问 expose 函数暴露出的内容




  
  
  
  setup上下文对象


  
               
content
         
 

在父组件通过ref获取子组件的实例的属性和方法的需求中,需要注意:

1.如果子组件是 选项式API组件,基本不需要做任何操作

2.如果子组件是 组合式API组件,需要通过 context.expose 暴露给父组件需要使用的属性和方法

3.如果父组件使用 选项式API, 可以通过 this.$refs.refName 访问到子组件想要你看到的属性和方法

4.如果父组件使用 组合式API,需要在setup中先创建 refName,然后再访问子组件想要你看到的属性和方法(const refName = ref() refName.value.X)

2.4 与渲染函数一起使用

setup 也可以返回一个渲染函数,此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态:

{
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说,这样没有问题,但如果我们想通过模板引用将这个组件的方法暴露给父组件,那就有问题

我们可以通过调用 expose() 解决这个问题:

{
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value
​
    expose({
      increment
    })
​
    return () => h('div', count.value)
  }
}



  
  
  
  渲染函数


  
         

你可能感兴趣的:(Vue.js入门到实战,vue.js,javascript,前端)