Vue 2 生命週期 | Vue 3 生命週期 | 執行時間說明 |
beforeCreate | setup | #元件建立前執行 |
created | setup | #元件建立後執行 |
#beforeMount | onBeforeMount | #元件掛載到節點上之前執行 |
mounted | onMounted | 元件掛載完成後執行 |
beforeUpdate | onBeforeUpdate | 元件更新前執行 |
updated | onUpdated | 元件更新完成之後執行 |
beforeDestroy | onBeforeUnmount | 元件卸載之前執行 |
destroyed | onUnmounted | 元件卸載完成後執行 |
errorCaptured | onErrorCaptured | 當擷取一個來自子孫元件的例外時激活鉤子函數 |
#可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。
script setup 语法糖
它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
自动注册属性和方法无需返回，直接使用
1.<script setup> 语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。
2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！
使用方式也很简单，只需要在 script 标签加上 setup 关键字即可
<script setup>
</script>
登入後複製
组件核心 API 的使用
组件自动注册
在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
示例：
<template>
<Child />
</template>
<script setup>
import Child from '@/components/Child.vue'
</script>
登入後複製
定义组件的 props
defineProps ----> [用来接收父组件传来的 props] 代码示列：
通过defineProps指定当前 props 类型，获得上下文的props对象。
示例：
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
title: String,
})
</script>
<!-- 或者 -->
<script setup>
import { ref,defineProps } from 'vue';
type Props={
msg:string
}
defineProps<Props>();
</script>登入後複製
定义 emit
defineEmit ----> [子组件向父组件事件传递]
使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。
代码示列：
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['change', 'delete'])
</script>登入後複製
父子组件通信
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
//父组件
<template>
<Child @getChild="getChild" :title="msg" />
</template>
<script setup>
import { ref } from 'vue'
import Child from '@/components/Child.vue'
const msg = ref('parent value')
const getChild = (e) => {
// 接收父组件传递过来的数据
console.log(e); // child value
}
</script>登入後複製
//子组件
<template>
<div @click="toEmits">Child Components</div>
</template>
<script setup>
// defineEmits,defineProps无需导入，直接使用
const emits = defineEmits(['getChild']);
const props = defineProps({
title: {
type: String,
defaule: 'defaule title'
}
});
const toEmits = () => {
emits('getChild', 'child value') // 向父组件传递数据
}
// 获取父组件传递过来的数据
console.log(props.title); // parent value
</script>登入後複製
子组件通过 defineProps 接收父组件传过来的数据，子组件通过 defineEmits 定义事件发送信息给父组件
useSlots() 和 useAttrs()
获取 slots 和 attrs
注：useContext API 被弃用，取而代之的是更加细分的 api。
可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。
<template>
<component v-bind='attrs'></component>
</template>
<srcipt setup>
const attrs = useAttrs();
<script>登入後複製
使用示例：
// 旧
<script setup>
import { useContext } from 'vue'
const { slots, attrs } = useContext()
</script>
// 新
<script setup>
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
</script>登入後複製
defineExpose API
defineExpose ----> [组件暴露出自己的属性]
传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。
<script setup> 的组件默认不会对外部暴露任何内部声明的属性。
如果有部分属性要暴露出去，可以使用 defineExpose
注意：目前发现defineExpose暴露出去的属性以及方法都是 unknown 类型，如果有修正类型的方法，欢迎评论区补充。
如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例：
//子组件
<template>
{{msg}}
</template>
<script setup>
import { ref } from 'vue'
let msg = ref("Child Components");
let num = ref(123);
// defineExpose无需导入，直接使用
defineExpose({
msg,
num
});
</script>登入後複製
//父组件
<template>
<Child ref="child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from '@/components/Child.vue'
let child = ref(null);
onMounted(() => {
console.log(child.value.msg); // Child Components
console.log(child.value.num); // 123
})
</script>登入後複製
定义响应变量、函数、监听、计算属性computed
<script setup >
import { ref,computed,watchEffect } from 'vue';
const count = ref(0); //不用 return ，直接在 templete 中使用
const addCount=()=>{ //定义函数，使用同上
count.value++;
}
//创建一个只读的计算属性 ref：
const plusOne = computed(() => count.value + 1)
// 创建一个可写的计算属性 ref
const plusOne = computed({
get: () => count.value + 1,
set: (val) => { count.value = val - 1 }
})
//定义监听，使用同上 //...some code else
watchEffect(()=>console.log(count.value));
</script>登入後複製
watchEffect和watch区别
1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）
2、watch需要传递监听的对象，watchEffect不需要
3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下
4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。
reactive
返回一个对象的响应式代理。
<script setup>
import { reactive, onUnmounted } from 'vue'
const state = reactive({
counter: 0
})
// 定时器 每秒都会更新数据
const timer = setInterval(() => {
state.counter++
}, 1000);
onUnmounted(() => {
clearInterval(timer);
})
</script>
<template>
<div>{{state.counter}}</div>
</template>登入後複製
使用ref也能达到我们预期的'counter',并且在模板中,vue进行了处理，我们可以直接使用counter而不用写counter.value.
ref和reactive的关系:
ref是一个{value:'xxxx'}的结构，value是一个reactive对象
ref 暴露变量到模板
曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明：
export const count = ref(0)
登入後複製
不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量
<script setup >
import { ref } from 'vue'
const counter = ref(0);//不用 return ，直接在 templete 中使用
const timer = setInterval(() => {
counter.value++
}, 1000)
onUnmounted(() => {
clearInterval(timer);
})
</script>
<template>
<div>{{counter}}</div>
</template>登入後複製
其他 Hook Api
useCSSModule：CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少，不过多做介绍。
useCssVars: 此 api 暂时资料比较少。介绍v-bind in styles时提到过。
useTransitionState: 此 api 暂时资料比较少。
useSSRContext: 此 api 暂时资料比较少。
支持 async await 异步
注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用.
<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
登入後複製
<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()：
<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>
登入後複製
另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。
注意
async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。
定义组件其他配置
配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个 script，在上方写入对应的 export即可，需要单开一个 script。
<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：
- 无法在
<script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。 - 声明命名导出。
- 运行副作用或者创建只需要执行一次的对象。
在script setup 外使用export default，其内容会被处理后放入原组件声明字段。
<script>
// 普通 `<script>`, 在模块范围下执行(只执行一次)
runSideEffectOnce()
// 声明额外的选项
export default {
name: "MyComponent",
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
import HelloWorld from '../components/HelloWorld.vue'
// 在 setup() 作用域中执行 (对每个实例皆如此)
// your code
</script>
<template>
<div>
<HelloWorld msg="Vue3 + TypeScript + Vite"/>
</div>
</template>登入後複製
注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 <keep-alive> 包含或排除或直接检查组件的选项时，你需要这个名字。
(Learning video sharing: web front-end development, Basic programming video)
以上是一文詳解Vue3中的script setup語法糖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
C#開發經驗分享：前端與後端協同開發技巧
Nov 23, 2023 am 10:13 AM
身為C#開發者，我們的開發工作通常包括前端和後端的開發，而隨著技術的發展和專案的複雜性提高，前端與後端協同開發也變得越來越重要和複雜。本文將分享一些前端與後端協同開發的技巧，以幫助C#開發者更有效率地完成開發工作。確定好介面規範前後端的協同開發離不開API介面的交互。要確保前後端協同開發順利進行，最重要的是定義好介面規格。接口規範涉及到接口的命
Django是前端還是後端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交
前端面試官常問的問題
Mar 19, 2024 pm 02:24 PM
在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。
前端怎麼實現即時通訊
Oct 09, 2023 pm 02:47 PM
實作即時通訊的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。詳細介紹：1、WebSocket，它可以在客戶端和伺服器之間建立持久連接，實現即時的雙向通信，前端可以使用WebSocket API來創建WebSocket連接，並透過發送和接收訊息來實現即時通訊；2、Long Polling，是一種模擬即時通訊的技術等等
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
Django：前端和後端開發都能搞定的神奇框架！
Jan 19, 2024 am 08:52 AM
Django：前端和後端開發都能搞定的神奇框架！ Django是一個高效、可擴展的網路應用程式框架。它能夠支援多種Web開發模式，包括MVC和MTV，可以輕鬆地開發出高品質的Web應用程式。 Django不僅支援後端開發，還能夠快速建構出前端的介面，透過模板語言，實現靈活的視圖展示。 Django把前端開發和後端開發融合成了一種無縫的整合，讓開發人員不必專門學習
Golang與前端技術結合：探討Golang如何在前端領域發揮作用
Mar 19, 2024 pm 06:15 PM
Golang與前端技術結合：探討Golang如何在前端領域發揮作用，需要具體程式碼範例隨著互聯網和行動應用的快速發展，前端技術也愈發重要。而在這個領域中，Golang作為一門強大的後端程式語言，也可以發揮重要作用。本文將探討Golang如何與前端技術結合，以及透過具體的程式碼範例來展示其在前端領域的潛力。 Golang在前端領域的角色作為一門高效、簡潔且易於學習的
See all articles
