vue中全局方法和實(shí)例方法的區(qū)別有哪些

這篇文章主要介紹“vue中全局方法和實(shí)例方法的區(qū)別有哪些”，在日常操作中，相信很多人在vue中全局方法和實(shí)例方法的區(qū)別有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中全局方法和實(shí)例方法的區(qū)別有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

vue中全局方法和實(shí)例方法的區(qū)別：1、全局方法通過“Vue.myGlobalMethod”來調(diào)用，實(shí)例方法通過“this.$myMethod”來調(diào)用；2、全局方法是定義在vue下的靜態(tài)方法，實(shí)例方法可以定義在組件的內(nèi)部。

本教程操作環(huán)境：windows10系統(tǒng)、vue2.9.6版，DELL G3電腦。

vue中全局方法和實(shí)例方法的區(qū)別是什么

在開發(fā)中，為了提高重用性，簡潔代碼，往往需要把代碼的公共部分提取出來，形成一個可復(fù)用的模塊。當(dāng)代碼提取出來形成模塊后，要實(shí)現(xiàn)所有地方都可以引用，就需要把這些模塊設(shè)置成全局屬性。所以，要實(shí)現(xiàn)全局公共方法，我們需要知道以下幾個知識點(diǎn)：

怎么設(shè)置全局屬性；

怎么引用全局屬性；

一、設(shè)置全局屬性

全局屬性可以分為：全局變量和全局方法。實(shí)現(xiàn)全局變量，常用的手段就是使用vuex （關(guān)于vuex 的使用方法這里不詳細(xì)說明了），還有一種方法就是借助原型屬性來實(shí)現(xiàn)。下面，我將重點(diǎn)講一下原型。

二、引用全局屬性

在使用Vue時，我們都要寫這么一串代碼：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面代碼是借助Vue構(gòu)造函數(shù)創(chuàng)建一個Vue對象。

從這可以看出，Vue其實(shí)是一個對象。那么我們就可以借助Vue的原型實(shí)現(xiàn)對全局屬性的引用。首先，我們需要了解以下知識點(diǎn)：

什么是原型？

在js 代碼中，我們經(jīng)常會看到一個屬性prototype 。他是構(gòu)造函數(shù)（就是用來構(gòu)造對象的函數(shù)）的屬性，用于指向原型對象。那什么是原型對象呢？了解“原型對象”，我們需要把“原型”和“對象”拆開來說明。

先說對象，js 的內(nèi)建對象有很多，例如：String 、Math 、Object 、Array 等等。

// 聲明一個數(shù)組對象
const arr = Array();

以上是使用內(nèi)建對象——數(shù)組的構(gòu)造函數(shù)，創(chuàng)建一個數(shù)組。

當(dāng)然，我們也可以設(shè)置自定義對象，也就是自己設(shè)置一個新的對象。

const obj = {};

以上代碼就是設(shè)置了一個空對象。

Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數(shù)據(jù)屬性區(qū)分

組件樹

• $parent：用來訪問組件實(shí)例的父實(shí)例

• $root: 用來訪問當(dāng)前組件樹的根實(shí)例

• $children:用來訪問當(dāng)前組件實(shí)例的直接子組件實(shí)例

• $refs:用來訪問v-ref指令的子組件

DOM訪問

• $el：用來掛載當(dāng)前組件實(shí)例的dom元素

• $els：用來訪問$el元素中使用了v-el指令的DOM元素

區(qū)別

全局方法，即可以理解為 window. myGlobalMethod 一樣，通過 Vue.myGlobalMethod 來調(diào)用，就是一個定義在 Vue 下的靜態(tài)方法而已

實(shí)例方法，回想一下 JS 里的類的概念，prototype 原型鏈的含義，沒搞明白的話先去看看這些基礎(chǔ)內(nèi)容。
這里可以這么給你解釋，實(shí)例方法可以在組件內(nèi)部，通過 this.$myMethod 來調(diào)用

到此，關(guān)于“vue中全局方法和實(shí)例方法的區(qū)別有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！