官方文檔（ 中文版 ）：https://vue3js.cn/docs/zh/
創(chuàng)建一個Vue3.0的項目
1佩憾、npm init vite-app vue3.0 2羹蚣、cd vue3.0 3巨坊、npm install 4义图、npm run dev
image
此時疾层，項目已經創(chuàng)建成功２靡稀９毒丁０刚尽！
接下來棘街，我們先來體驗一下Vue3.0的新東西
?? Object.defineProperty => Proxy
重構了虛擬 DOMOptionApi => Composition API
**1蟆盐、setup() ** beforeCreate 、created 之前執(zhí)行
setup() 函數是 vue3 中遭殉，專門為組件提供的新屬性石挂。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口, vue3取消了beforeCreate 、created兩個鉤子险污，統一用setup代替, 該函數相當于一個生命周期函數痹愚，vue中過去的data，methods蛔糯，watch里伯，computed等全部都用對應的新增api寫在setup()函數中2、ref() 聲明單一基礎數據類型 返回值是響應式對象
創(chuàng)建一個響應式的數據對象渤闷，ref() 函數調用的返回值是一個對象疾瓮，這個對象上只包含一個 value 屬性, 只在setup函數內部訪問ref函數需要加**.value****3、reactive() ** 聲明單一對象 （注意：解構會破壞代理proxy即雙向綁定）
reactive() 函數接收一個普通對象飒箭，返回一個響應式的數據對象, 想要使用創(chuàng)建的響應式數據也很簡單狼电，創(chuàng)建出來之后，在setup中return出去弦蹂，直接在template中調用即可; 在reactive（）函數中訪問ref（）函數創(chuàng)建的對象不用**.value**4肩碟、isRef() 判斷是否是通過ref（）函數創(chuàng)建出來的對象
5、toRefs() 從組合函數返回反應對象
toRefs() 函數可以將 reactive() 創(chuàng)建出來的響應式對象凸椿，轉換為普通的對象削祈，只不過，這個對象上的每個屬性節(jié)點，都是 ref() 類型的響應式數據6髓抑、computed() 計算屬性 可創(chuàng)建只讀咙崎，和可讀可寫兩種
1) 只讀 let fullName = computed(() => msg.value + '~' + name) 2）可讀可寫 let fullName2 = computed({ get: () => number.value + state.step, set: (v) => number.value = v })7、watch()
watch 函數用來偵聽特定的數據源吨拍，并在回調函數中執(zhí)行副作用褪猛。默認情況是懶執(zhí)行的，也就是說僅在偵聽的源數據變更時才執(zhí)行回調羹饰。 1） 監(jiān)聽 reactive（ ）聲明的數據 單數據監(jiān)聽： watch( ( )=> reactiveV.name, (n, o)=>{ }) 多數據監(jiān)聽： watch([( )=> reactive.name, ( )=> reactive.sex], ([name, sex], [oldName, oldSex])=> { }) 2) 監(jiān)聽 ref（ ）聲明的數據 單數據監(jiān)聽： watch(age,(n, o)=>{ }) 多數據監(jiān)聽： watch([age, weight], ([newAge, newWeight], [oldAge, oldWeight])=> { }) 3）取消監(jiān)聽 const stop = watch(age,(n, o)=>{ }) setTimeout(() => { stop() }, 1000) // 一秒后取消對age的監(jiān)聽8伊滋、LifeCycle Hooks(新的生命周期)
onBeforeMount(() => { console.log('onBeforeMount') }) onMounted(() => { console.log('onMounted') }) onBeforeUpdate(() => { console.log('onBeforeUpdate') }) onUpdated(() => { console.log('onUpdated') }) onBeforeUnmount(() => { console.log('onBeforeUnmount') }) onUnmounted(() => { console.log('onUnmounted') })9、Template refs 通過refs 來回去真實dom元素
<h3 ref="h3">hello</h3> 想要得到h3的dom 在2.x中 this.$refs.h3 在3.0中如下： 1）在setUp函數中聲明 let h3 = ref(null)队秩，并return出去h3 2）在onMounted（）函數中打印 h3.value你會得到（*<h3 data-v-c5362648="">hello</h3*>）10笑旺、global Properties vue3.0 的全局配置
Vue 2.x 通過 Vue.prototype擴展 vue3.0 通過app.config.globalProperties.$api = 'http://www.baidu.com' 在setUp函數中通過 const { ctx } = getCurrentInstance() ctx.$api ( http://www.baidu.com )11、Suspense
異步組件在默認情況下是可掛起的馍资。這意味著如果它在父鏈中有一個 <Suspense>筒主，它將被視為該 <Suspense> 的異步依賴。在這種情況下迷帜，加載狀態(tài)將由 <Suspense> 控制物舒，組件自身的加載、錯誤戏锹、延遲和超時選項將被忽略冠胯。異步組件可以選擇退出 Suspense 控制，并通過在其選項中指定 suspensable:false锦针，讓組件始終控制自己的加載狀態(tài)荠察。
??：1、Vue3.0template可以有多個根結點
2奈搜、創(chuàng)建組件需要用defineComponent包裹悉盆。
看看Vuex的使用
在setup（）函數中使用store中的state，commits馋吗，actions 首先焕盟，獲取ctx const { ctx } = getCurrentInstance() 此時ctx.$store就是我們想要的store ，OK宏粤，想咋用就咋用了
image
作者：Nicholas_liang
鏈接：http://www.reibang.com/p/9e78d2d6aa34
來源：簡書
著作權歸作者所有脚翘。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處绍哎。
