1回答

樱桃小胖子

2021-03-29

已采纳

同学你好，这个问题稍微有点儿复杂，接下来的解答内容会有点儿长，请同学耐心看完哟

1、首先来了解一下composition api

composition api的主要思想是将它们定义为从新的setup函数返回的JS变量，而不是将组件的功能（例如state、method、computed等）定义为对象属性。
2、vue2.x版本实现代码与composition api代码对比

①来一个经典的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方法是一个普通的js函数，需要更改子属性count的value才能更改响应式变量，这是因为使用ref创建的响应式变量必须是对象，以便在传递的时候保持一致。

3、代码提取

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

4、代码重用

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

// MyComponent.js
import useCounter from "./useCounter.js";

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

5、解决mixins命名冲突

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

export default {
  setup () {
    const { someVar1, someMethod1 } = useCompFunction1();
    const { someVar2, someMethod2 } = useCompFunction2();
    return {
      someVar1,
      someMethod1,
      someVar2,
      someMethod2
    }
  }
}

简单的说，Composition api允许vue依靠原生JS中内置的保障措施来共享代码，比如将变量传递给函数和模块系统。另外，这部分内容比较繁琐，这里建议同学先做了解，后续老师会进行讲解哟！

希望可以帮到你，祝学习愉快！

0