?? ?? 來(lái)嘍镜廉，來(lái)嘍，他真的來(lái)嘍愚战，Vue3.0 ＝课ā！＜帕帷塔插！
官方文檔（ 中文版 ）：https://vue3js.cn/docs/zh/
創(chuàng)建一個(gè)Vue3.0的項(xiàng)目
? ? 1、npm init vite-app vue3.0
? ? 2拓哟、cd?vue3.0
? ? 3想许、npm install
? ? 4、npm run dev
? ? 此時(shí)彰檬，項(xiàng)目已經(jīng)創(chuàng)建成功Ｉ烊小！７瓯丁捧颅！
接下來(lái)，我們先來(lái)體驗(yàn)一下Vue3.0的新東西
??????Object.defineProperty => Proxy
????????重構(gòu)了虛擬
????????DOMOptionApi => Composition API
1较雕、setup()? ? ??beforeCreate 碉哑、created 之前執(zhí)行
????????setup() 函數(shù)是 vue3 中，專門為組件提供的新屬性亮蒋。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口, vue3取消了beforeCreate 扣典、created兩個(gè)鉤子，統(tǒng)一用setup代替, 該函數(shù)相當(dāng)于一個(gè)生命周期函數(shù)慎玖，vue中過(guò)去的data贮尖，methods，watch趁怔，computed等全部都用對(duì)應(yīng)的新增api寫在setup()函數(shù)中
2湿硝、ref()? 聲明單一基礎(chǔ)數(shù)據(jù)類型? 返回值是響應(yīng)式對(duì)象
? ???創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象薪前，ref() 函數(shù)調(diào)用的返回值是一個(gè)對(duì)象，這個(gè)對(duì)象上只包含一個(gè) value 屬性, 只在setup函數(shù)內(nèi)部訪問(wèn)ref函數(shù)需要加.value
3关斜、reactive()? ?聲明單一對(duì)象? （注意：解構(gòu)會(huì)破壞代理proxy即雙向綁定）
????reactive() 函數(shù)接收一個(gè)普通對(duì)象示括，返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象, 想要使用創(chuàng)建的響應(yīng)式數(shù)據(jù)也很簡(jiǎn)單，創(chuàng)建出來(lái)之后痢畜，在setup中return出去垛膝，直接在template中調(diào)用即可; 在reactive（）函數(shù)中訪問(wèn)ref（）函數(shù)創(chuàng)建的對(duì)象不用.value
4、isRef()? ?判斷是否是通過(guò)ref（）函數(shù)創(chuàng)建出來(lái)的對(duì)象
5丁稀、toRefs()? ?從組合函數(shù)返回反應(yīng)對(duì)象
? ??toRefs() 函數(shù)可以將 reactive() 創(chuàng)建出來(lái)的響應(yīng)式對(duì)象吼拥，轉(zhuǎn)換為普通的對(duì)象，只不過(guò)二驰，這個(gè)對(duì)象上的每個(gè)屬性節(jié)點(diǎn)扔罪，都是 ref() 類型的響應(yīng)式數(shù)據(jù)
6、computed()? ??計(jì)算屬性?可創(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 函數(shù)用來(lái)偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用矗积。默認(rèn)情況是懶執(zhí)行的全肮，也就是說(shuō)僅在偵聽的源數(shù)據(jù)變更時(shí)才執(zhí)行回調(diào)。
? ? 1）?監(jiān)聽 reactive（ ）聲明的數(shù)據(jù)
? ? ? ? 單數(shù)據(jù)監(jiān)聽：? ? watch( ( )=> reactiveV.name, (n, o)=>{ })
? ? ? ? 多數(shù)據(jù)監(jiān)聽：? ? ?watch([( )=> reactive.name, ( )=> reactive.sex], ([name, sex], [oldName, oldSex])=> { })
? ? 2)? ?監(jiān)聽 ref（ ）聲明的數(shù)據(jù)
? ? ? ? ?單數(shù)據(jù)監(jiān)聽：? ? ?watch(age,(n, o)=>{ })
? ???????多數(shù)據(jù)監(jiān)聽：? ? ?watch([age, weight], ([newAge, newWeight], [oldAge, oldWeight])=> { })
? ? 3）取消監(jiān)聽
? ? ? ? ? const stop = watch(age,(n, o)=>{ })
? ? ? ? ? setTimeout(() => { stop()?}, 1000)? ? ? ? ? ? ??// 一秒后取消對(duì)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? ??通過(guò)refs 來(lái)回去真實(shí)dom元素
????????<h3 ref="h3">hello</h3>
? ? ? ? 想要得到h3的dom 在2.x中?this.$refs.h3? 在3.0中如下：
? ? ? ? ? 1）在setUp函數(shù)中聲明?let h3 = ref(null)，并return出去h3
? ? ? ? ? 2）在onMounted（）函數(shù)中打印 h3.value你會(huì)得到（<h3 data-v-c5362648="">hello</h3>）
10乍恐、global?Properties??vue3.0 的全局配置
? ??????Vue 2.x? 通過(guò) Vue.prototype擴(kuò)展
? ? ? ? vue3.0 通過(guò)app.config.globalProperties.$api = 'http://www.baidu.com'
? ? ? ? 在setUp函數(shù)中通過(guò) const { ctx } = getCurrentInstance()? ? ? ctx.$api ( http://www.baidu.com )
11评疗、Suspense
? ??異步組件在默認(rèn)情況下是可掛起的。這意味著如果它在父鏈中有一個(gè)?<Suspense>茵烈，它將被視為該?<Suspense>?的異步依賴百匆。在這種情況下，加載狀態(tài)將由?<Suspense>?控制呜投，組件自身的加載加匈、錯(cuò)誤、延遲和超時(shí)選項(xiàng)將被忽略仑荐。異步組件可以選擇退出?Suspense?控制雕拼，并通過(guò)在其選項(xiàng)中指定?suspensable:false，讓組件始終控制自己的加載狀態(tài)粘招。
??：1啥寇、Vue3.0template可以有多個(gè)根結(jié)點(diǎn)
? ? ? ? 2、創(chuàng)建組件需要用defineComponent包裹。
看看Vuex的使用
? ? 在setup（）函數(shù)中使用store中的state示姿，commits甜橱，actions
? ? 首先，獲取ctx? ? const { ctx } = getCurrentInstance()
? ? 此時(shí)ctx.$store就是我們想要的store 栈戳，OK，想咋用就咋用了
暫時(shí)更新這么多难裆，后續(xù)還會(huì)增加子檀，敬請(qǐng)期待！Ｄ烁辍９犹怠！
