Vue.js是一個易於使用的Web應用程式框架，可用於開發互動式前端應用程式。
在本文中，我們將更詳細地介紹Vue例項，包括如何定義它以及它的一些屬性。
Vue例項的特徵每個Vue.js應用程式都從定義一個新的Vue例項開始。 Vue建構函式引數是一個帶有各種屬性的options物件。
我們經常使用vm來引用Vue例項，其中vm代表ViewModel。
Vue應用程式大致遵循Model-View-ViewModel模式，其中ViewModel具有應用程式的業務邏輯，View具有使用者看到的檢視，而Model具有資料。
例如，我們可以如下定義一個Vue例項：
const vm = new Vue({ });每個Vue應用都包含一個根Vue例項，並由new Vue建立。我們可以將其整理成一棵樹，以便於維護。
資料與方法傳遞給Vue建構函式的options物件可以具有資料和方法。
例如，如果我們如下定義Vue例項：
const vm = new Vue({ el: "#app", data: { foo: "bar" }});然後，我們新增程式碼：
console.log(vm.foo);在我們的vm定義下面，由於data.foo的值為'bar'，所以我們得到'bar'。
換句話說，如果我們有：
const data = { foo: "bar" };const vm = new Vue({ el: "#app", data});console.log(vm.foo === data.foo);然後console.log將輸出為true。
資料更改時，應用程式將使用新資料重新渲染。
如果我們在vm中建立一個新屬性並將其設定如下：
let data = { foo: "bar" };const vm = new Vue({ el: "#app", data});vm.a = 1;該應用不會重新渲染。而如果我們寫：
let data = { foo: "bar", a: 1 };const vm = new Vue({ el: "#app", data});然後，該應用將重新渲染。這意味著我們必須將要渲染的資料放入data欄位。
如果我們使用Object.freeze()凍結傳遞給data的物件，則Vue應用將不會重新渲染，因為無法更改屬性。
因此，如果我們有：
let data = { foo: "bar", a: 1 };Object.freeze(data);const vm = new Vue({ el: "#app", data});初始渲染後無法進行任何更改，因為我們使用Object.freeze凍結了資料。
Vue例項還公開了許多例項屬性和方法。
它們以$開頭，以便讓我們知道它們是Vue例項的一部分。
$el
我們具有$el屬性，用來獲取Vue例項所在的DOM元素。
例如，如果我們有：
let data = {foo："bar"};const vm = new Vue({ el："#app"， data});console.log(vm.$el === document.getElementById("app"));然後，由於我們的Vue例項位於ID為app的元素中，所以console.log將輸出為true。
$data
$data屬性等價於傳遞給Vue建構函式的options物件中設定的data屬性的值。
因此，如果我們有：
let data = { foo: "bar" };const vm = new Vue({ el: "#app", data});console.log(vm.$data === data);然後，由於data與vm.$data引用相同的物件，所以console.log輸出true。
$watch
$watch是一個例項方法，可讓我們監聽options引數裡data物件中的更改。
例如，如果我們有：
src/ index.js
let data = {foo: "bar"};const vm = new Vue({ el: "#app"， data});vm.$watch("foo", (newValue,oldValue) => { console.log(newValue, oldValue);});src/ index.html：
<!DOCTYPE html><html> <head> <title>Hello</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="foo" /> </div> <script src="./src/index.js"></script> </body></html>然後，當我們在輸入框中輸入內容時，console.log會輸出data.foo新舊值：
vm.$watch("foo", (newValue, oldValue) => { console.log(newValue, oldValue);});這是因為data.foo屬性的更改在被一直監聽著。當我們在框中鍵入內容時，v-model會自動更新foo的值。
因此，當我們鍵入內容時，將監聽foo的更改，並由傳遞給$watch方法的處理函式記錄該更改。
總結通過將具有data，el和methods屬性的options物件傳遞給Vue建構函式來建立Vue例項。它返回我們Vue應用程式的例項。
例項具有$el屬性，以獲取我們的應用程式所在的DOM元素。
此外，還有$data屬性可獲取data屬性的值，以獲取options物件中的data屬性值資料。
最後，我們有$watch方法來監聽資料中的更改。
推薦閱讀：