这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
vue3 使用的越来越广泛, 公司项目开始使用 vue3 ,在 vue 3.2 之后新加入了 script setup 语法糖,上手开始看项目发现对于语法糖的使用有一些迷惑,特此整理,在整理这些内容的同时查阅了大量的资料,自己在这个过程中,对于 vue3 的理解也更深了一些 ~ 希望各位也可以从中有所收获
因为很多地方都不太理解 , 本文的分析程度比较细致 , 甚至可能到了有些太细致的程度 ~
是在单文件组件中使用组合式 API 的 " 编译时 " 语法糖 ,当同时使用 单文件组件 以及 组合式 API 的时 候,
是更为推荐的一种语法方式,它有着更多的优势
但在说这些优势之前需要先说一下,从 Vue 3.2 版本之后才开始加入了 语法糖,这一语法糖的加入让 Vue3 的写法有了大大的改变 ! 相对于原本 Vue 3 的语法,简单了很多很多很多 !
因为 语法糖是依赖于 Vue3 的,所以如果对 Vue3 还没有太多的了解,建议先学习下 Vue3 之后再开始学习
语法糖,直接上来搞这个理解起来容易混乱 [ 本人因为公司使用的是 Vue3+TS ,但是在此之前一直用的是 Vue2 ,直接开始看项目之后属实懵逼了,建议各位同仁循序渐进啊 ~ ]
以下是官方的介绍
在 Vue 3 当中我自己感觉最鲜明的变化就是 Vue 3 中引入了组合式 Api (composition API)
但是使用 Vue3 组合式 API 的时候感觉整个过程比较繁琐
如果需要定义一个方法的话,模板中使用这个方法的时候,需要在 setup 函数中将它返回,模板中需要用到的大量的方法和属性都需要一 一返回 , 这个过程有点难受,时不时的就会漏掉返回这一步导致变量未定义或者 xx not a function 的错误
<script>
import {defineComponent , reactive, ref} from 'vue'
export default defineComponent({
setup(){
// 基本类型变量
const name = ref("你好")
const age = ref(2023)
// 引用类型变量
const book = reactive({name:"月亮",age:"1919"})
// 将变量返回
return{
name,
age,
book
}
}
})
</script>
作为 setup 方法的语法糖,在书写上更加简洁方便,在 setup 函数中,所有 ES 模块导出都被认为是暴露给上下文的值,在
写法中,不需要再手动写 setup(){} .可以直接在 script 标签中书写 setup 的内容,并且不需要做 return 返回处理 .
解决了 setup 需要频繁的将 声明的变量
,函数
,以及 import 引入的内容
通过 return 向外暴漏,才能在 中使用的问题 , setup语法糖的形式最为便捷而且更符合开发者习惯
所以使用 的时候
基本语法
需要启用 语法糖,需要在
代码块加上
setup
属性
也就是说 : 只需在 script 标签上写上 setup 就可以了
<script setup>
console.log('hello script setup')
</script>
里面的代码会被编译成组件 setup() 函数当中的内容
和
的执行时机是不同的
只会在组件第一次被引入的时候执行一次
中的代码会在每次组件实例被创建的时候执行之前说 组合式API (composition API ) 写起来有些繁琐的原因在于需要手动返回模板需要的属性和方法,而在 setup script 中可以省略这一步骤
setup script 不需要写 return ,所以直接声明数据,方法就可以在模板中直接使用了
<template>
<div>
<div> {{ name }} div>
<div> {{ age }} div>
<div> {{ book.name }} div>
<div> {{ book.age }} div>
div>
template>
Vue 3 setup() 语法
传统写法中我们需要在 setup 当中定义变量,并在最后 return
<script>
import {defineComponent , reactive, ref} from 'vue'
export default defineComponent({
setup(){
// 基本数据类型的响应式
const name = ref("你好")
const age = ref(2023)
// 复杂数据类型的响应式
const book = reactive({name:"月亮",age:"1919"})
// 将变量返回
return{
name,
age,
book
}
}
})
</script>