Composition API

更新日期: 2020-05-05阅读: 2k标签: api分享

复制链接

新浪微博

QQ 好友

扫一扫分享

介绍

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
    }
  }
}

链接: https://fly63.com/article/detial/8878

Composition API

介绍

案例对比

代码提取

代码重用

解决mixins命名冲突

浏览器中的图像识别 API

JavaScript的API设计原则

适合写api接口文档的管理工具有哪些？

前后端分离，如何防止api接口被恶意调用或攻击

JSON API免费接口_ 免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

什么是RESTful API？

认识 Fetch API

用一个通俗的例子讲清楚API

docker提供api访问

构建API的最佳编程语言是什么？