「前端Vue學習系列」二、Vue基礎篇

言

Hi，大家好，我是希留。

上篇文章帶大家認識了Vue，以及初始化了一個Vue工程的項目。今天繼續介紹一下Vue的一些基礎用法。

一、Vue項目的目錄結構
二、基本語法

1.基本數據渲染和指令
2.雙向數據綁定
3.修飾符
4.縮寫
5.計算屬性
6.偵聽屬性
7.條件渲染
8.列表渲染
9.過濾器

一、Vue項目的目錄結構

使用開發工具（idea、webstorm、vscode…）打開Vue項目。由于后端用idea的比較多，這里以idea為例（需要安裝Vue.js插件）,打開后目錄結構如下：

如上圖所示，Vue的目錄結構主要由以下部分組成：

my-vue-project
    ├--- build
    ├--- config
    ├--- node_modules
    └--- src
         ├--- assets
         └--- components
         ├--- router
         └--- App.vue
         ├--- main.js
    ├--- static
    └--- package.json

build ：構建相關，用來存放項目構建腳本，對項目進行編譯打包
config ：配置相關，用來存放基本的配置文件
node_modules ：用來存放的是項目的所有依賴
src ：存放項目的源碼
assets ：主題字體等靜態資源
components ：全局公用組件
router ：路由
App.vue ：入口頁面
main.js ：入口加載組件初始化等
static ：第三方不打包資源
package.json ：定義了項目的所有依賴，包括開發時依賴和發布時依賴

二、基本語法

1、基本數據渲染和指令

你看到的 v-bind 特性被稱為指令。指令帶有前綴 v-

除了使用插值表達式{{}}進行數據渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）

代碼如下：

<template>
  <div class="hello">
    <!-- 如果要將模型數據綁定在html屬性中，則使用 v-bind 指令
     此時title中顯示的是模型數據-->
    <h1 v-bind:title="message">
      {{content}}
    </h1>

    <!-- v-bind 指令的簡寫形式：冒號（:） -->
    <h1 :title="message">
      {{content}}
    </h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content: '我是標題',
      message: '頁面加載于 ' + new Date().toLocaleString()
    }
  }
}
</script>

運行項目，瀏覽器打開地址，可看到頁面正常渲染出來數據。

2、雙向數據綁定

雙向數據綁定和單向數據綁定；

使用 v-model 進行雙向數據綁定：

 <template>
  <div class="hello">
	...
		
    !-- v-bind:value只能進行單向的數據渲染 -->
    <input type="text" v-bind:value="searchMap.keyWord">

    <!-- v-model 可以進行雙向的數據綁定  -->
    <input type="text" v-model="searchMap.keyWord">

    <p>您要查詢的是：{{searchMap.keyWord}}</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      searchMap: {
        keyWord: '希留'
      }
    }
  }
}
</script>

使用v-bind綁定的數據是單向的，并不會隨著輸入值的改變而改變

使用 v-model 指令才能把數據雙向綁定

3、修飾符

修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。

例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()方法
(即阻止事件原本的默認行為)

示例代碼如下：

<template>
  <div class="hello">
	...
		
    <!-- 修飾符用于指出一個指令應該以特殊方式綁定。
     這里的 .prevent 修飾符告訴 v-on 指令對于觸發的事件調用js的 event.preventDefault()方法
     （該方法表示阻止表單提交的默認行為） -->
    <form action="save" v-on:submit.prevent="onSubmit">
      <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
      </label>
    </form>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      user: {}
    }
  },
  methods: {
    onSubmit() {
      if (this.user.username) {
        console.log('提交表單')
      } else {
        alert('請輸入用戶名')
      }
    }
  }
}
</script>

當在方法上加了.preven修飾符后，點擊保存只會執行onSubmit方法。若沒加，則會先執行onSubmit方法在執行action里的方法。

4、縮寫

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的 attribute。Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫，它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于 attribute 名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。

v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

5、計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。

所以Vue提供了計算屬性。對于任何復雜邏輯，你都應當使用計算屬性。且計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。

示例代碼如下：

<template>
  <div class="hello">
	...
	<p>原始值: "{{ message }}"</p>
    <!-- 1、插值數據綁定中使用表達式 -->
    <p>反轉消息: {{ message.split('').reverse().join('') }}</p>
    <!-- 2、使用計算屬性 -->
    <p>反轉消息: "{{ reversedMessage }}"</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自來水來自海上 haha'
    }
  },
  computed: {
      reversedMessage () {
          return this.message.split('').reverse().join('')
      }
  }
}
</script>

