一、$mount()掛載方法

$mount是用來掛載擴張的。如果 Vue 實例在實例化時沒有收到 el 選項，則它處于“未掛載”狀態(tài)，沒有關聯(lián)的 DOM 元素?？梢允褂?vm.$mount() 手動地掛載一個未掛載的實例。

比如我們擴張了一個全局組件，通過$mount手動的掛載到DOM上，也就生成了一個Vue實例。

<div id="#app"></div>

擴張一個全局組件，并且掛載到DOM上。

//擴張全局的組件
var navBar = Vue.extend({
    template: `<div>{{ title }}</div>`,
    data(){
        return {
            title: 'Vue 擴展的全局組件'
        }
    },
    mounted(){
        console.log('掛載上了')
    }
})

//使用全局擴張的組件，掛載到id為#app的DOM上（會替換#app）
var vm = new navBar().$mount('#app');

//或者
var vm = new navBar({el: "#app"})

如果沒有提供 elementOrSelector 參數(shù)，模板將被渲染為文檔之外的的元素，并且必須使用原生DOM API把它插入文檔中。

//在文檔之外渲染，并且掛載
var navbar = new navBar().$mount()
document.getElementById('app').appendChild(navbar.$el)

二、$destroy()銷毀方法

作用： 完全銷毀一個實例。

Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例相關的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

<div id="app">
        
</div>
<button onclick="destroy()">銷毀</button>

在組件中掛載destroyed生命周期鉤子

var navBar = Vue.extend({
    template: `<div>
                    <div>{{ title }}</div>
                    <h2>{{ num }}</h2>
                    <button @click = 'add'>add</button>
                </div>`,
    data(){
        return {
            title: 'Vue 全局擴展組件',
            num: 10
        }
    }
    destroyed(){
        console.log('銷毀了')
    },
    methods: {
        add(){
            this.num++
        }
    }
})

//使用全局擴張的組件，掛載到id為#app的元素上
var vm = new navBar().$mount('#app');

//銷毀
function destroy(){
    //點擊按鈕，銷毀vm實例，控制臺會輸出‘銷毀了’，當再次點擊的時候不會輸出，而且點擊add按鈕，數(shù)量也不會改變，說明已經(jīng)銷毀了
    vm.$destroy()
}

三、$forceUpdate()更新方法

該方法是迫使Vue實例重新渲染。注意：它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

看代碼：

<button onclick="reload()">刷新</button>

//同樣的，為了看到是否重新更新了數(shù)據(jù)，即是否執(zhí)行了reload方法，我們在實例中添加updated選項
updated(){
    console.log('數(shù)據(jù)重新渲染了')
}

//三、更新數(shù)據(jù)方法
function reload(){
    vm.$forceUpdate()
}

點擊更新按鈕，控制臺打印出updated鉤子中的輸出，說明Vue實例重新渲染了。

四、$nextTick()數(shù)據(jù)修改方法

參數(shù)：{Function} [callback]

該方法是構(gòu)造器data中的數(shù)據(jù)被修改后觸發(fā)，相當于updated鉤子函數(shù)，但還是有區(qū)別的：它是在updated鉤子函數(shù)執(zhí)行完之后執(zhí)行其里邊的回調(diào)函數(shù)。也就是將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。

methods: {
    add(){
        //更改數(shù)據(jù)
        this.num++
        this.$nextTick(function(){
            console.log('DOM現(xiàn)在更新了')
        })
    }
},
updated(){
    console.log('數(shù)據(jù)更新成：'+this.num)
}

通過控制臺的打印結(jié)果，可以看到，當數(shù)據(jù)改變時，updated鉤子早于$nextTick中的回調(diào)。