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.js教學》】

以上是vue中全域方法和實例方法的差異是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！