Vue.js是一個易於使用的Web應用程序框架，可用於開發交互式前端應用程序。

在本文中，我們將更詳細地介紹Vue實例，包括如何定義它以及它的一些屬性。

Vue實例的特徵

每個Vue.js應用程序都從定義一個新的Vue實例開始。 Vue構造函數參數是一個帶有各種屬性的options對象。

我們經常使用vm來引用Vue實例，其中vm代表ViewModel。

Vue應用程序大致遵循Model-View-ViewModel模式，其中ViewModel具有應用程序的業務邏輯，View具有用戶看到的視圖，而Model具有數據。

例如，我們可以如下定義一個Vue實例：

<code>const vm = new Vue({ });/<code>

每個Vue應用都包含一個根Vue實例，並由new Vue創建。我們可以將其整理成一棵樹，以便於維護。

數據與方法

傳遞給Vue構造函數的options對象可以具有數據和方法。

例如，如果我們如下定義Vue實例：

<code>const vm = new Vue({
  el: "#app",
  data: { foo: "bar" }
});/<code>

然後，我們添加代碼：

<code>console.log(vm.foo);/<code>

在我們的vm定義下面，由於data.foo的值為'bar'，所以我們得到'bar'。

換句話說，如果我們有：

<code>const data = { foo: "bar" };
const vm = new Vue({
  el: "#app",
  data
});

console.log(vm.foo === data.foo);/<code>

然後console.log將輸出為true。

數據更改時，應用程序將使用新數據重新渲染。

如果我們在vm中創建一個新屬性並將其設置如下：

<code>let data = { foo: "bar" };

const vm = new Vue({
  el: "#app",
  data
});

vm.a = 1;/<code>

該應用不會重新渲染。而如果我們寫：

<code>let data = { foo: "bar", a: 1 };
const vm = new Vue({
  el: "#app",
  data
});/<code>

然後，該應用將重新渲染。這意味著我們必須將要渲染的數據放入data字段。

如果我們使用Object.freeze()凍結傳遞給data的對象，則Vue應用將不會重新渲染，因為無法更改屬性。

因此，如果我們有：

<code>let data = { foo: "bar", a: 1 };

Object.freeze(data);

const vm = new Vue({
  el: "#app",
  data
});/<code>

初始渲染後無法進行任何更改，因為我們使用Object.freeze凍結了數據。

Vue實例還公開了許多實例屬性和方法。

它們以$開頭，以便讓我們知道它們是Vue實例的一部分。

$el

我們具有$el屬性，用來獲取Vue實例所在的DOM元素。

例如，如果我們有：

<code>let data = {foo："bar"};

const vm = new Vue({
  el："#app"，
  data
});

console.log(vm.$el === document.getElementById("app"));/<code>

然後，由於我們的Vue實例位於ID為app的元素中，所以console.log將輸出為true。

$data

$data屬性等價於傳遞給Vue構造函數的options對象中設置的data屬性的值。

因此，如果我們有：

<code>let data = { foo: "bar" };

const vm = new Vue({
  el: "#app",
  data
});

console.log(vm.$data === data);/<code>

然後，由於data與vm.$data引用相同的對象，所以console.log輸出true。

$watch

$watch是一個實例方法，可讓我們監聽options參數裡data對象中的更改。

例如，如果我們有：

src/ index.js

<code>let data = {foo: "bar"};

const vm = new Vue({
  el: "#app"，
  data
});

vm.$watch("foo", (newValue,oldValue) => {
  console.log(newValue, oldValue);
});/<code>

src/ index.html：

<code>

  
    <title>Hello/<title>
    
    
     

  
    

      
    

    
  
/<code>

然後，當我們在輸入框中輸入內容時，console.log會輸出data.foo新舊值：

<code>vm.$watch("foo", (newValue, oldValue) => {
  console.log(newValue, oldValue);
});/<code>

這是因為data.foo屬性的更改在被一直監聽著。當我們在框中鍵入內容時，v-model會自動更新foo的值。

因此，當我們鍵入內容時，將監聽foo的更改，並由傳遞給$watch方法的處理函數記錄該更改。

總結

通過將具有data，el和methods屬性的options對象傳遞給Vue構造函數來創建Vue實例。它返回我們Vue應用程序的實例。

實例具有$el屬性，以獲取我們的應用程序所在的DOM元素。

此外，還有$data屬性可獲取data屬性的值，以獲取options對象中的data屬性值數據。

最後，我們有$watch方法來監聽數據中的更改。

閱讀更多 前端知否 的文章

關鍵字: 虛擬機 實例 定義