vue中全局方法和實例方法的區別有哪些

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

vue中全局方法和實例方法的區別：1、全局方法通過“Vue.myGlobalMethod”來調用，實例方法通過“this.$myMethod”來調用；2、全局方法是定義在vue下的靜態方法，實例方法可以定義在組件的內部。

本教程操作環境：windows10系統、vue2.9.6版，DELL G3電腦。

vue中全局方法和實例方法的區別是什么

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

怎么設置全局屬性；

怎么引用全局屬性；

一、設置全局屬性

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

二、引用全局屬性

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

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

上面代碼是借助Vue構造函數創建一個Vue對象。

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

什么是原型？

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

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

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

以上是使用內建對象——數組的構造函數，創建一個數組。

當然，我們也可以設置自定義對象，也就是自己設置一個新的對象。

const obj = {};

以上代碼就是設置了一個空對象。

Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數據屬性區分

組件樹

• $parent：用來訪問組件實例的父實例

• $root: 用來訪問當前組件樹的根實例

• $children:用來訪問當前組件實例的直接子組件實例

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

DOM訪問

• $el：用來掛載當前組件實例的dom元素

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

區別

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

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

到此，關于“vue中全局方法和實例方法的區別有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！