【vue】vue3+ts setup 基本使用

 

 最近跟着技術胖學習了vue3 和 typescript  記錄一下自己的學習過程

 現在寫一個簡單的菜單選擇功能

<template>
  <div class="hello">
    <div>
      <h2>歡迎光臨呱呱的小店</h2>
      <div>請選擇你喜歡的服務員</div>
    </div>
    <div>
      <button
        v-for="(item, index) in girls"
        :key="index"
        @click="girlsnumFun(index)"
      >
        {{ item }}
      </button>
    </div>
    <div>當前選擇的是 【{{ girlsnum }}】</div>
  </div>
</template>

 

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "hello",
  setup() {
    const girls = ref(["服務員1", "服務員2", "服務員3"]);
    const girlsnum = ref('');
    const girlsnumFun = (item: number) => {
      girlsnum.value = girls.value[item];
    };
    return {
      girls,
      girlsnum,
      girlsnumFun,
    };
  },
});
</script>

　　setup()

• setup 是一個新的組件選項 ，作為在組件內使用 composition api 的入口 
• 調用時機： 創建組件實例 ，初始化props,緊接着調用setup函數。從生命周期鈎子的視角來看，它會在 beforeCreate 鈎子之前被調用
• 返回一個對象，則對象的屬性將會被合並到組件模板的渲染上下文  
• 返回一個函數，函數中也能使用當前 setup 函數作用域中的響應式數據

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  },
}

• 參數

　該函數接收 props 作為其第一個參數 然而不要解構 props 對象，那樣會使其失去響應性

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

注意 props 對象是響應式的，watchEffect 或 watch 會觀察和響應 props 的更新：

export default {
  props: {
    name: String,
  },
  setup(props) {
    watchEffect(() => {
      console.log(`name is: ` + props.name)
    })
  },
}

• 類型定義

interface Data {
  [key: string]: unknown
}

interface SetupContext {
  attrs: Data
  slots: Slots
  emit: (event: string, ...args: unknown[]) => void
}

function setup(props: Data, context: SetupContext): Data

 

　ref()

• ref() 在獲取變量的過程中需要加上.value   注意: setup 返回的 ref 在模板中會自動解開，不需要寫 .value
• ref的實現 ref的底層是reactive ref的對象具有對應的getter和setter。getter總是經過cover 轉化后的響應式對象raw ，觸發Vue的依賴收集。 ref的對象賦值會調用setter 調用會通知deps,通知依賴這一狀態的對象更新，並重新更新raw ,raw被保存為新的響應式包裝對象。
• 注意如果將一個新的 ref 分配給現有的 ref， 將替換舊的 ref
• 注意當嵌套在 reactive Object 中時，ref 才會解套。從 Array 或者 Map 等原生集合類中訪問 ref 時，不會自動解套：

const arr = reactive([ref(0)])
// 這里需要 .value
console.log(arr[0].value)

const map = reactive(new Map([['foo', ref(0)]]))
// 這里需要 .value
console.log(map.get('foo').value)

• 類型定義

interface Ref<T> {
  value: T
}

function ref<T>(value: T): Ref<T>

const foo = ref<string | number>('foo') // foo 的類型: Ref<string | number>

foo.value = 123 // 能夠通過！