6、偵聽屬性

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

示例代碼如下：

<template>
  <div class="hello">
	...
	<p>
      Ask a yes/no question:
      <input v-model="question">
      <button @click="getAnswer()">提問</button>
    </p>
    <p>{{ answer }}</p>
  </div>
</template>
  

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自來水來自海上 haha'
    }
  },
  methods: {

    getAnswer() {
      var vm=this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer=_.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer='網找不到API接口. ' + error
        })
    }
  },
  watch: {
    // 如果 `question` 發生改變，這個函數就會運行
    question: function (newQuestion, oldQuestion) {
      this.answer='等待您停止輸入...'
      this.getAnswer()
    }
  }
}
</script>

在這個示例中，使用 watch 選項允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。

7、條件渲染

v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。
v-if 是一個指令，所以必須將它添加到一個元素上。v-else-if，充當 v-if 的“else-if 塊”，可以連續使用；
v-else 指令來表示 v-if 的“else 塊”，必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣，不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display。v-show 不支持元素，也不支持 v-else。

兩者對比：

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

8、列表渲染

我們可以用 v-for 指令基于一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute，建議盡可能在使用 v-for 時提供 key attribute，因為它是 Vue 識別節點的一個通用機制，key 并不僅與 v-for 特別關聯。

示例代碼如下：

<!-- 1、遍歷數據列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
      ]
    }
  },

}
</script>

9、過濾器

過濾器常用來處理文本格式化的操作。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式

過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示

