Vue2.0 Options API 与 Vue3.0 Composition API 区别

Vue2.0 Options API

Options API, 即大家常说的选项 API。常用的有 data、methods、computed、watch 等属性和方法，共同处理页面逻辑。

export default {
  data() {
    return {
      属性A,
      属性B
    }
  },

  methods: {
    ...
  },

  computed: {
    ...
  },

  watch: {
    ...
  }
}

当组件变的复杂的时候，对应的属性列表也会增长，以至于最终难以维护。且对 typeScript 的支持有限。

Vue3.0 Composition API

1.建立在 setup 函数之上。
2.setup(props, context){} 在 created 实例被完全初始化之前执行
3.由于 setup 是在实例被初始化之前执行的，故在 setup 中的 this 上没有任何东西

Composition API 有 setup、reactive、onMounted、onUnmounted、computed、watchEffect等

Composition API 代码是根据逻辑功能来组织的，一个功能的 api 都放在一起，实现高内聚，低耦合。

function useCount() {
  let count = ref(10)

  const handleConut = () => {
    count.value = count.vale * 2
  }
  
  return {
    count,
    handleConut
  }
}

export default defineComponent({
  setup() {
    const { count, handleConut } = useCount()
    return {
      count,
      handleConut
    }
  }
})

当然 vue2.0 中也有 mixin 来重用代码。但是随着项目的复杂度变高，mixin 也会变得难以维护。会出现：
1.命名冲突
2.数据来源不清晰问题。

Option API 与 Compostion API 生命周期的区别

可以通过在生命周期的钩子上加 on 来访问组件的生命周期钩子，例如：

Options API	Composition API
beforeCreate	不需要
created	不需要
beforeMount	onBeforeMount
mounted	onMounted
updated	onUpdated

Vue2.0 Options API 与 Vue3.0 Composition API 区别