本項目綜合運用了 Vue3.0 的新特性。

• 基於 Composition API 即 Function-based API 進行改造，配合 Vue Cli，優先體驗 Vue3 特性
• 使用單例對象模式進行組件通信
• 使用 axios 庫進行網絡請求，weui 庫實現 UI 界面

<code># 安裝依賴
npm install
# 在瀏覽器打開localhost:8080查看頁面，並實時熱更新
npm run serve
# 發佈項目
npm run build/<code>

建議配合 Visual Studio Code 和 Vue 3 Snippets 代碼插件

Dependencies

以下是項目運用到的依賴，@vue/composition-api 配合 vue 模塊讓我們 Vue2.0 版本可以搶先體驗 Vue3.0 的新特性，axios 是輔助我們發送網絡請求得到數據的工具庫，weui是一套與微信原生視覺一致的基礎樣式庫，方便我們快速搭建項目頁面。

<code>"@vue/composition-api": "^0.3.4",
"axios": "^0.19.0",
"core-js": "^3.4.3",
"vue": "^2.6.10",
"weui": "^2.1.3"/<code>

Directory Structure

<code>├── src
│   ├── App.vue                          # 組件入口
│   ├── assets                           # 資源目錄
│   ├── stores/index.js                  # 狀態管理
│   ├── components                       # 組件目錄 

│   │   ├── Header.vue                   # 頭部組件
│   │   ├── Search.vue                   # 搜索框組件
│   │   ├── Panel.vue                    # 列表組件
│   ├── main.js                          # 項目入口
├── public                               # 模板文件
├── vue.config.js                        # 腳手架配置文件
├── screenshot                           # 程序截圖/<code>

Composition API

<code>npm install @vue/composition-api --save/<code>

使用 npm 命令下載了 @vue/composition-api 插件以後，引入該模塊後，需要顯式調用 Vue.use(VueCompositionApi) ，按照文檔在 main.js 引用便開啟了 Composition API 的能力。

<code>// main.js
import Vue from 'vue'
import App from './App.vue'
// 1.引入Composition API模塊
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
// 2.不要漏了顯式調用 VueCompositionApi
Vue.use(VueCompositionApi)

new Vue({
  render: h => h(App),
}).$mount('#app')/<code>

<code>npm install weui --save/<code>

我們同樣使用 npm 安裝 weui 模塊，然後在 main.js 中引入 weui的基礎樣式庫，方便我們可以在全局使用微信基礎樣式構建項目頁面。

<code>// main.js
import Vue from 'vue'
import App from './App.vue'
// 全局引入 `weui` 的基礎樣式庫 

import 'weui'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
  render: h => h(App),
}).$mount('#app')/<code>

回到 App.vue，保留 components 屬性值清空 <template> 模板的內容，刪除

setup

這裡運用了一個全新的屬性 setup ，這是一個組件的入口，讓我們可以運用 Vue3.0 暴露的新接口，它運行在組件被實例化時候，props 屬性被定義之後，實際上等價於 Vue2.0 版本的 beforeCreate 和 Created 這兩個生命週期，setup 返回的是一個對象，裡面的所有被返回的屬性值，都會被合併到 Vue2.0 的 render 渲染函數里面，在單文件組件中，它將配合 <template> 模板的內容，完成 Model 到 View 之間的綁定，在未來版本中應該還會支持返回 JSX 代碼片段。/<template>

<code><template>
  
  
{{name}}

/<template>
/<code>

reactive

在 setup 函數里面， 我們適應了 Vue3.0 的第一個新接口 reactive 它主要是處理你的對象讓它經過 Proxy 的加工變為一個響應式的對象，類似於 Vue2.0 版本的 data 屬性，需要注意的是加工後的對象跟原對象是不相等的，並且加工後的對象屬於深度克隆的對象。

<code>conststate = reactive({name:'Eno Yao'})/<code>

props

在 Vue2.0 中我們可以使用 props 屬性值完成父子通信，在這裡我們需要定義 props 屬性去定義接受值的類型，然後我們可以利用 setup 的第一個參數獲取 props 使用。

<code>export default {
  props: {
    // 標題
    title: String,
    // 顏色
    color: String
  },
  setup(props) {
    // 這裡可以使用父組件傳過來的 props 屬性值
  }
};/<code>

