[JavaScript知识库]组合式 API如何解决vue2中mixin的局限性？

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

// 定义一个mixin object
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个app使用这个 mixin
const app = Vue.createApp({
  mixins: [myMixin]
})

app.mount('#mixins-basic') // => "hello from mixin!"

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

• Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，需要了解其他每个特性。

• 可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

组合式api:

<template>
  <router-link to="/about">点这里去关于我们页面</router-link>
  <div class="home">
    这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
    <button @click="countAdd">{{btnText}}</button>
  </div>
</template>

<script>
// ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
import { ref } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个不需要改变的数据
    const btnText = '点这个按钮上面的数字会变'
    // 定义一个 count 的响应式数据，并赋值为 0
    const count = ref(0)
    // 定义一个函数，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 导出一些内容给上面的模板区域使用
    return {
      btnText,
      count,
      countAdd
    }
  }
}

组件不用写一堆东西了，只需要一个setup函数即可。

ref 这个函数，我们可以从vue中引入它，它传入一个值作为参数，返回一个基于该值的 响应式 Ref 对象，该对象中的值一旦被改变和访问，都会被跟踪到，通过修改cout.value的值，可以触发模板的重新渲染，显示最新的值。

参考：https://cloud.tencent.com/developer/article/1633065