了解一下组件

组件是 vue 的基础元素之一（另一个是 js 文件），那么Vue的组件是什么呢？

1. 是一个js的对象。（不是class、function）
2. 必须有特定名称和功能的属性（包括方法、和事件）

然后经过Vue的“解析”，我们就看到类丰富多彩的页面效果。

option API 风格的组件

以前Vue只有optionAPI风格的组件，这种方式适合于新手，可以快速上手，但是对于习惯其他语言的人来说，就会感到很别扭。

我们还是先看看组件需要的元素：

• 基础
  • data：私有成员
  • props：属性
  • methods：方法
  • emits：内部事件
  • expose：外部事件
• 响应
  • watch：监听工具
  • computed：计算，其实还是监听
• 生命周期
  • created：创建完成后
  • 其他略（太多了不一一搬运了）
• 渲染
  • template：模板
  • render：不太了解
  • compilerOptions：不太了解
  • slots：插槽
• 组合共享
  • provide/inject：依赖注入
  • mixins、extends：共享
• 其他
  • name：组件名称
  • inheritAttrs：是否继承父组件给的Attrs
  • componts：注册局部组件
  • directives：注册自定义指令

蓝色的表示，compositionAPI 也支持的属性。

优点呢就是，你想实现的功能统统都放在组件的对应的属性里即可，不用想其他的。 缺点就是不够灵活，像响应性相关的、生命周期等不能分离出去（放在单独的js文件里），不方便重用和抽象。

虽然提供了 mixins 和 extends 实现共用功能，但是用起来也不太明确。

当初跳过 Vue2 直接学的 Vue3，所以就不写Option的代码了。

compositionAPI 风格的组件

总结 OptionAPI 的缺点，Vue3 推出 compositionAPI 来提高灵活性，响应性相关的、生命周期等都可以放在单独的js文件里面，然后引入到组件里面，通过 setup 和组件结合起来，这样就灵活多了。

组件还是需要一些特定属性的对象：

• 基础
  • props：属性
  • setup()
• 渲染
  • template：模板
• 响应、组合共享、生命周期
  • 在 setup 里面定义，也可以放在外部 js 文件里。
• 其他
  • name：组件名称
  • inheritAttrs：是否继承父组件给的Attrs
  • componts：注册局部组件
  • directives：注册自定义指令

对比一下，compositionAPI 的组件不需要那么多的属性了。

举个例子

<template>
  你好：{{ foo }}
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'

  export default defineComponent({
    name: 'nf-demo-db-init',
    props: {
      name: { type: String }
    },
    components: {
      // 注册组件
    },
    setup(props) {
      const foo = ref('hello word')
      return {
        foo 
      }
    }
  })
</script>

这种方式也是可以直接在浏览器里面运行，当然需要加载 vue.global.js 文件，由 Vue 的运行时进行解析。

当然这些都不是重点，重点是可以从外部 js 文件里面加载。

script setup

Vue3 提出 compositionAPI 之后，总有人说 setup 里面需要 return，还有其他的地方，比较麻烦。

于是又提出了 script setup 的方式，这是个大号语法糖，不知道是一开始就这么想的，还是后来大家的提议才这么改的。

总之，vue3 刚推出来的时候，script setup 并不是很好用，有些小问题，直到vue3.3+，才变得更好用。

举个例子

<template>
  你好：{{ foo }}
</template>

<script setup lang="ts">
  import { reactive, toRaw, isReactive, ref } from 'vue'
  // 定义 props
  const props = defineProps<{
    name: string 
  }>()
  
  const foo = ref('hello word')
</script>

不需要使用 components 注册组件，setup 里面也不用写 return 了。代码可以简洁很多。

编译器宏

script setup 里面使用了大量的编译器宏，比如 defineProps、defineEmit等，这些不是原生的 js 成员（你以为他们是函数？其实并不是），无法直接在浏览器里面运行，只能在“编译”的时候才能被识别和编译，变成另一种形态，也就是 compositionAPI 风格的组件的形式。

所以 script setup 的方式无法在 CDN 的模式（像jQuery那样加载 vue.global.js 就开干的方式）下使用。