vue 文档摘要

vue 文档摘要I

composition API 的两个形式
composition API setup() { const line ref<string> = '' return { line } } [2]
composition API <script setup lang="ts"> // 不推荐 [1]



[1]
不推荐的理由是一旦引入它了（指开始使用 <script setup lang="ts"> ）， 就要引入了更多额外内容 -- 来完成最最基本工作。没事找事吗？

defineProps
defineEmits
defineExpose

https://vue3.chengpeiquan.com/efficient.html
https://vuejs.org/api

[2]
https://vuejs.org/guide/typescript/composition-api.html#without-script-setup

vue 文档摘要II
0
组件的继承和派生

extends
https://vuejs.org/api/options...
https://facing-dev.github.io/...
how to use extends with vue composition API when you want to extends a component?
https://stackoverflow.com/que...
https://www.reddit.com/r/vuej...
(generic component as base component) https://logaretm.com/blog/gen...

vue 文档摘要III

0
local

https://dev.to/the_one/are-yo...

（如何出活儿快而不出错？顺序
https://logaretm.com/blog/gen... ）

= vue 文档摘要IV =

1
component props 该怎么写？

11
在使用 js 的时候

<script>

111
在使用 options API 的时候

props option 1

props: {
  message: String 
  message2: { type: String, default: '' }
}

12
在使用 ts 的时候

<script lang="ts">

defineComponent 1

121
在使用 composition API 的时候

props option 1 2 3

<template>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue'

export default defineComponent({
  props: {
    message: String 
    message2: { type: String, default: '' }
  },
  ...
}
</script>

2
component mounted 生命周期 该怎么写？

21
在使用 js 的时候

<script>

211
在使用 options API 的时候

mounted option 1 2

mounted() {
  console.log()
}

22
在使用 ts 的时候

<script lang="ts">

defineComponent 1

221
在使用 composition API 的时候 1

<template>
</template>

<script lang="ts">
import { defineComponent, onMounted, type PropType } from 'vue'

export default defineComponent({
  props: {
    message: String 
    message2: { type: String, default: '' }
  },
  setup() {
    onMounted(() => console.log())

    return { }
  }
}
</script>

也就是说，关于这种语法，其实不用看的了
a-<script setup lang="ts">
b-<script setup> onMounted
c-<script setup lang="ts">
d-<script setup> defineProps

<script setup>
<script setup lang="ts">

然而，这些可以看

<template>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, type PropType } from 'vue'
import Child from '@cp/Child.vue'

export default defineComponent({
  components: {
    Child,
  },
  props: {
    message: String,
  },
  ____ () {
    onMounted(() => console.log())
    return { }
  }
})

https://vue3.chengpeiquan.com/component.html
https://vue3.chengpeiquan.com/efficient.html

https://vue3.chengpeiquan.com/upgrade.html#添加-vscode-插件

---

为什么 <script setup> <script setup lang="js"> <script setup lang="ts"> 是拙劣的营销:

• 开启 ts ？直接用就 <script lang="ts"> ts defineComponent 就 OK 了，不需要 <script setup lang="ts">
• 开启 composition API ? 直接用 const line ref<string> = '' return { line } 就 OK 了，不需要 <script setup>
• 开启生命周期？直接用 onMounted in setup() { return { } } 就可以了，不需要 <script setup>

0-it unlocks a lot of possibilities 1 2-各种徒增的新写法 caveat 比如 defineExpose 2-defineEmits 报道 报道