Vue 3 setup

HuangQiaoqi發表於2024-05-04
Vue

【一】setup函式

setup函式的設計是為了使用vue3的組合式api，setup函式必須要有返回值，在裡面定義的變數必須要返回出去才能在html裡面使用

【1】定義變數

setup() {
    // 1.定義變數 跟正常寫js是一樣的
    let name = 'hqq'
    let age = 18 

    // setup函式必須要有返回值，返回定義的物件後才能使用這個物件
    return {name, age}
  }

【2】定義函式

setup() {
    // 2.定義函式
    let handleAdd = () => {
      age++ 
    }
    let handleChangeName = (n) => {
      name = n
    }
    // setup函式必須要有返回值，返回定義的物件後才能使用這個物件
    return {handleAdd, handleChangeName}
  }

【二】實現響應式

上面定義的變數是沒辦法實現響應式的，如果要實現響應式，給變數用ref或者reactive函式包裹，使其變成物件，這時候他的值就存在了物件的value屬性裡面

【1】ref函式

  setup() {
    // 1.定義變數 跟正常寫js是一樣的
    let name = ref('hqq')
    let age = ref(18) //用ref包裹實現響應式
    // 2.定義函式
    let handleAdd = () => {
      age.value++ // age用ref包裹之後就變成了一個物件，它的值在這個物件value裡面，所以需要.value++
    }
    let handleChangeName = (n) => {
      name.value = n
    }
    // setup函式必須要有返回值，返回定義的物件後才能使用這個物件
    return {name, age, handleAdd, handleChangeName}
  }

【2】recative函式

  setup() {
    // 1.定義物件 要想物件裡面的內容實現響應式，就需要用reactive函式包裹起來物件
    let userInfo = reactive({
      name: 'hqq',
      age: 18,
      hobby: '運動'
    })
    // 2.定義函式
    let handleAdd = () => {
      userInfo.age++
    }
    return {userInfo, handleAdd}
  }

【三】計算屬性

計算屬性computed，需要匯入使用，computed函式包含一個物件，物件裡面可以寫兩個函式，get和set，get用於獲取值，必須要有返回值，返回值就是獲取的值，set用於修改值，set函式有一個引數，就是修改後的值。

【1】get函式

setup() {
    // 定義一個userName物件，裡面定義firstname和lastname
    let userName = reactive({
      firstName: '',
      lastName: ''
    })
    // 計算屬性computed裡面填寫一個物件
    // 物件裡面可以寫兩個函式 get 和 set
    userName.fullName = computed({
      // get函式是用於獲取值 必須要有返回值
      get(){
        return userName.firstName + userName.lastName
      }
    })
    return {userName}
  }

【2】set函式

  setup() {
    // 定義一個userName物件，裡面定義firstname和lastname
    let userName = reactive({
      firstName: '',
      lastName: ''
    })
    userName.fullName = computed({
      get(){...},
      // set函式用於修改值，可以傳一個引數，這個引數就是修改後的值
      set(value){
        // 這裡面可以寫修改的邏輯
        console.log(value)
      }
    })
    return {userName}
  }

【四】監聽屬性

【1】監聽一個物件

  setup() {
    let age = ref(18)
    let handleAdd = () => {
      age.value++
    }
    // 監聽一個物件
    // 監聽屬性watch函式，第一個引數寫監聽的物件，
    // 第二個引數是一個函式，函式的有兩個引數,分別是修改後的資料和修改前的資料
    watch(age, (newValue, oldValue) => {
      console.log('新年齡' + newValue)
      console.log('老年齡' + oldValue)
    })
    return {age, handleAdd}
  }

【2】監聽物件裡的某個值

  setup() {
      // 定義一個物件
    let person = reactive({
      name: 'hqq',
      age: 18,
      hobby: '運動'
    })
    }
	// 定義點選事件 點選物件的name變成吳彥祖
    let handleChangeName = () => {
      person.name = '吳彥祖'
    }

    // 監聽物件的某個值
    // watch函式的第一個引數也變成了一個函式，需要返回一個需要監聽的值
    // 第二個引數是一個函式，函式的有兩個引數,分別是修改後的資料和修改前的資料
    watch(() => person.name, (newValue, oldValue) => {
      // 在這裡可以寫一些變化後的邏輯
      console.log('變吳彥祖啦')
    })
    return {age, handleAdd, person, handleChangeName}
  }

【五】生命週期

【六】toRefs

​ 在Vue 3中，toRefs函式是一個實用工具，用於將響應式物件轉換為可被解構的引用物件。在Vue 2中，直接使用ref或reactive建立的響應式物件，如果直接解構或訪問其屬性，會導致丟失響應性。而toRefs可以解決這個問題。

<template>
  <main>
    <p>姓名---{{name}}</p>
    <p>年齡---{{age}}</p>
    <p>愛好---{{ hobby}}</p>
  </main>
</template>

<script>
import {toRefs} from "vue";

export default {
  name: 'home',
  setup() {
    // 使用了toRefs包裹起來物件之後 person就變成了一個可被解構的響應式物件
    let person = toRefs({
      name: 'hqq',
      age: 18,
      hobby: '運動'
    })
    // 透過...展開，就可以直接在html中以鍵名獲取對應的value
    return {...person}
  }

}
</script>

【七】script setup語法糖

相關文章