Vue相關筆記

来源:https://www.cnblogs.com/ggonekim/archive/2023/02/22/17145722.html
-Advertisement-
Play Games

Promise基本使用 Promise是非同步編程的一種解決方案，用於一個非同步操作的最終完成(或失敗)及其結果值的表示，比傳統的回調函數方案更加合理。 var promise = new Promise((resolve, reject) => {/* executor函數 */ // ... som ...


Promise基本使用

Promise是非同步編程的一種解決方案，用於一個非同步操作的最終完成(或失敗)及其結果值的表示，比傳統的回調函數方案更加合理。

var promise = new Promise((resolve, reject) => {/* executor函數 */
    // ... some code
    if (/* 非同步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
promise.then((value) => {
    //success
}, (error) => {
    //failure
})

簡單實用

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(2000).then((value) => {
    console.log(value); //done
});

var timeoutID = scope.setTimeout(function, [delay, arg1, arg2, ...]);

arg1, ..., argN 可選

附加參數，一旦定時器到期，它們會作為參數傳遞給function

  1. Promise對象在創建後立即執行，then方法指定的回調函數，將在當前腳本所有同步任務執行完才會執行。
  2. 如果調用resolve函數和reject函數時帶有參數，那麼它們的參數會被傳遞給回調函數。reject函數的參數通常是Error對象的實例，表示拋出的錯誤；resolve函數的參數除了正常的值以外，還可能是另一個Promise 實例。
const p = new Promise((resolve,reject) => {
    return reject(new Error('err')); //reject方法的作用，等同於拋出錯誤
    //throw new Error('err');
});

p.then(null, (err) => {
    console.log(err);  //Err: err
});

//--------等價寫法---------
p.catch(err => {
    console.log(err); //Err: err
})

一般總是建議，Promise 對象後面要跟catch方法，這樣可以處理 Promise內部發生的錯誤。catch方法返回的還是一個 Promise 對象，因此後面還可以接著調用then方法。

new Promise(() => {
    throw new Error('err1');
})
    .then(() => {console.log(1);})
    .then(() => {console.log(2);})
    .catch((err) => {
        console.log(err); //Err: err1
        throw  new Error('err2');
    })
    .catch((err) => {console.log(err);})//Err: err2

Promise對象的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。 即：當前catch方法可以捕獲上一個catch方法(包括上一個catch)到當前catch(不包括當前catch)方法之間所有的錯誤，如果沒有錯誤，則當前catch方法不執行。

// bad
new Promise()
    .then((data) => {/* success */ }, (err) => {/* error */ });

// good
new Promise()
    .then((data) => { /* success */ })
    .catch((err) => {/* error */ });

一般來說，不要在then方法裡面定義Reject狀態的回調函數（即then的第二個參數），總是使用catch方法。第二種寫法要好於第一種寫法，理由是第二種寫法可以捕獲前面then方法執行中的錯誤，也更接近同步的寫法。

vue里的export default

export命令用於規定模塊的對外介面。

一個模塊就是一個獨立的文件。該文件內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變數，就必須使用export關鍵字輸出該變數。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

export命令對外輸出了指定名字的變數（變數也可以是函數或類）

與export default命令的區別：import命令接受一對大括弧，裡面指定要從其他模塊導入的變數名。大括弧裡面的變數名，必須與被導入模塊（profile.js）對外介面的名稱相同。

export default命令，為模塊指定預設輸出。

與export命令的區別：其他模塊載入該模塊時，import命令可以為該匿名函數指定任意名字。

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

new VUE()

  • 【Vue.config】 各種全局配置項

  • 【Vue.util】 各種工具函數，還有一些相容性的標誌位

  • 【Vue.set/delete】

  • 【Vue.nextTick】

  • 【Vue.options】 這個options和用來構造實例的options不一樣。這個是Vue預設提供的資源（組件指令過濾器）。

  • 【Vue.use】 通過initUse方法定義

  • 【Vue.mixin】 通過initMixin方法定義

  • 【Vue.extend】通過initExtend方法定義

    ​

new Vue({
  render: h => h(App),
}).$mount("#app")

render函數是vue通過js渲染dom結構的函數createElement，約定可以簡寫為h

實際縮寫前為：

render:function(createElement){
   return createElement(App);
}

實際渲染

import App from './App'
import Vue from 'vue'
new Vue({
  el:'#root',
  template:'<App></App>',
  components:{
    App
  }
})

在Vue構造函數時，需要配置一個el屬性，如果沒有沒有el屬性時，可以使用.$mount('#app')進行掛載。

// 配置了el屬性：
new Vue({
    el:"#app",
    router
});

// 如果沒有配置el屬性，可以使用手動掛載$mount("#app")
new Vue({
    router
}).$mount('#app');

// 該方法是直接掛載到入口文件index.html 的 id=app 的dom 元素上的

render:h=>h(App)

1、ES6的寫法，表示Vue實例選項對象的render方法作為一個函數，接受傳入的參數h函數，返回h(App)的函數調用結果
2、Vue在創建Vue實例時，通過調用render方法來渲染實例的DOM樹
3、Vue在調用render方法時，會傳入一個createElement函數作為參數，也就是這裡的h的實參是createElement函數，然後createElement會以App為參數進行調用。

Vue.use()的作用及原理

官方對 Vue.use() 方法的說明：通過全局方法 Vue.use() 使用插件，Vue.use 會自動阻止多次註冊相同插件，它需要在你調用 new Vue() 啟動應用之前完成，Vue.use() 方法至少傳入一個參數，該參數類型必須是 Object 或 Function，如果是 Object 那麼這個 Object 需要定義一個 install 方法，如果是 Function 那麼這個函數就被當做 install 方法。在 Vue.use() 執行時 install 會預設執行，當 install 執行時第一個參數就是 Vue，其他參數是 Vue.use() 執行時傳入的其他參數。就是說使用它之後調用的是該組件的install 方法。

Vue.use是用來安裝插件的。

它在使用時實際是調用了該插件的install方法，所以引入的當前插件如果含有install方法我們就需要使用Vue.use()，例如在Vue中引用Element如下：

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

因為在Element源碼中會暴露除install方法，所以才需要用Vue.use()引入。

例如：

vueRouter需要在install方法，對Vue實例做一些自定義化的操作：比如在vue.prototype中添加$router、$route屬性、註冊組件

而axios是基於Promise封裝的庫，是完全獨立於Vue的，根本不需要掛載在Vue上也能實現發送請求。

vue-router 為什麼需要放到 new Vue({router}) options 里

插件通常用來為 Vue 添加全局功能。插件的功能範圍沒有嚴格的限制——一般有下麵幾種：

添加全局方法或者屬性。如: vue-custom-element
添加全局資源：指令/過濾器/過渡等。如 vue-touch
通過全局混入來添加一些組件選項。如 vue-router
添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

使用插件也很簡單，通過全局方法 Vue.use() 使用插件，註意它的調用需要在 new Vue() 之前。

但是在使用 vue-router 插件時還需要增加一個 options ：

// 調用 `router.install(Vue)`
Vue.use(router)

new Vue({
  // ...組件選項
  router
})

hash 路由和 history 路由

  1. hash 路由：監聽 url 中 hash 的變化，然後渲染不同的內容，這種路由不向伺服器發送請求，不需要服務端的支持；
  2. history 路由：監聽 url 中的路徑變化，需要客戶端和服務端共同的支持；

hash

—— 即地址欄 URL 中的 # 符號

比如這個 URL：http://www.aaa.com/#/hello，hash 的值為 #/hello。它的特點在於：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對後端完全沒有影響，因此改變 hash 不會重新載入頁面。

history

—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）
這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向後端發送請求。

Hash 模式是使用 URL 的 Hash 來模擬一個完整的 URL，因此當 URL 改變的時候頁面並不會重載。History 模式則會直接改變 URL，所以在路由跳轉的時候會丟失一些地址信息，在刷新或直接訪問路由地址的時候會匹配不到靜態資源。因此需要在伺服器上配置一些信息，讓伺服器增加一個覆蓋所有情況的候選資源，比如跳轉 index.html 什麼的

hash路由 優缺點

  • 優點
    • 實現簡單，相容性好（相容到ie8）
    • 絕大多數前端框架均提供了給予hash的路由實現
    • 不需要伺服器端進行任何設置和開發
    • 除了資源載入和ajax請求以外，不會發起其他請求
  • 缺點
    • 對於部分需要重定向的操作，後端無法獲取hash部分內容，導致後臺無法取得url中的數據，
    • 伺服器端無法準確跟蹤前端路由信息
    • 對於需要錨點功能的需求會與目前路由機制衝突

History(browser)路由 優缺點

  • 優點
    • 對於重定向過程中不會丟失url中的參數。後端可以拿到這部分數據
    • 絕大多數前段框架均提供了browser的路由實現
    • 後端可以準確跟蹤路由信息
    • 可以使用history.state來獲取當前url對應的狀態信息
  • 缺點
    • 相容性不如hash路由(只相容到IE10)
    • 需要後端支持，每次返回html文檔

$route和$router的區別

1.$router是VueRouter的一個對象，通過Vue.use(VueRouter)和Vue構造函數得到一個router的實例對象，這個對象中是一個全局的對象，他包含了所有的路由，包含了許多關鍵的對象和屬性。

2.$route是一個跳轉的路由對象，每一個路由都會有一個$route對象，是一個局部的對象，可以獲取對應的name，path，params，query等

全局事件匯流排

全局事件匯流排說到底就是個對象，我們通常就是用vm對象作為全局事件匯流排使用
把vm對象添加到Vue原型對象 就形成全局事件匯流排（vm）

1、所有的組件對象必須都能看得到這個匯流排對象，因此我們把這個對象放在了Vue原型
2、這個事件匯流排對象必須能調用$on和$emit方法（匯流排對象必須是Vue的實例化對象或者是組件對象）

1、vm.$on( event, callback )

監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

2、vm.$emit( event, […args] )

觸發當前實例上的事件。附加參數都會傳給監聽器回調，如果沒有參數，形式為vm.$emit(event)

3、vm.$off( [event, callback] )

移除自定義事件監聽器。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微機原理與系統設計筆記8 | 可編程並行介面晶元8255A&&可編程定時器、計時器晶元8253、8254
    本部分介紹可編程並行介面晶元8255A&&可編程定時器、計時器晶元8253、8254，增加了一些具體系統的設計案例。 ...
  • 震驚！火爆全網的ChatGPT背後使用的資料庫居然是……
    摘要：ChatGPT承認了自己背後使用的資料庫是Cassandra。 OpenAI最近發佈的AI驅動的智能聊天機器人ChatGPT在互聯網上掀起了一陣風暴，熱衷於嘗試這一新AI成果的網民不在少數。ChatGPT針對網友廣泛的問題提供了非常有針對性的回答，其不可思議的能力成為各大媒體平臺的頭條新聞，其 ...
  • SQL的分類、導入現有數據表的方式、基本的select語句、過濾數據語法、sql運算符
    SQL的分類 DDL:數據定義語言 CREATE\ALTER\RENAME（重命名）\DROP\TRUNCATE（清空表） DML:數據操作語言 INSERT\DELETE\UPDATE\SELECT(增刪改查) DCL:數據控制語言 COMMIT（提交）\ROLLBACK（回滾）\SAVEPOIN ...
  • 大數據應用場景下，標簽策略如何實現價值最大化？
    如今，各行各業都已經意識到了數據的價值，開始沉澱數據資產，挖掘數據價值，但是數據本身其實是很難直觀地看到其價值的。數據就是存儲在電腦系統的“01”代碼，如果你不去用它，能有什麼價值？ 正如美國哈佛大學教授格林先生所說：數據本身並不等於知識，更不是智慧，只有經過正確分析之後，數據才能凸顯它的意義。 ...
  • MySQL審計插件-MariaDB Audit Plugin
    小編提醒：拿MariaDB的so去MySQL里install，這種方式很容易導致 audit plugin工作異常，不推薦這麼做。強烈建議使用GreatSQL，自帶 audit plugin。 前言 資料庫審計功能主要將用戶對資料庫的各類操作行為記錄審計日誌，以便日後進行跟蹤、查詢、分析，以實現對用 ...
  • Android 啟動優化（二） - 有向無環圖的原理以及解題思路
    Android 啟動優化（一） - 有向無環圖 Android 啟動優化（二） - 拓撲排序的原理以及解題思路 Android 啟動優化（三） - AnchorTask 使用說明 Android 啟動優化（四）- 手把手教你實現 AnchorTask Android 啟動優化（五）- AnchorT ...
  • 配置項目請求地址和axios以及實現token過期無痛刷新
    配置請求地址：config->index.js 一個項目里通常有一個config->index.js，該文件包含了當前項目的請求地址，以及項目的版本信息。 // 請求地址 const API_URL_DEV = 'http://xxx.xxx.xxx.net:81/xxx' // 測試介面 cons ...
  • 【JavaScript】JS引擎中執行上下文如何順序執行代碼
    首先我們知道JavaScript引擎包括一個調用棧和堆，調用棧是代碼實際執行的地方，使用執行上下文(執行環境)來完成；堆是非結構化的記憶體池，存儲了應用程式所需要的所有對象。 執行上下文是什麼？ 執行上下文包括全局執行上下文和執行上下文。 全局執行上下文：代碼編譯完成後進入調用棧執行首先創建全局執行上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類