Vue.js每天必學(xué)之構(gòu)造器與生命周期
構(gòu)造器
每個 Vue.js 應(yīng)用的起步都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例：
var vm = new Vue({
// 選項
})
一個 Vue 實例其實正是一個 MVVM 模式中所描述的 ViewModel - 因此在文檔中經(jīng)常會使用 vm 這個變量名。
在實例化 Vue 時，需要傳入一個選項對象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項。全部的選項可以在 API 文檔中查看。
可以擴展 Vue 構(gòu)造器，從而用預(yù)定義選項創(chuàng)建可復(fù)用的組件構(gòu)造器：
var MyComponent = Vue.extend({
// 擴展選項
})
// 所有的 `MyComponent` 實例都將以預(yù)定義的擴展選項被創(chuàng)建
var myComponentInstance = new MyComponent()
盡管可以命令式地創(chuàng)建擴展實例，不過在多數(shù)情況下將組件構(gòu)造器注冊為一個自定義元素，然后聲明式地用在模板中。我們將在后面詳細說明組件系統(tǒng)?，F(xiàn)在你只需知道所有的 Vue.js 組件其實都是被擴展的 Vue 實例。
屬性與方法
每個 Vue 實例都會代理其 data 對象里所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
注意只有這些被代理的屬性是響應(yīng)的。如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。我們將在后面詳細討論響應(yīng)系統(tǒng)。
除了這些數(shù)據(jù)屬性，Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數(shù)據(jù)屬性區(qū)分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調(diào)將在 `vm.a` 改變后調(diào)用
})
參考 API 文檔查看全部的實例屬性與方法。
實例生命周期
Vue 實例在創(chuàng)建時有一系列初始化步驟——例如，它需要建立數(shù)據(jù)觀察，編譯模板，創(chuàng)建必要的數(shù)據(jù)綁定。在此過程中，它也將調(diào)用一些生命周期鉤子，給自定義邏輯提供運行機會。例如 created鉤子在實例創(chuàng)建后調(diào)用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
也有一些其它的鉤子，在實例生命周期的不同階段調(diào)用，如 compiled、 ready 、destroyed。鉤子的 this 指向調(diào)用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有“控制器”的概念？答案是，沒有。組件的自定義邏輯可以分割在這些鉤子中。
生命周期圖示
下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西，不過以后它會有幫助。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue-video-player?播放m3u8視頻流的實現(xiàn)
本文主要介紹了vue-video-player?播放m3u8視頻流的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue?3?表格時間監(jiān)控與動態(tài)后端請求觸發(fā)詳解?附Demo展示
在Vue3中,使用el-table組件渲染表格數(shù)據(jù),通過el-table-column指定內(nèi)容,時間點需前端校準,用getTime()比較,到達時觸發(fā)操作,異步API請求可用async/await處理,setInterval實現(xiàn)定時監(jiān)控,配合條件判斷防止重復(fù)請求2024-09-09
在做項目的時候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡單方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
.env文件是vue運行項目時的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下2023-03-03
尤雨溪開發(fā)vue?dev?server理解vite原理
這篇文章主要為大家介紹了尤雨溪開發(fā)的玩具vite，vue-dev-server來理解vite原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue3在新版本中提供了一個新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來提高 Web 應(yīng)用程序的性能2023-06-06
相信大家都知道在element-ui中,el-upload可以進行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時報錯問題的處理方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06