关于选项式API与组合式API

Vue2用的是选项式API，Vue3用的是组合式API。

Vue3 依然支持 Vue2 的语法，只是 不建议使用。

在Vue2中，props、data与create、mounted等生命周期罗列在一起，属于 “平级”。每一个组件都有所有的生命周期。

在Vue3中， 生命周期按需引入，体量减少，速度变快。同时，生命周期不再以选项的形式罗列出来，而是需要的时候直接在代码中引用，比如需要的时候引入 onMounted ：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

在setup里面可以引入beforeCreate、created、beforeMount、……、updated等生命周期。

setup和其他生命周期之间的关系？

就我目前浅显的理解来简单说说：

首先，官图是很迷惑人的：

看完了就好像setup也是生命周期的一部分。

其实不是。
它处于beforeCreate之前，更像 “ 编译 ”、“ 初始化 ”阶段（找不到更准确的词来形容了）。
从下图也能看出他不在生命周期中。

setup 更像一种固定搭配（这个形容其实不太准确），想要内部的东西被暴露出去，就return，否则就内部处理。

<script>
export default{
    setup(){
        ...
        return ...
        return ...
    }
}
</script>

语法糖 的形式如下，也不用 return了 ：

<script setup>
    ...
    ...
</script>

setup 的 “ 地位 ” ？

vue3 能向下兼容 Vue2，虽然平常不会混在一起写，但如果当我们这样写的时候，它们之间的关系是怎样的呢？
如下， “ 平级 ”：

<script>
export default{
    data(){ return { ... } },
    props{ ... },
    methods{ ... },
    created(){ ... },
    mounted(){ ... },
    ...
    setup(){ 
        onMounted(() => { ... }),
        beforeMount(() => { ... }),
        updated(() => { ... }),
        ...
    }
}
</script>

不过正常没人这么写。

我们知道， setup内部可以进行声明变量等操作，
那当 Vue2 和 Vue3 混写的时候，是会调用setup内部的声明的变量，还是用外部的，哪个优先级更高？
这篇文章说，会用setup内部声明的变量。

问题来了
setup内部调用生命周期钩子函数（应该是叫 “ 调用 ” 吧，或者叫 “ 声明 ”？）和外部的哪个优先级更高？
我不知道，有机会验证一下（TODO

这篇文章里面 Vue3.0学习第二天 setup和生命周期 提及setup：

• setup 是一个新的组件选项,但同时他也是组合api的起点。
• setup可以理解为在vue2.x的beforeCreate钩子前执行(组件实例创建前)执行。
• 这就意味着在setup函数中不能使用this获取vue实例，this 此时是 undefined
• 模板中需要使用的数据和函数,必须要在setup中返回,返回时是一个对象(有点像vue2中的data)。

插件不一样

VSCode中：禁用 Vue2 的Vetur，启用Volar