一、Vue實(shí)例常用屬性

1.1、vm.$ el、vm.$ data

問題：

在 new Vue 實(shí)例時(shí)我們經(jīng)常設(shè)置 el、data 選項(xiàng)，data 選項(xiàng)里面又可以定義很多屬性（常稱為數(shù)據(jù)屬性），那么能不能獲取到 el所掛載的 dom 元素，能不能獲取 data 對(duì)象呢？

答案：

可以。因?yàn)?Vue 實(shí)例提供了一些有用的實(shí)例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來。

作用：

通過 Vue 實(shí)例屬性 vm.$el 即可獲取到 Vue 實(shí)例掛載到的 dom元素，返回的是一個(gè) dom 對(duì)象，如 div，拿到 dom 元素后我們可以為它設(shè)置樣式之類的。

通過 Vue 實(shí)例屬性 vm.$data 即可獲取到 Vue 實(shí)例 data 選項(xiàng)數(shù)據(jù)對(duì)象，返回的是一個(gè)對(duì)象。

總結(jié)：

vm.$el是使用另一種方式來掛載dom元素

vm.$data是獲取data中的對(duì)象，使用vm.$data.xxx來獲取

結(jié)果

注意：上面 vm 改為 this 可以嗎？
不可以，在 new Vue 內(nèi)部才可以用this

1.2、vm.$ options、vm.$refs

作用：

至今我們在 new Vue 實(shí)例時(shí)學(xué)過如下選項(xiàng)的設(shè)置：el、data、methods、computed、watch、鉤子函數(shù)等（后續(xù)還會(huì)學(xué)一些）。此外，也可以自定義一些選項(xiàng)，可以是簡單屬性也可以是方法，然后可以通過 vm.$options 獲取自定義選項(xiàng)，當(dāng)然 vm.$options 也可以獲取默認(rèn)選項(xiàng)值【只不過 el、data 上面有更簡單獲取方式】。

總結(jié)：

vm.$options是獲取vue元素下面的選項(xiàng)（el、data、methods等），且選項(xiàng)是可以自己定義的。

vm.$refs是用來獲取dom元素的，用vue的思想使用數(shù)據(jù)驅(qū)動(dòng)來獲取dom元素。

在使用 JS/Jquery 獲取頁面的 DOM 元素時(shí)，我們一般是根據(jù)id、class、標(biāo)簽、屬性等其它標(biāo)識(shí)來獲取到頁面上的 DOM 元素。可以說，我們很難拋棄 Jquery 的一個(gè)重大原因，就是當(dāng)我們需要獲取到頁面上的 DOM 元素時(shí)，使用 Jquery 的 API 相比于原生的 JS代碼，簡單到極致。

js原生代碼獲取dom

document.getElementById(‘id’).value => $(‘#id’).val()

這種直接操縱 DOM 元素的方式，與我們使用 Vue 的初衷不符，雖然能達(dá)成效果，但是卻不提倡（因?yàn)?Vue采用 Virtual DOM 的做法渲染網(wǎng)頁，如果我們直接操作 DOM，很容易產(chǎn)生實(shí)際網(wǎng)頁跟 Vue 產(chǎn)生的 Virtual DOM 不同步的問題），這里我們就可以使用 ref 來獲取頁面上的 DOM 元素

vm.$refs 屬性用來獲取頁面中所有具有 ref 屬性的元素【因此要先設(shè)置 ref 屬性】,返回的是 dom 元素集合對(duì)象。

先會(huì)彈出一個(gè) “1111”的對(duì)話框，然后結(jié)果如下圖。

二、vm.$ mount()、vm.$nextTick() （Vue 實(shí)例常用方法 ——生命周期）

2.1、vm.$mount（）

作用：

用來實(shí)現(xiàn)手動(dòng)掛載 vm 實(shí)例到哪個(gè) dom 元素上

總結(jié)：

該方法是手動(dòng)用另一種方式來掛載元素。

vue.$mount()

也可以省略vue直接在vue實(shí)例后面.$mount()

因此上面vue代碼可以寫成如下：

2.2、vm.$nextTick()

作用：vm.$nextTick(callback) 在 dom 更新完成之后再執(zhí)行此回調(diào)函數(shù)，一般是在修改數(shù)據(jù)之后使用該方法，以便獲取更新后的 dom。

總結(jié)：該方法是可以控制在執(zhí)行vm.$nextTick()后在刷新dom元素，因?yàn)樵摲椒ㄊ窃谛薷脑氐闹岛弯秩綿om元素的值之間的方法，可以在修改元素的值后但渲染dom元素之前進(jìn)行一系列的操作。

運(yùn)行結(jié)果：

分析：

上面改變 name 的值，DOM 中顯示出來的是修改后的值，但是發(fā)現(xiàn)后面打印輸出的 textContent 取到的仍然是前面的張三，原因如下：

dom 還沒更新完成，Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生改變之后dom 立即變化，需要按照一定的策略進(jìn)行 dom 更新，需要一定的時(shí)間，而下面的代碼立即執(zhí)行（執(zhí)行完上面的更新語句，立即執(zhí)行下面的代碼，這個(gè)速度很快的，比 dom 更新要快的，即是下面語句先執(zhí)行了，然后才更新 dom 的），所以還是未更新前的。

那么如何做可以讓 console.log(vm.$refs.title.textContent)在

dom 更新完成之后再執(zhí)行呢？

使用 vm.$nextTick(callback)方法，該方法里面是一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)就會(huì)等到 dom 更新之后再執(zhí)行

結(jié)果

三、vm.$ set()、 vm.$delete()（Vue 實(shí)例常用方法——為對(duì)象添加和刪除屬性)

總結(jié)：

vm.$set(this.user,‘a(chǎn)ge’,28)

改為可以

this.user.age=28;

但是這樣添加屬性，你會(huì)發(fā)現(xiàn)對(duì)象里面是有了屬性 age，但是在頁面里面沒有顯示出來 age，也就是說這種添加屬性不是響應(yīng)式的(即時(shí)同步數(shù)據(jù))，要響應(yīng)式的就需要采用 vm.$set，一添加數(shù)據(jù)頁面上有的話就會(huì)立馬顯示。

vm.$delete(object,key)作用：刪除對(duì)象屬性：刪除 object 對(duì)象的屬性 key

vm.$delete(this.user,‘a(chǎn)ge’)

且可以使用全局的來代替，如下：

Vue.delete(this.user,‘a(chǎn)ge’）

3.1、vm.$set

作用：

vm.$set(object，key，value)——為對(duì)象添加屬性：為對(duì)象添加屬性 key，并給定屬性值 value

注意：屬性名 age 外單引號(hào)不能少。當(dāng)然可以是雙引

另外，vm.$set 是全局 Vue.set 的別名，即是可以用 Vue.set 來實(shí)現(xiàn),即上面的

vm.$set(this.user,‘a(chǎn)ge’,28）

代碼又可以改為下面的代碼：

Vue.set(this.user,‘a(chǎn)ge’,22);

Vue.set是全局的 set 方法，寫法前面是Vue，后面的 set前沒有$符號(hào)

3.2、 vm.$delete

作用：vm.$delete(object,key)作用：刪除對(duì)象屬性：刪除 object 對(duì)象的屬性 key

另外，vm.$delete 是全局 Vue.delete 的別名，即可以用
Vue.deletet 來實(shí)現(xiàn)也可以用下面的代碼來實(shí)現(xiàn)
Vue.delete(this.user,‘a(chǎn)ge’）