我們在 App.vue 裡面就可以使用該頭部組件，有了上面的 props 我們可以根據傳進來的值，讓這個頭部組件呈現不同的狀態。

<code><template>
  

    
    <header>
    <header>
    <header>
  

/<template>
/<code>

context

setup 函數的第二個參數是一個上下文對象，這個上下文對象中包含了一些有用的屬性，這些屬性在 Vue2.0 中需要通過 this 才能訪問到，在 vue3.0 中，訪問他們變成以下形式：

<code>setup(props, ctx) {
  console.log(ctx) // 在 setup() 函數中無法訪問到 this
  console.log(this) // undefined
}/<code>

具體能訪問到以下有用的屬性：

• root
• parent
• refs
• attrs
• listeners
• isServer
• ssrContext
• emit

完成上面的 Header.vue 我們就編寫 Search.vue 搜索框組件，繼續再 src/components 文件夾下面新建 Search.vue 文件，點擊查看源代碼。

<code><template>
  

     

    
  

/<template>
/<code>

toRefs

可以看到我們上面用了很多的新屬性，我們先介紹 toRefs ，函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref() 類型的響應式數據，配合 v-model 指令能完成數據的雙向綁定，在開發中非常高效。

<code>import { reactive, toRefs } from "@vue/composition-api";
export default {
  setup() {
    const state = reactive({ name: 'Eno Yao' })
  }
  return {
    // 直接返回 state 那麼數據會是非響應式的， MV 單向綁定
    // ...state,
    // toRefs 包裝後返回 state 那麼數據會是響應式的， MVVM 雙向綁定
    ...toRefs(state),
  };
}/<code>

template refs

這裡的輸入框擁有兩個狀態，一個是有輸入框的狀態和無輸入框的狀態，所以我們需要一個布爾值 isFocus 來控制狀態，封裝了一個 toggle 方法，讓 isFocus 值切換真和假兩個狀態。

<code>const toggle = () => {
  // isFocus 值取反
  state.isFocus = !state.isFocus;
};/<code>

然後配合 v-bind:class 指令，讓 weui-search-bar_focusing 類名根據 isFocus 值決定是否出現，從而更改搜索框的狀態。

<code><class>/<code>

這裡的搜索輸入框放入了 v-model 指令，用於接收用戶的輸入信息，方便後面配合列表組件執行檢索邏輯，還放入了 ref 屬性，用於獲取該 標籤的元素節點，配合state.inputElement.focus() 原生方法，在切換搜索框狀態的時候光標自動聚焦到輸入框，增強用戶體驗。

<code>  v-model="searchValue"
  ref="inputElement"
/>/<code>

watch

watch() 函數用來監視某些數據項的變化，從而觸發某些特定的操作，使用之前還是需要按需導入，監聽 searchValue 的變化，然後觸發回調函數里面的邏輯，也就是監聽用戶輸入的檢索值，然後觸發回調函數的邏輯把 searchValue 值存進我們創建 store 對象裡面，方面後面和 Panel.vue 列表組件進行數據通信：

<code>import { reactive, watch } from "@vue/composition-api";
import store from "../stores";
export default {
  setup() {
    const state = reactive({
      searchValue: "",
    });
    // 監聽搜索框的值
    watch(
      () => {
        return state.searchValue;
      },
      () => {
        // 存儲輸入框到狀態 store 中心，用於組件通信
        store.setSearchValue(state.searchValue);
      }
    );
    return {
      ...toRefs(state)
    };
  }
};/<code>

state management

在這裡我們維護一份數據來實現共享狀態管理，也就是說我們新建一個 store.js 暴露出一個 store 對象共享 Panel 和 Search 組件的 searchValue 值，當 Search.vue 組件從輸入框接受到 searchValue 檢索值，就放到 store.js 的 store 對象中，然後把該對象注入到 Search 組件中，那麼兩個組件都可以共享 store 對象中的值，為了方便調試我們還分別封裝了 setSearchValue 和 getSearchValue 來去操作該 store 對象，這樣我們就可以跟蹤狀態的改變。

