欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Composition API

程序员文章站 2022-08-09 16:42:38
介绍 Composition API的主要思想是,我们将它们定义为从新的 setup 函数返回的JavaScript变量,而不是将组件的功能(例如state、method、computed等)定义为对象属性。 案例对比 下面是一个经典的vue2的计数器案例. //Counter.vue export ......

介绍

composition api的主要思想是,我们将它们定义为从新的 setup 函数返回的javascript变量,而不是将组件的功能(例如state、method、computed等)定义为对象属性。

 

案例对比

  • 下面是一个经典的vue2的计数器案例.
//counter.vue
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  }
}

 

  • 下面是使用composition api定义的完全相同的组件
// counter.vue
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

 

ref:导入了ref函数,表示该函数允许我们定义一个响应式变量,其作用与data变量几乎相同。

count.value:increment方法是一个普通的javascript函数,需要更改子属性count的value才能更改响应式变量,这是因为使用red创建的响应式变量必须是对象,以便在传递的时候保持一致。

 

代码提取

composition api的第一个明显优点是提取逻辑很容易。使用composition提取上面counter.vue组件代码。

//usecounter.js
import { ref, computed } from "vue";

export default function () {
  const count = ref(0);
  const double = computed(() => count * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

 

代码重用

要在组件中使用该函数,我们只需将模块导入组件文件并调用它(注意导入是一个函数)。这将返回我们定义的变量,随后我们可以从 setup 函数中返回它们。

// mycomponent.js
import usecounter from "./usecounter.js";

export default {
  setup() {
    const { count, double, increment } = usecounter();
    return {
      count,
      double,
      increment
    }
  }
} 

解决mixins命名冲突

在vue2中,可能会有相同命名的变量或者函数,会导致冲突,使用composition代替后,就可以解决了。

export default {
  setup () {
    const { somevar1, somemethod1 } = usecompfunction1();
    const { somevar2, somemethod2 } = usecompfunction2();
    return {
      somevar1,
      somemethod1,
      somevar2,
      somemethod2
    }
  }
}