Vue3的变化

原有的组件选项(data、computed、methods、watch) 的方式来组织组件代码通常是非常有效的，但是也存在一些不好的地方，例如把原有的关联逻辑按照选项划分开来，掩盖了原有潜在的逻辑问题，这个时候我们就必须要不断地上下滚动代码来找到响应的代码块来查找，这样带来了极大的不便，特别是一开始没有编写过这组件的人来说，这导致组件难以阅读和理解。

所以针对上述的情况，Vue3提出了新的组织组件代码的方式---组合式API。组合式API需要一个可以实际使用的地方，那就是setup。

setup的触发时机是在组件创建之前执行的。需要注意，在setup中你应该避免使用this，因为这个时候this并不代表组件实例。setup的调用发生在data、computed和methods被解析之前，所以它们没法在setup中被获取。

当然，我们依然可以在Vue3使用选项（Option API）的方式来组织代码，这个和Vue2没有区别，但是不建议这样写。

Vue3.x组合式写法（推荐）

<script>
import { defineComponent, ref, onMounted } from 'vue';
  export default defineComponent({
    setup(){
      let num = ref(0);
      let fn = () => {};
      onMounted(():void => {
		console.log('生命周期mounted');
      });
      return {
        num,
        fn
      }
    }
  })
</script>