<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