一、項目創建

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

）

2、創建項目（vue create vue3test ）

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

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

4、運行項目（npm run serve）

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

二、Vue3API

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

1、setup函數

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

其他所有的引入函數都必須在其內部執行。

創建組件實例，然后初始化 props ，緊接著就調用setup 函數。從生命周期鉤子的視角來看，它會在 beforeCreate 鉤子之前被調用

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

瀏覽器打印順序：

2、響應式系統 API

（1）、ref

接受一個參數值并返回一個響應式且可改變的 ref 對象。ref 對象擁有一個指向內部值的單一屬性 .value。主要用于數字、字符串的創建。

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

點擊按鈕，展示的num的值就會變為9999

<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

接收一個普通對象然后返回該普通對象的響應式代理。

<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 函數，返回一個默認不可手動修改的 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 函數的對象，創建一個可手動修改的計算狀態。

<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

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

點擊按鈕，瀏覽器中提示‘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

需要偵聽特定的數據源，并在回調函數中執行副作用。默認情況是懶執行的，也就是說僅在偵聽的數據源變更時才執行回調。

<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 一個數據源const state = reactive({ name: 'tom' });watch(() => state.name,(name, prevName) => {console.log(prevName,name)});// 直接偵聽一個 ref 一個數據源const num = ref(1);watch(num, (num, prevNum) => {console.log(prevNum,num)});// 偵聽多個數據源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

立即執行傳入的一個函數，并響應式追蹤其依賴，并在其依賴變更時重新運行該函數。

<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)// 停止偵聽 調用stop 瀏覽器上不會打印 10stop();return{num}}} </script>

三、生命周期鉤子函數

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

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

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

<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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。