初識 Vue3.0

一、setup 函數

setup() 函數是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口, setup 函數會在 beforeCreate 、created 之前執行, vue3也是取消了這兩個鈎子，統一用setup代替, 該函數相當於一個生命周期函數，vue中過去的data，methods，watch等全部都用對應的新增api寫在setup()函數中

 

setup(props, context) {
    context.attrs
    context.slots
    context.emit
    
    return {
        
    }
  }

 

• props: 用來接收 props 數據
• context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數中無法訪問到 this，是個 undefined
• 返回值: return {}, 返回響應式數據, 模版中需要使用的函數

二、reactive 函數

reactive() 函數接收一個普通對象，返回一個響應式的數據對象, 想要使用創建的響應式數據也很簡單，創建出來之后，在setup中return出去，直接在template中調用即可

<template>
  {{name}} // test
<template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
  setup(props, context) {
  
    let state = reactive({
      name: 'test'
    });
    
    return state
  }
});
</script>

三、ref() 函數

ref() 函數用來根據給定的值創建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在setup函數內部訪問ref函數需要加.value

<template>
    <div class="mine">
        {{count}} // 10
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const count = ref<number>(10)
    // 在js 中獲取ref 中定義的值, 需要通過value屬性
    console.log(count.value);
    return {
       count
    }
   }
});
</script>

 

在 reactive 對象中訪問 ref 創建的響應式數據

<template>
    <div class="mine">
        {{count}} -{{t}} // 10 -100
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const count = ref<number>(10)
    const obj = reactive({
      t: 100,
      count
    })
    // 通過reactive 來獲取ref 的值時,不需要使用.value屬性
    console.log(obj.count);
    return {
       ...toRefs(obj)
    }
   }
});
</script>

 

四、isRef() 函數

isRef() 用來判斷某個值是否為 ref() 創建出來的對象

<script lang="ts">
import { defineComponent, isRef, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    const name: string = 'vue'
    const age = ref<number>(18)
    console.log(isRef(age)); // true
    console.log(isRef(name)); // false

    return {
      age,
      name
    }
  }
});
</script>

五、toRefs() 函數

toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref() 類型的響應式數據

<template>
  <div class="mine">
    {{name}} // test
    {{age}} // 18
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
  setup(props, context) {
    let state = reactive({
      name: 'test'
    });

    const age = ref(18)
    
    return {
      ...toRefs(state),
      age
    }
  }
});
</script>

 

六、computed()

該函數用來創造計算屬性，和過去一樣，它返回的值是一個ref對象。 里面可以傳方法，或者一個對象，對象中包含set()、get()方法

6.1 創建只讀的計算屬性

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    const age = ref(18)

    // 根據 age 的值，創建一個響應式的計算屬性 readOnlyAge,它會根據依賴的 ref 自動計算並返回一個新的 ref
    const readOnlyAge = computed(() => age.value++) // 19

    return {
      age,
      readOnlyAge
    }
  }
});
</script>

6.2 通過set()、get()方法創建一個可讀可寫的計算屬性

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    const age = ref<number>(18)

    const computedAge = computed({
      get: () => age.value + 1,
      set: value => age.value + value
    })
    // 為計算屬性賦值的操作，會觸發 set 函數, 觸發 set 函數后，age 的值會被更新
    age.value = 100
    return {
      age,
      computedAge
    }
  }
});
</script>