一、項目創(chuàng)建

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

）

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

選擇default（直接回車enter）,初始化項目

3、進入項目文件夾，更新vue版本（vue add vue-next）

4、運行項目（npm run serve）

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

二、Vue3API

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

1、setup函數(shù)

返回一個對象，則對象的屬性將會被合并到組件模板的渲染上下文。

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

創(chuàng)建組件實例，然后初始化 props ，緊接著就調(diào)用setup 函數(shù)。從生命周期鉤子的視角來看，它會在 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

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

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

點擊按鈕，展示的num的值就會變?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

接收一個普通對象然后返回該普通對象的響應(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

傳入一個 getter 函數(shù)，返回一個默認不可手動修改的 ref 對象。

當點擊按鈕時，proNum不變，瀏覽器會提示‘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 可以修改值，則需要傳入一個擁有 get 和 set 函數(shù)的對象，創(chuàng)建一個可手動修改的計算狀態(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

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

點擊按鈕，瀏覽器中提示‘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í)行副作用。默認情況是懶執(zhí)行的，也就是說僅在偵聽的數(shù)據(jù)源變更時才執(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(){// 偵聽一個 reactive 一個數(shù)據(jù)源const state = reactive({ name: 'tom' });watch(() => state.name,(name, prevName) => {console.log(prevName,name)});// 直接偵聽一個 ref 一個數(shù)據(jù)源const num = ref(1);watch(num, (num, prevNum) => {console.log(prevNum,num)});// 偵聽多個數(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í)行傳入的一個函數(shù)，并響應(yīng)式追蹤其依賴，并在其依賴變更時重新運行該函數(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 瀏覽器上不會打印 10stop();return{num}}} </script>

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

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

這些生命周期鉤子注冊函數(shù)只能在 setup() 期間同步使用， 因為它們依賴于內(nèi)部的全局狀態(tài)來定位當前組件實例（正在調(diào)用 setup() 的組件實例）, 不在當前組件下調(diào)用這些函數(shù)會拋出一個錯誤。

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

<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讲解（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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