vue | props 、script、script setup

<script>
export default {
  props: {
    propA: String,
    propB: Number,
    propC: {
      type: Boolean,
      default: true
    },
    propD:Object,
  }
}
</script>

#####################################################
<script setup>
defineProps(['propA', 'propB', 'propC'])
</script>


###################################################

<script setup> 是Vue 3中引入的一个新的语法糖，旨在简化组件的编写。与传统的 <script> 不同，<script setup> 的目标是减少冗余代码，提高开发体验。

Props 的声明：

在 <script> 中，你需要显式声明组件的 props，并在 export default 中定义。
在 <script setup> 中，你使用 defineProps 来声明 props，使得声明更为简洁，而不需要在 export default 中重复。
Data 和 Methods：

在 <script> 中，你需要使用 data 函数来声明响应式的数据，而方法则需要在 methods 中定义。
在 <script setup> 中，你只需要直接使用变量声明和函数声明，而不需要额外的 data 和 methods 字段。Vue 会根据上下文自动推断数据是否是响应式的。
引入和导出：

在 <script> 中，你需要使用 import 导入其他模块，并在 export default 中导出组件。
在 <script setup> 中，你只需要写逻辑代码，不需要显式导入和导出，Vue 会自动处理。

#######################################################
vue2 和 vue3 的一些差别
Composition API：

Vue 3 引入了 Composition API，允许将代码按照逻辑关系组织，而不是选项对象的形式。这使得代码更容易组织和复用。
Vue 2 使用的是选项 API，而 Vue 3 提供了 Composition API 作为更灵活、强大的替代方案。
性能优化：

Vue 3 进行了多项性能优化，包括更好的虚拟 DOM 算法（基于 Proxy），提高了渲染效率。
Vue 3 的 Tree-shaking 支持更好，可以更有效地减小 bundle 大小。
模块化设计：

Vue 3 的内部进行了模块化设计，使得库的体积更小，可以更轻松地按需引入功能。
新的生命周期钩子：

Vue 3 引入了新的生命周期钩子，以更好地支持 Composition API。
TypeScript 支持：

Vue 3 对 TypeScript 的支持更为友好，提供了更好的类型推断和声明。

```vue
###########################################################
//vue2
//BlogPost.vue
<script >

export default{
  props:{
    title:String,
    zhang:String
  }
}
  
</script>

<template>
  <h4>{{ title }}</h4>
  <h1>{{zhang}}</h1>
</template>

###############################################################
<script setup>
//App.vue
import { ref } from 'vue'
import BlogPost from './BlogPost.vue'

  
const posts = ref([
  { id: 1, title: 'My journey with Vue' ,zhang:"zhangsan1"},
  { id: 2, title: 'Blogging with Vue' ,zhang:"zhangsan2"},
  { id: 3, title: 'Why Vue is so fun' ,zhang:"zhangsan3"}
])
</script>

<template>
	<BlogPost
  	v-for="post in posts"
	  :key="post.id"
  	:title="post.title"
		:zhang ="post.zhang"
	></BlogPost>
</template>

##############################################################
//vue3
//BlogPost.vue
<script setup>
defineProps(['title','zhang'])
</script>

<template>
  <h4>{{ title }}</h4>
  <h1>{{zhang}}</h1>
</template>

##################################################################
//App.vue
<script setup>
import { ref } from 'vue'
import BlogPost from './BlogPost.vue'
  
const posts = ref([
  { id: 1, title: 'My journey with Vue', zhang:"zhangsan1" },
  { id: 2, title: 'Blogging with Vue' ,zhang:"zhangsan2"},
  { id: 3, title: 'Why Vue is so fun' ,zhang:"zhangsan3"}
])
</script>

<template>
	<BlogPost
  	v-for="post in posts"
	  :key="post.id"
  	:title="post.title"
		:zhang ="post.zhang"
	></BlogPost>
</template>

#################################################
v-if v-else

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

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">click</button>

	<h1 v-if="awesome">Vue is awesome!</h1>
	<h1 v-else>Oh no 😢</h1>
</template>
################################################################
if
else if
else if
else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
#############################################################################
更新
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

####################################################################
reactive 和ref

参考这篇