VUE3.0 + TS 項目實戰 （2）基本寫法

vue3.0兼容vue2.0寫法 理解為多了個setup (composition api)實現功能拆分 代碼復用 以適應大型項目

解決vue文件在編輯同一功能時 變量和方法需寫在vue文件的不同緯度（data methods）造成開發體驗上下反復跳

同時解決mixin數據源不明確性

composition api

reactive (返回對象的響應式副本)

同vue2.0寫法

ref  (接受一個內部值並返回一個響應式且可變的 ref)

reactive ref更改值

watch (與2.0watch等效)

生命周期函數

provide & inject

import { reactive, provide , inject} from 'vue'

const data = reactive({
 name: 'name'
})
// 根級/父級組件
// provide 這里如果提供的是響應式變量，inject也會觸發響應
provide('provideName', data.name)


// 子級/孫級組件
setup () {
  const name = inject('provideName')
  return {
    name
  }
}