一、項(xiàng)目創(chuàng)建

1、檢查vue-cli腳手架版本（vue -V），低版本的要更新（npm install @vue/cli -g

）

2、創(chuàng)建項(xiàng)目（vue create vue3test ）

選擇default（直接回車enter）,初始化項(xiàng)目

3、進(jìn)入項(xiàng)目文件夾，更新vue版本（vue add vue-next）

4、運(yùn)行項(xiàng)目（npm run serve）

5、瀏覽器上訪問（http://localhost:8081），初始化頁(yè)面展示

二、Vue3API

vue3主要是低侵入式的、函數(shù)式的 API，需要用到的函數(shù)都必須提前引入。例如：引入ref函數(shù)：import { ref} from 'vue'

1、setup函數(shù)

返回一個(gè)對(duì)象，則對(duì)象的屬性將會(huì)被合并到組件模板的渲染上下文。

其他所有的引入函數(shù)都必須在其內(nèi)部執(zhí)行。

創(chuàng)建組件實(shí)例，然后初始化 props ，緊接著就調(diào)用setup 函數(shù)。從生命周期鉤子的視角來看，它會(huì)在 beforeCreate 鉤子之前被調(diào)用

<script> export default {setup(){console.log("steup")},beforeCreate(){console.log("beforeCreate")},created(){console.log("created")} } </script>

瀏覽器打印順序：

2、響應(yīng)式系統(tǒng) API

（1）、ref

接受一個(gè)參數(shù)值并返回一個(gè)響應(yīng)式且可改變的 ref 對(duì)象。ref 對(duì)象擁有一個(gè)指向內(nèi)部值的單一屬性 .value。主要用于數(shù)字、字符串的創(chuàng)建。

動(dòng)態(tài)修改ref對(duì)象的值時(shí)，需要利用.value去修改。但是setup 返回的 ref 在模板中會(huì)自動(dòng)解開，不需要寫 .value。

點(diǎn)擊按鈕，展示的num的值就會(huì)變?yōu)?999

<template><div class="hello"><p>{{num}}</p><p>{{str}}</p><button @click="onChange">修改num</button></div> </template> <script>import {ref} from 'vue' export default {setup(){let num = ref(333)let str = ref('fffff');let onChange = ()=>{num.value = 9999;}return{num,str,onChange}} } </script>

（2）、reactive

接收一個(gè)普通對(duì)象然后返回該普通對(duì)象的響應(yīng)式代理。

<template><div class="hello"><p>{{Orville's Ideas and Interests}}</p><button @click="onChange">修改name</button></div> </template> <script>import {reactive} from 'vue'export default {setup(){let obj = reactive({name:'tom',age:20});let onChange = ()=>{Orville's Ideas and Interests = "Json";}return{obj,onChange}}} </script>

（3）、computed

傳入一個(gè) getter 函數(shù)，返回一個(gè)默認(rèn)不可手動(dòng)修改的 ref 對(duì)象。

當(dāng)點(diǎn)擊按鈕時(shí)，proNum不變，瀏覽器會(huì)提示‘Write operation failed: computed value is readonly’

<template><div class="hello"><p>{{proNum}}</p><button @click="onChange">修改proNum</button></div> </template> <script>import {ref,computed} from 'vue'export default {setup(){const num = ref(5)const proNum = computed(() => num.value + 1)let onChange = ()=>{proNum.value += 10;}return{proNum,onChange}}} </script>

如果要computed 可以修改值，則需要傳入一個(gè)擁有 get 和 set 函數(shù)的對(duì)象，創(chuàng)建一個(gè)可手動(dòng)修改的計(jì)算狀態(tài)。

<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改proNum</button></div> </template> <script>import {ref,computed} from 'vue'export default {setup(){const num = ref(1)const proNum = computed({set:(val)=>{num.value = val+10;},get:()=>num.value})let onChange = ()=>{proNum.value = 10;console.log(num)}return{num,onChange}}} </script>

（4）、readonly

傳入一個(gè)對(duì)象（響應(yīng)式或普通）或 ref，返回一個(gè)原始對(duì)象的只讀代理。一個(gè)只讀的代理是“深層的”，對(duì)象內(nèi)部任何嵌套的屬性也都是只讀的。

點(diǎn)擊按鈕，瀏覽器中提示‘Set operation on key "value" failed: target is readonly’

<template><div class="hello"><p>{{readNum}}</p><button @click="onChange">修改readNum</button></div> </template> <script>import {ref,readonly} from 'vue'export default {setup(){const num = ref(1)let readNum = readonly(num)let onChange = ()=>{readNum.value = 10;}return{readNum,onChange}}} </script>

（5）、watch

需要偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。默認(rèn)情況是懶執(zhí)行的，也就是說僅在偵聽的數(shù)據(jù)源變更時(shí)才執(zhí)行回調(diào)。

<template><div class="hello"><p>{{num}}</p><p>{{state.name}}</p><button @click="onChange">修改num-name</button></div> </template> <script>import {ref,reactive,watch} from 'vue'export default {setup(){// 偵聽一個(gè) reactive 一個(gè)數(shù)據(jù)源const state = reactive({ name: 'tom' });watch(() => state.name,(name, prevName) => {console.log(prevName,name)});// 直接偵聽一個(gè) ref 一個(gè)數(shù)據(jù)源const num = ref(1);watch(num, (num, prevNum) => {console.log(prevNum,num)});// 偵聽多個(gè)數(shù)據(jù)源watch([num,state], ([num,name], [prevNum,prevName]) => {console.log(prevNum,num+"-----"+prevName.name,name.name)});let onChange = ()=>{state.name = 'Json';num.value = 10;};return{state,num,onChange}}} </script>

（6）、watchEffect

立即執(zhí)行傳入的一個(gè)函數(shù)，并響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)。

<template><div class="hello"><p>{{num}}</p></div> </template> <script>import {ref,watchEffect} from 'vue'export default {setup(){const num = ref(1);const stop = watchEffect(()=>{console.log(num.value)})setTimeout(()=>{num.value = 10},2000)// 停止偵聽 調(diào)用stop 瀏覽器上不會(huì)打印 10stop();return{num}}} </script>

三、生命周期鉤子函數(shù)

與 2.x 版本生命周期相對(duì)應(yīng)的組合式 API beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted

這些生命周期鉤子注冊(cè)函數(shù)只能在 setup() 期間同步使用， 因?yàn)樗鼈円蕾囉趦?nèi)部的全局狀態(tài)來定位當(dāng)前組件實(shí)例（正在調(diào)用 setup() 的組件實(shí)例）, 不在當(dāng)前組件下調(diào)用這些函數(shù)會(huì)拋出一個(gè)錯(cuò)誤。

組件實(shí)例上下文也是在生命周期鉤子同步執(zhí)行期間設(shè)置的，因此，在卸載組件時(shí)，在生命周期鉤子內(nèi)部同步創(chuàng)建的偵聽器和計(jì)算狀態(tài)也將自動(dòng)刪除。

<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改num</button></div> </template> <script>import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'export default {setup(){onBeforeMount(() => {console.log('onBeforeMount!')});onMounted(() => {console.log('mounted!')});onBeforeUpdate(() => {console.log('onBeforeUpdate!')});onUpdated(() => {console.log('updated!')});onBeforeUnmount(() => {console.log('onBeforeUnmount!')});onUnmounted(() => {console.log('unmounted!')});const num = ref(1);let onChange = ()=>{num.value = 10;};return{num,onChange}}} </script>

總結(jié)

以上是生活随笔為你收集整理的webstrom 运行 vue项目_vue3.0创建项目及API讲解（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。