嘗試vue3.x 新特性 - CompositionAPI

一、初試化項目

1、安裝 vue-cli3

npm install -g @vue/cli

2、創建項目

vue create my-project

3、在項目中安裝 composition-api,體驗 vue3 新特性

npm install @vue/composition-api --save

4、在main.js引入，通過 Vue.use() 進行安裝

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

二、setup(props, context){ }

里邊放data數據、生命周期、自定義函數
props : 是參數一，接收 props 數據。
context：是參數二，這個上下文對象中包含了一些有用的屬性。些屬性在 vue 2.x 中需要通過 this 才能訪問到，在 vue 3.x 中，它們的訪問方式如下：

setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }

另外一種簡便寫法 ：將context解構，如下：

//一般用這種，按需引入，節約內存
setup(props,{attrs,slots,parent,root,emit,refs}){
console.log(attrs,slots,....)
}

3.0和2.0對照：

attrs --- this.$attrs
emit  --- this.$emit
listeners --- this.$listeners
parent --- this.$parent
refs --- this.$refs
root --- this.$root

三、reactive (用來聲明對象、數組的數據類型)

1、引入 reactive 函數：

import { reactive } from '@vue/composition-api'

2、reactive 里邊聲明數組/對象

setup() {
     // 創建響應式數據對象
    const state = reactive({count: 0})

     // setup 函數中將響應式數據對象 return 出去，供 template 使用
    return state
}

四、ref(用來聲明基礎數據類型)

ref用來聲明基礎數據

model:'login' ; //vue 2.0寫法

//引入模塊
import { ref } from '@vue/composition-api';
//聲明數據
const model = ref('login');//vue 3.0寫法
//取值方式
console.log(model.value)  //'login'