一、Composition API優勢

相對于vue2的option API Vue3的Composition API設計更有優勢

Composition(組合式)Api?功能分組

Composition(組合式)Api?功能導入復用

組合式Api?所解決的問題

(1)?更好的代碼組織結構

(2)?相同的代碼邏輯可以進行復用

home.vue 3種方式遞進升級

<template><div class="home"><div><p>{{ name }}</p><button @click="getName">姓名</button></div><div><p>{{ age }}</p><button @click="getAge">年齡</button></div></div><HomeB></HomeB> </template><script> // @ is an alias to /src import HelloWorld from "@/components/HelloWorld.vue"; import HomeB from "./HomeB.vue"; // import { ref } from "vue"; import { useName, useAge } from "./user";export default {name: "Home",setup() {// 1.Composition(組合式)Api// const people = {// name: "yusir",// age: 18,// };// const name = ref("");// const getName = () => {// name.value = people.name;// };// const age = ref("");// const getAge = () => {// age.value = people.age;// };// return {// name,// getName,// age,// getAge,// };/* ------------------------ */// 2.Composition(組合式)Api 功能分組// const people = {// name: "yusir",// age: 18,// };// return {// ...useName(people), //展開運算符// ...useAge(people),// };// function useName(people) {// const name = ref("");// const getName = () => {// name.value = people.name;// };// return {// name,// getName,// };// }// function useAge(people) {// const age = ref("");// const getAge = () => {// age.value = people.age;// };// return {// age,// getAge,// };// }/* ------------------------ */// 3.Composition(組合式)Api 功能導入復用// 組合式Api 所解決的問題// (1) 更好的代碼組織結構// (2) 相同的代碼邏輯可以進行復用const people = {name: "yusir",age: 18,};return {...useName(people), //展開運算符...useAge(people),};},components: {HelloWorld,HomeB,}, };</script>

HomeB.vue

<template><div class="home"><div><p>{{ name }}</p><button @click="getName">姓名</button></div><div><p>{{ age }}</p><button @click="getAge">年齡</button></div></div> </template> <script> import { useName, useAge } from "./user";export default {name: "HomeB",setup() {const people = {name: "yusirxiaer",age: 19,};return {...useName(people), //展開運算符...useAge(people),};}, }; </script> <style lang='less' scoped></style>

user.js

import {ref } from 'vue' export function useName(people) {const name = ref("");const getName = () => {name.value = people.name;};return {name,getName,}; } export function useAge(people) {const age = ref("");const getAge = () => {age.value = people.age;};return {age,getAge,}; }

二、setup 入口函數

1.組件創建之前被調用?

setup?先于created執行，this指向windows

created()里打印的this?是proxy對象?指向組件實例

setup函數參數?

Props?Context?(看HomeB子組件)

Context?JavaScript對象

• context.attrs:?Attribute屬性(非響應式對象)非props數據
• context.slots:?插槽（非響應式對象）
• context.emit:?觸發事件的方法?===?this.$emit

2.this不會只指向當前組件實例

3.返回值

返回一個對象,對象的屬性可以直接在模板中進行使用（就像Vue2使用data和methods一樣）

看代碼例子

Home.vue?

<template><HomeB :title="title" desc="父組件傳遞過來的普通屬性" @update="update"><h1>普通的匿名插槽</h1><h2>{{ title }}</h2></HomeB> </template><script> // @ is an alias to /src import HomeB from "./HomeB.vue";export default {name: "Home",setup() {},data() {return {title: "父組件的title",};},created() {console.log("created()打印this");console.log(this);},methods: {update(newTitle) {this.title = newTitle;},},components: {HomeB,}, };</script>

HomeB.vue

<template><div class="homeB"></div> </template> <script> export default {name: "HomeB",props: {title: {type: String,required: true,},},setup(props, { attrs, slots, emit }) {console.log("props:", props);console.log("Attribute (非響應式的對象):", attrs);console.log("插槽:", slots.default());emit("update", "子組件更新數據的事件");}, }; </script> <style lang='less' scoped></style>

?

?

?

?

總結

以上是生活随笔為你收集整理的vue3学习笔记 Composition API setup的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。