vue | props 、script、script setup

2024-01-09 14:50:10
<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>

文章来源:https://blog.csdn.net/ttxiaoxiaobai/article/details/135479111
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。