```javascript
<!-- 1、遍歷數據列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
        <!-- | 管道符號：表示使用后面的過濾器處理前面的數據 -->
        <td>{{item.gender | genderFilter}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 ,gender: 1},
        { id: 2, username: 'peter', age: 28 ,gender: 1},
        { id: 3, username: 'andy', age: 38 ,gender: 0}
      ]
    }
  },
  // filters 定義局部過濾器，只可以在當前vue實例中使用
  filters: {
      genderFilter(gender) {
        return gender===1 ? '男' : '女'
      }
  }
}
</script>

結語

好了，以上就是今天要講的內容，本文簡單介紹了Vue的基礎使用，相信大家對Vue有了進一步的認識了，趕快動手操作起來吧，gogogo。

然 vue-router 4 大多數 API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學習學習它是如何使用的。

一、安裝并創建實例

安裝最新版本的 vue-router

npm install vue-router@4 

或

yarn add vue-router@4

安裝完成之后，可以在 package.json 文件查看vue-router的版本

"dependencies": {
 "vue": "^3.2.16",
 "vue-router": "4"
},

新建 router 文件夾，新建 index.js文件：

import { createRouter,createWebHashHistory } from "vue-router";

const routes=[
 {
  path:'',
  component:()=>import("../views/login/index.vue")
 },
 {
  path:'/home',
  component:()=>import("../views/home/index.vue")
 }
]

const router=createRouter({
 history:createWebHashHistory('/'),
 routes
})

export default router

然后在main.js 中引入 router 。

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"

const app=createApp(App)
app.use(router)
app.mount('#app')

注意：之前 component 引入組件的時候，后邊可以省略 .vue 后綴，但在 vue-router 4這不能省略后綴，否則就報錯了。

二、vue-router4 新特性

2.1、動態路由

addRoute 動態添加路由時，有兩種情況，分別為：

//動態添加路由--默認添加到根
router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue")
})

//動態添加子路由
router.addRoute('my',{
 path:'/info',
 component:()=>import("../views/my/info.vue")
})

添加子路由時，第一個屬性值是父級路由的 name 屬性值。

2.2、與 composition 組合

在事件中獲取 router ，進行路由跳轉等操作。

<template>
  <button @click="backToHome">跳轉到首頁</button>
</template>

<script>
import { useRouter } from "vue-router"
export default {
 setup(){
  const router=useRouter()
  return{
   backToHome(){
    router.push("/")
   },
  }
 }
}
</script>

通過 useRouter 獲取到路由之后再進行操作。也可以對當前路由route進行操作。以下是監聽route.query的案例：

<template>
  <div>監聽路由變化</div>
</template>

<script>
import { useRouter,useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"
export default {
 setup(){
  const route=useRoute()
  //route時響應式對象，可監控變化
  watch(()=>route.query,query=>{
   console.log('最新的',query)
  })
 }
}
</script>

三、導航守衛

導航守衛主要用來通過跳轉或取消的方式守衛導航，有很多種方式植入路由導航中：全局的、單個路由獨享的或者組件級的。

3.1、全局守衛

router.beforeEach((to,from,next)=>{
 console.log('全局前置守衛');
})
router.afterEach((to,from)=>{
 console.log('全局后置鉤子');
})

與之前的使用都一樣，沒有任何變化。

3.2、路由獨享守衛

router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue"),
 beforeEnter:(to,from)=>{
  console.log('路由獨享守衛');
 }
})

3.3、組件內的守衛

組件內的守衛與之前使用不同，vue-router4中，需要從vue-router內引入需要的插件。

<script>
import {  onBeforeRouteLeave } from "vue-router"
export default {
 setup(){
 onnBeforeRouteLeave((to,from)=>{
  const answer=window.confirm('是否確認離開')
  if(answer){
   console.log('不離開');
   return false
  }
  })
 }
}
</script>

四、vue-router4 發生破壞性變化

4.1、實例創建方式

//以前創建方式
const router=new VueRouter({
 
})
new Vue({
 router,
 render:h=>h(App)
}).$mount("#app")

//vue-router4創建方式
import { createRouter } from "vue-router"
const router=createRouter({

})
createApp(App).use(router).mount("#app")

4.2、模式聲明方式改變

//之前
const router=new VueRouter({
 mode:"hash"
})

//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
 history:createWebHashHistory()
})

之前的mode替換成了 history ，它的選項變化分別為：

history -> createWebHistory
hash -> createWebHashHistory
abstract -> createMemoryHistory

4.3、base屬性被合并

base 選項被移至 createWebHistory 中。

//之前
const router=new VueRouter({
 base:"/"
})

//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
 history:createWebHashHistory('/')
})

4.4、通配符 * 被取消

//之前
{
 path:'*',
 component:()=>import("../components/NotFound.vue")
}

//vue-router 4
{
 path:'/:pathMatch(.*)*',
 component:()=>import("../components/NotFound.vue")
}
//是一個正則表達式

4.5、isReady() 替代 onReady

//之前
router.onReady(onSuccess,onError)//成功和失敗回調

//vue-router 4
router.isReady().then(()=>{
 //成功
}).catch(err=>{
 //失敗
})

4.6、scrollBehavior 變化

const router=createRouter({
 scrollBehavior(to, from, savedPosition) {
  // 始終滾動到頂部
  return { top: 0, left:0 }
 },
})
//之前使用的{ x:0, y:0 } 替換成了 { top: 0, left:0 }

4.7、keep-alive 和 transition 必須用在 router-view 內部

//之前
<keep-alive>
 <router-view />
</keep-alive>

//vue-router 4
<router-view v-slot="{component}">
 <keep-alive>
  <component :is="component" />
 </keep-alive>
</router-view>

4.8、router-link 移除了一部分屬性

移除 append 屬性

//之前
<router-link to="child" append >跳轉<router-link>

//vue-router 4
<router-link :to="append( $route.path , 'child' )" append >跳轉<router-link>

tag 被移除

//之前
<router-link to="/" tag="span">跳轉</router-link>

//vue-router 4
<router-link to="/" custom>
 <span>跳轉</span>  
</router-link>

event 被移除

4.9、route 的 parent 屬性被移除

4.10、pathToRegexpOptions選項被移除，其他內容替換

4.11、routes選項是必填項

4.12、跳轉不存在的命名路由報錯

之前跳轉到不存在的路由，頁面是空的，會重定向根路徑，這是不合理的，所以vue3報錯了。

4.13、缺少必填參數會拋出異常

4.14、命名子路由如果 path 為空的時候，不再追加 /

之前生成的 url 會自動追加一個 / ，如："/dash/"。副作用：給設置了 redirect 選項的子路由帶來副作用。

識星球：寫代碼那些事
----
如果你有收獲｜歡迎｜點贊｜關注｜轉發
----
這里會定期更新｜大廠的開發｜架構｜方案設計
這里也會更新｜如何摸魚｜抓蝦

歡迎來到寫代碼那些事！在現代Web開發領域，Vue.js已經成為最受歡迎的JavaScript框架之一。Vue3作為Vue.js的最新版本，引入了許多強大的特性和改進，使得構建現代化的Web應用更加簡單、高效。本教程將帶您深入了解Vue3的核心概念、特性和最佳實踐，幫助您快速上手并構建出色的Web應用。

目錄：

前言：為什么選擇Vue3？
Vue3核心概念與基本語法
組件化開發與單文件組件
響應式數據與狀態管理
Vue Router：路由管理
Vue3生命周期與Hooks函數
總結

1. 前言：為什么選擇Vue3？

Vue3作為Vue.js的最新版本，不僅保留了Vue.js的優點，還引入了許多性能優化和新特性，如編譯優化、Composition API等。這些改進使得Vue3在開發大型Web應用時更具競爭力。

1. 編譯優化： Vue3引入了一種新的編譯器，稱為“基于Proxy的編譯器”，它能夠生成更高效、更精簡的渲染函數代碼。這意味著在運行時，Vue3可以更快地解析和渲染模板，從而提升應用的性能。

2. Composition API： Vue3引入了Composition API，這是一種全新的API風格，使得組件邏輯更加清晰、可復用。相比于Vue2的Options API，Composition API允許開發者更自由地組織組件代碼，將相關邏輯聚集在一起，提高了代碼的可維護性和可測試性。

3. 更好的TypeScript支持： Vue3對TypeScript的支持更加友好。通過Composition API和TypeScript結合使用，開發者可以在編碼過程中獲得更好的類型提示和錯誤檢查，減少潛在的bug。

4. 更小的包體積： Vue3優化了包的體積，使得下載和加載速度更快。這對于提升用戶體驗和移動端應用尤為重要。

5. 更快的渲染性能： Vue3在渲染性能方面進行了優化，比Vue2更快地更新視圖，從而提升了應用的響應速度。

6. 改進的響應式系統： Vue3的響應式系統使用了Proxy代理對象，使得數據的響應式追蹤更精確，減少了不必要的渲染。

7. Teleport組件： Vue3引入了Teleport組件，可以輕松實現Portal功能，將組件的內容渲染到DOM的不同位置，方便處理彈出層等場景。

8. 兼容Vue2： Vue3在設計時考慮到了與Vue2的兼容性，因此可以逐步升級現有的Vue2項目到Vue3，而不需要全部重寫代碼。

2. Vue3核心概念與基本語法

學習Vue3的核心概念，包括Vue實例、模板語法、指令等。通過示例代碼，演示如何創建一個簡單的Vue3應用。

步驟 1：引入Vue3

首先，你需要在項目中引入Vue3。你可以通過以下方式獲取Vue3的CDN鏈接：

<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>

步驟 2：創建Vue實例

在HTML文件中，我們創建一個容器元素，用于渲染Vue應用。然后，你可以在JavaScript文件中創建Vue實例，并將其與容器元素關聯起來。

<!DOCTYPE html>
<html>
<head>
  <title>Vue3 Demo</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

// app.js
const app=Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

在這個示例中，我們使用Vue.createApp創建了一個Vue應用實例，并將其關聯到id為app的HTML元素上。data選項定義了我們需要在應用中使用的數據，這里是一個簡單的message。

步驟 3：使用模板語法

Vue的模板語法允許我們將數據綁定到DOM元素上，實現動態更新。

在上面的示例中，我們在<div id="app">內部使用了雙大括號{{ }}來綁定數據。這樣，當message數據發生變化時，頁面上的文本也會隨之更新。

<div id="app">
  {{ message }}
</div>

步驟 4：運行應用

將上述HTML和JavaScript代碼保存為相應的文件，然后在瀏覽器中打開HTML文件。你將看到頁面上顯示著"Hello, Vue3!"，這是由Vue實例中的message數據驅動的。

這只是一個簡單的Vue3應用示例，但它涵蓋了Vue的核心概念：創建Vue實例、使用模板語法綁定數據。通過這個基礎示例，你已經邁出了學習Vue3的第一步。隨著深入學習，你將學會更多關于指令、組件、狀態管理等方面的知識，從而能夠構建更復雜、更強大的Vue應用。

3. 組件化開發與單文件組件

了解Vue3中組件化開發的重要性，學習如何創建可復用的組件。介紹單文件組件的概念，以及如何使用Vue CLI來構建項目。

為什么組件化很重要？

組件化開發有許多優勢：

可復用性： 組件可以在不同的地方被多次使用，避免了重復編寫相似的代碼，提高了代碼的可復用性。
可維護性： 將界面拆分成小的組件，使得每個組件的邏輯相對獨立，易于維護和測試。
可擴展性： 新的功能可以通過添加新的組件來實現，而不會影響到其他組件。
團隊協作： 不同的團隊成員可以同時開發不同的組件，降低了開發的耦合度。

Vue3中的組件

在Vue3中，組件可以通過單文件組件的方式創建，這是一種將模板、腳本和樣式封裝在一個文件中的方式。單文件組件的后綴通常是.vue，它包括三個部分：

模板（Template）： 定義了組件的外觀和結構，使用Vue的模板語法來描述。
腳本（Script）： 包含組件的行為邏輯，可以訪問組件的數據和方法。
樣式（Style）： 定義了組件的樣式，可以使用CSS或其他預處理器。

使用Vue CLI構建項目

Vue CLI是一個用于快速構建Vue項目的腳手架工具。它提供了項目初始化、開發服務器、打包等一系列功能，讓你能夠專注于開發而不用搭建開發環境。

以下是使用Vue CLI構建項目的簡要步驟：

安裝Vue CLI：

在命令行中運行以下命令來全局安裝Vue CLI。

npm install -g @vue/cli

創建項目： 運行以下命令來創建一個新的Vue項目。

vue create my-project

在這里，my-project是你項目的名稱，你可以根據實際情況進行替換。

啟動開發服務器： 進入項目目錄，運行以下命令來啟動開發服務器。

cd my-project npm run serve

這將啟動一個本地開發服務器，你可以在瀏覽器中訪問項目。

創建組件：在項目中創建單文件組件，將模板、腳本和樣式寫在同一個文件中。

<template>
  <div>
    <!-- 模板內容 -->
  </div>
</template>

<script>
export default {
  // 腳本內容
}
</script>

<style>
  /* 樣式內容 */
</style>

使用Vue CLI構建項目，配合單文件組件的方式，可以讓你更加高效地開發Vue應用。同時，這也符合現代前端開發中組件化的趨勢，讓你的代碼更具可維護性和擴展性。

4. 響應式數據與狀態管理

深入探討Vue3的響應式數據原理，以及如何使用Vuex進行全局狀態管理。示例代碼將帶您一步步構建一個簡單的任務管理應用。

Vue3的響應式數據原理

Vue3采用了Proxy代理對象來實現響應式數據。當你訪問代理對象的屬性時，會自動進行依賴收集，當屬性被修改時，會自動觸發依賴更新。

下面是一個簡單的示例，演示了如何在Vue3中創建響應式數據：

import { reactive, readonly } from 'vue';

const state=reactive({
  count: 0,
});

// 訪問屬性，觸發依賴收集
console.log(state.count);

// 修改屬性，觸發依賴更新
state.count++;

// 使用readonly創建只讀的響應式數據
const readOnlyState=readonly(state);

使用Vuex進行全局狀態管理

Vuex是Vue官方提供的狀態管理庫，用于管理全局的狀態。它可以幫助你在應用中集中管理和共享狀態，使得狀態變化更可預測、可追蹤。

以下是一個簡單的步驟，演示如何使用Vuex構建一個簡單的任務管理應用：

安裝Vuex： 在命令行中運行以下命令來安裝Vuex。

npm install vuex

創建Vuex Store： 在項目中創建一個Vuex store，定義應用的狀態和相關操作。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      tasks: [],
    };
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    },
  },
});

在應用中使用Vuex： 在應用的入口文件中引入Vuex store，然后將它注冊到Vue實例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app=createApp(App);
app.use(store);
app.mount('#app');

在組件中使用Vuex： 在組件中使用mapState、mapMutations等輔助函數來訪問和修改Vuex中的狀態。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
    </ul>
    <input v-model="newTask" @keyup.enter="addNewTask" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['tasks']),
  },
  data() {
    return {
      newTask: '',
    };
  },
  methods: {
    ...mapMutations(['addTask']),
    addNewTask() {
      this.addTask({ id: Date.now(), text: this.newTask });
      this.newTask='';
    },
  },
};
</script>

通過上述步驟，你可以構建一個簡單的任務管理應用，使用Vuex來管理全局狀態。Vuex的核心概念包括state、mutations、actions等，它們協同工作，使得狀態管理更加結構化和可維護。

總結起來，Vue3的響應式數據原理基于Proxy代理，可以輕松地創建響應式數據。而使用Vuex進行全局狀態管理可以幫助你更好地管理應用的狀態，讓代碼更加可預測和可追蹤。

5. Vue Router：路由管理

介紹Vue Router的使用，展示如何在Vue3中實現頁面路由和導航。通過示例代碼，創建一個多頁面的應用。

Vue Router是Vue官方提供的路由管理器，用于在單頁面應用中實現頁面路由和導航。它允許你根據不同的URL路徑加載不同的組件，實現多頁面的效果。

以下是一個簡單的步驟，演示如何在Vue3中使用Vue Router創建一個多頁面的應用：

安裝Vue Router： 在命令行中運行以下命令來安裝Vue Router。

npm install vue-router

創建路由配置： 在項目中創建一個路由配置文件，定義不同URL路徑和對應的組件。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const routes=[
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

const router=createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在應用中使用Vue Router： 在應用的入口文件中引入Vue Router配置，并將其注冊到Vue實例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app=createApp(App);
app.use(router);
app.mount('#app');

在組件中實現導航： 在組件中使用<router-link>組件來實現導航鏈接，使用<router-view>組件來渲染路由對應的組件。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

通過上述步驟，你可以在Vue3中使用Vue Router創建一個多頁面的應用。Vue Router的核心概念包括<router-link>用于導航鏈接，<router-view>用于渲染路由組件，以及路由配置等。

在這個多頁面應用中，不同的URL路徑會對應不同的組件，用戶可以通過導航鏈接在不同的頁面之間進行切換。

6. Vue3生命周期與Hooks函數

了解Vue3中的生命周期和Hooks函數，掌握如何在不同階段執行自定義操作。比較Vue2的Options API與Vue3的Composition API。

在Vue3中，生命周期鉤子函數的命名和觸發時機與Vue2相比有所改變。同時，Vue3引入了Composition API，這是一種新的組合式API，與Vue2中的Options API有所不同。

生命周期鉤子函數

Vue3中的生命周期鉤子函數名稱和觸發時機有所調整，主要有以下幾點變化：

beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

在Vue3中，新增了一些更細粒度的生命周期鉤子函數：

onRenderTracked: 在渲染時被追蹤時觸發
onRenderTriggered: 在渲染時觸發重繪時觸發

Composition API

Composition API是Vue3中引入的一種全新的API風格，旨在提供更靈活、可組合的代碼復用方式。相對于Vue2的Options API，Composition API更加強調邏輯的組合和復用，使得代碼更易維護和擴展。

Composition API的特點：

邏輯組合： 你可以將邏輯相關的代碼組合在一起，更方便地進行重用。
邏輯復用： 可以將多個組合函數結合在一起，形成更大規模的邏輯復用單元。
邏輯分離： 不同功能的邏輯可以被拆分成不同的組合函數，讓代碼更模塊化。
TypeScript支持： Composition API更適合與TypeScript等靜態類型語言一起使用。

下面是一個簡單的對比示例，展示Vue2的Options API和Vue3的Composition API的差異：

Vue2中使用Options API：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    this.count++;
  },
};
</script>

Vue3中使用Composition API：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count=ref(0);
    onMounted(()=> {
      count.value++;
    });
    return { count };
  },
};
</script>

總結而言，Vue3中的生命周期鉤子函數名稱和Composition API帶來了一些變化，讓開發者能夠更加靈活地組織和復用代碼邏輯。Composition API可以使代碼更加模塊化，方便維護和拓展。

總結：

Vue3作為最新的Vue.js版本，帶來了眾多的改進和新特性，使得開發現代化的Web應用更加高效和便捷。通過本教程，您將深入學習Vue3的核心概念、語法和最佳實踐，掌握構建出色Web應用的技能。無論您是初學者還是有經驗的開發者，都能在這里找到有價值的內容，開啟現代Web開發之旅。

#vue#?

在線咨詢

上一篇：《寄生蟲》橫掃奧斯卡，Python告訴你這部電影到底
下一篇：哇噻，簡直是個天才，無需scroll事件就能監聽到元

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「前端Vue學習系列」二、Vue基礎篇

一、Vue項目的目錄結構

二、基本語法

1、基本數據渲染和指令

2、雙向數據綁定

3、修飾符

4、縮寫

5、計算屬性

6、偵聽屬性

7、條件渲染

8、列表渲染

9、過濾器

一、安裝并創建實例

二、vue-router4 新特性

三、導航守衛

四、vue-router4 發生破壞性變化

1. 前言：為什么選擇Vue3？

2. Vue3核心概念與基本語法

步驟 3：使用模板語法

步驟 4：運行應用

3. 組件化開發與單文件組件

為什么組件化很重要？

Vue3中的組件

使用Vue CLI構建項目

4. 響應式數據與狀態管理

使用Vuex進行全局狀態管理

5. Vue Router：路由管理

6. Vue3生命周期與Hooks函數

生命周期鉤子函數

Composition API

您的項目需求