Vue經典面試題: Vue.use和Vue.prototype.$xx有血緣關系嗎?

william 發布于2019-08-23 18:22 / 1058人閱讀

摘要：有關系嗎沒關系面試的時候總會問如何在的實例上掛載一個方法屬性也就是的小技巧但是突然有人問他倆有啥關系還真是新鮮我想應該是網上有文章寫是用法的但是沒有說明的用法以及為什么就能在組件內這么調用所以下面我就細細的說下說能學會啥看完本文能掌握如何定

有關系嗎?

沒關系, 面試的時候總會問如何在Vue的實例上掛載一個方法/屬性, 也就是Vue.prototype的小技巧, 但是突然有人問他倆有啥關系還真是新鮮.

我想應該是網上有文章寫Vue.prototype.$xx是用法的, 但是沒有說明Vue.use的用法以及Vue.prototype.$xx為什么就能在組件內this.$xx 這么調用, 所以下面我就細細的說下.

說能學會啥?

看完本文, 能掌握如何定義一個Vue插件, 以及Vue.prototype.$xx的原理.

Vue.use 用餓了么UI舉例

下面是餓了么UI的引入代碼, 大家對這段應該很熟悉了.

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

接下來, 我們在看下這個Element是什么

這里我們看到Element是個對象, 上面有version等字段, 其中還有一個install,他是本文的主角, Vue.use就是要運行這個install對應的函數.

最小結構

寫一段最少的代碼演示如何用Vue.use初始化插件:

// 插件
const plugin = {
  install(){
    document.write("我是install內的代碼")
  }
}

// 初始化插件
Vue.use(plugin); // 頁面顯示"我是install內的代碼"

在codepen上看預覽

如果想知道插件的具體實現, 請看 https://cn.vuejs.org/v2/guide...

總結

Vue的插件是一個對象, 就像Element.

插件對象必須有install字段.

install字段是一個函數.

初始化插件對象需要通過Vue.use().

擴展學習

Vue.use()調用必須在new Vue之前.

同一個插件多次使用Vue.use()也只會被運行一次.

Vue.prototype.$xx

好了, 回過頭我們再看眼上面的圖片, 是不是發現了熟悉的代碼:

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
...

Vue.prototype 的用法我相信大家都會用, 我做過調查, 我就不啰嗦了, 但是我發現大家好像不知道"所以然".

所以然

為什么初始化的時候運行了Vue.prototype.$alert, 然后就可以在任意組件內部運行this.$alert()了呢? 首先要了解構造函數, 實例, 原型(prototype)這3個概念.

構造函數, 實例, 原型(prototype)

這3個概念有點老生常談了, 百度一搜很多解釋, 我先舉個例子來和Vue類比你就明白他倆了.

首先我寫個假的Vue我們叫他AVue, 恩, 他是個"贗品", "A貨", 接下來跟我一步一步走:

1. AVue是個構造函數

這里我們只模擬下methods功能.

function AVue({methods}){
    for(let key in methods){
        this[key] = methods[key];
    }
}

2. 給AVue的原型上放個$alert

AVue.prototype.$alert = ()=>{document.write("我是個贗品!")}

3. 實例化AVue

實例化Vue的時候我們知道, 我們會傳入一個對象, 對象里面有data/methods等, 我的AVue一樣, 下面我們讓AVue也學Vue那樣實例化:

// 我只山寨了methods, 所以只能學methods嘍
const av = new AVue({
    methods: {
        say(){
            this.$alert(); 
        }
    }
});

// 調用一下say
av.say(); // 我是個贗品!

在codepen上預覽

總結

好了, 運行到這里, 我想你應該看明白了吧, 之前大家寫的Vue.prototype.$xx其實只不過是js中函數原型的特性罷了: 函數原型上的屬性/方法, 在函數實例化后, 可以在任意實例上讀取, 要不你也做個"贗品"試下.

擴展

vue讓大家知道了defineProperty, 我們自己也可以用下他, 比如讓Vue.prototype變成不可寫的, 防止被覆蓋.

Object.defineProperty(Vue.prototype, "$alert", {
    writable: false,
    value(){
        console.log("我是行貨!")
    }
});

課后練習

建議大家可以隨便寫一個vue的插件練手, 比如我的練手項目就是他:

命令式調用vue組件
https://github.com/any86/vue-...

云服務器 GPU云服務器棧和隊列面試題血緣關系面試題棧面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105120.html

「Vue實踐」武裝你的前端項目

摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實例的方法清除可當你有多個時，就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄接口模塊處理 Vue組件動態注冊頁面性能調試：Hiper Vue高階組件封裝性能優化：eventBus封裝 webpack插件：真香本文項目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 評論0 收藏0
面試被問到Vue?想進一步提升?那就停下來看一下吧

摘要：兩個對象鍵名沖突時，取組件對象的鍵值對。允許聲明擴展另一個組件可以是一個簡單的選項對象或構造函數，而無需使用。這主要是為了便于擴展單文件組件。 Vue作為最近最炙手可熱的前端框架，其簡單的入門方式和功能強大的API是其優點。而同時因為其API的多樣性和豐富性，所以他的很多開發方式就和一切基于組件的React不同，如果沒有對Vue的API（有一些甚至文檔都沒提到）有一個全面的了解，那么在...

andot 2019-08-26 14:05 評論0 收藏0
vue之插件編寫

摘要：插件分類插件通常會為添加全局功能，插件的編寫方法一般分為類，如上圖所示的插件應當有一個公開方法。前言前段時間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話插件 Vue 化引發的一些思考這篇文章我不僅僅是要教會大家封裝一個 scroll 組件，還想傳遞一些把第三方插件（原生 JS 實現）Vue 化的思考過程。很多學習 Vue.js 的同學可能還停留在 XX 效果如何用 Vue....

xuexiangjys 2019-08-21 17:04 評論0 收藏0
vue中extend，mixins，extends，components,install的幾個操作

摘要：前言你知道，用法嗎你知道他們的區別嗎你知道他們的執行順序嘛下面都能找到這些答案使用構造器創建一個子類參數是包含組件選項的對象是全局的創建構造器實例傳入的數據為對應的標簽最外層必須只有一個標簽這是擴展的數據創建實例，并掛載到一個元素上。前言你知道extend,mixins,extends，components,install用法嗎? 你知道他們的區別嗎?你知道他們的執行順序嘛? 下面...

沈儉 2019-08-22 18:39 評論0 收藏0