<code>// store.js
export default {
    state: {
        searchValue: ""
    },
    // 設置搜索框的值
    setSearchValue(value) {
        this.state.searchValue = value
    },
    // 獲取搜索框的值
    getSearchValue() {
        return this.state.searchValue
    }
}/<code>

完成上面的 Search.vue 我們緊接著編寫 Panel.vue 搜索框組件，繼續再 src/components 文件夾下面新建 Panel.vue 文件。

<code><template>
  

    

      
    

    

      
    

  

/<template>
/<code>

lifecycle hooks

Vue3.0 的生命週期鉤子和之前不一樣，新版本都是以 onXxx() 函數註冊使用，同樣需要局部引入生命週期的對應模塊：

<code>import { onMounted, onUpdated, onUnmounted } from "@vue/composition-api";
export default {
  setup() {
    const loadMore = () => {};
    onMounted(() => {
      loadMore();
    });
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    return {
      loadMore
    };
  }
};/<code>

以下是新舊版本生命週期的對比：

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

同時新版本還提供了兩個全新的生命週期幫助我們去調試代碼：

• onRenderTracked
• onRenderTriggered

在 Panel 列表組件中，我們註冊 onMounted 生命週期，並在裡面觸發請求方法 loadMore 以便從後端獲取數據到數據層，這裡我們使用的是 axios 網絡請求庫，所以我們需要安裝該模塊：

<code>npm install axios --save/<code>

封裝了一個請求列表數據方法，接口指向的是 Cnode 官網提供的 API ，由於 axios 返回的是 Promise ，所以配合 async 和 await 可以完美的編寫異步邏輯，然後結合onMounted 生命週期觸發，並將方法綁定到視圖層的查看更多按鈕上，就可以完成列表首次的加載和點擊查看更多的懶加載功能。

<code>// 發送 ajax 請求獲取列表數據
const loadMore = async () => {
  // 獲取列表數據
  let data = await axios.get("https://cnodejs.org/api/v1/topics", {
    params: {
      // 每一頁的主題數量
      limit: 10,
      // 頁數
      page: state.page
    }
  });
  // 疊加頁數
  state.page += 1;
  // 合併列表數據
  state.news = [...state.news, ...data.data.data];
};
onMounted(() => { 

  // 首屏加載的時候觸發請求
  loadMore();
});/<code>

computed

接下來我們就使用另外一個屬性 computed 計算屬性，跟 Vue2.0 的使用方式很相近，同樣需要按需導入該模塊：

<code>import{ computed }from'@vue/composition-api';/<code>

計算屬性分兩種，只讀計算屬性和可讀可寫計算屬性：

<code>// 只讀計算屬性 

let newsComputed = computed(() => news.value + 1)
// 可讀可寫
let newsComputed = computed({
  // 取值函數
  get: () => news.value + 2,
  // 賦值函數
  set: val => {
    news.value = news.value - 3
  }
})/<code>

這裡我們使用可讀可寫計算屬性去處理列表數據，還記得我們上一個組件 Search.vue 嗎，我們可以結合用戶在搜索框輸入的檢索值，配合 computed 計算屬性來篩選對我們用戶有用列表數據，所以我們首先從 store 的共享實例裡面拿到 Search.vue 搜索框共享的 searchValue ，然後利用原生字符串方法 indexOf 和 數組方法 filter 來過濾列表的數據，然後重新返回新的列表數據 newsComputed，並在視圖層上配合 v-for 指令去渲染新的列表數據，這樣做既可以在沒搜索框檢索值的時候返回原列表數據 news ，而在有搜索框檢索值的時候返回新列表數據 newsComputed。

<code>import store from "../stores";
export default {
  setup() {
    const state = reactive({
      // 原列表數據
      news: [],
      // 通過搜索框的值去篩選後的新列表數據
      newsComputed: computed(() => {
        // 判斷是否輸入框是否輸入了篩選條件，如果沒有返回原始的 news 數組
        if (store.state.searchValue) {
          return state.news.filter(item => {
            if (item.title.indexOf(store.state.searchValue) >= 0) {
              return item;
            }
          });
        } else {
          return state.news;
        }
      }),
      searchValue: store.state
    });
  }
}/<code>

閱讀更多 JAVA油膩男 的文章

關鍵字: 瀏覽器 探索 特性