vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
?Vue的實(shí)例是Vue框架的入口，其實(shí)也就是前端的ViewModel，它包含了頁面中的業(yè)務(wù)邏輯處理、數(shù)據(jù)模型等，當(dāng)然它也有自己的一系列的生命周期的事件鉤子，輔助我們進(jìn)行對(duì)整個(gè)Vue實(shí)例生成、編譯、掛著、銷毀等過程進(jìn)行js控制。
5.1. Vue實(shí)例初始化的選項(xiàng)配置對(duì)象詳解
5.1.1. Vue實(shí)例的的data對(duì)象
介紹
Vue的實(shí)例的數(shù)據(jù)對(duì)象data 我們已經(jīng)用了很多了，數(shù)據(jù)綁定離不開data里面的數(shù)據(jù)。也是Vue的核心屬性。它是Vue綁定數(shù)據(jù)到HTML標(biāo)簽的數(shù)據(jù)源泉，另外Vue框架會(huì)自動(dòng)監(jiān)視data里面的數(shù)據(jù)變化，自動(dòng)更新數(shù)據(jù)到HTML標(biāo)簽上去。本質(zhì)原理是：Vue會(huì)自動(dòng)將data里面的數(shù)據(jù)進(jìn)行遞歸抓換成getter和setter，然后就可以自動(dòng)更新HTML標(biāo)簽了，當(dāng)然用getter和setter所以老的瀏覽器Vue支持的不夠好。
data對(duì)象的類型：
類型是Object或者Function。
如果是組件對(duì)象中，data必須是Function類型。【后面學(xué)了組件后就明白了，暫時(shí)對(duì)組件先放放。】
實(shí)例：
5.1.2. Vue實(shí)例的computed
介紹
Vue的計(jì)算屬性(computed)的屬性會(huì)自動(dòng)混入Vue的實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。這就很強(qiáng)大了，再計(jì)算屬性中定義的函數(shù)里面可以直接使用指向了vue實(shí)例的this，異常方便的啊。
類型
{ 鍵：函數(shù)}?{ [key: string]: Function | { get: Function, set: Function } }?當(dāng)然，可以省略setter,如果省略了setter，那么值就可以是普通函數(shù)，但是必須有返回值。
官方的實(shí)例
- var vm = new Vue({data: { a: 1 },computed: { // 僅讀取，值只須為函數(shù) aDouble: function () { return this.a * 2 }, // 讀取和設(shè)置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } }}})vm.aPlus // -> 2vm.aPlus = 3vm.a // -> 2vm.aDouble // -> 4
5.1.3. methods
類型: { [key: string]: Function }
詳細(xì):
methods 將被混入到 Vue 實(shí)例中。可以直接通過 VM 實(shí)例訪問這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。
注意，不應(yīng)該使用箭頭函數(shù)來定義 method 函數(shù) (例如 plus: () => this.a++)。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.a 將是 undefined。
? ? ? ?示例:
var?vm?=?new?Vue({
data:?{?a:?1?},??methods:?{????plus:?function?()?{??????this.a++????}??}})vm.plus()vm.a?//?2
5.1.4. watch
類型
{ [key: string]: string | Function | Object }
詳細(xì):
一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè)屬性。
示例:
參考綜合案例：
<html lang="en"><head> <meta charset="UTF-8"> <title>Vue入門之?dāng)?shù)據(jù)監(jiān)控title> <script src="https://unpkg.com/vue/dist/vue.js">script>head><body> <div id="app"> <p>{{ number }}p> <input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()"> div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, methods: { // 事件響應(yīng)方法的邏輯代碼 getNumber: function (e) { this.number += 1; // 不管是內(nèi)聯(lián)方法調(diào)用，還是綁定事件處理器兩種方式執(zhí)行事件響應(yīng)方法的時(shí)候 this都是指向 app } }, watch: { // 監(jiān)控number的變化，并自動(dòng)執(zhí)行下面的函數(shù) number: function (val, oldVal) { console.log('val:' + val + ' - oldVal: ' + oldVal); } } });script>body>html>5.1.5. 設(shè)置el的詳解
類型
string | HTMLElement
限制：只在由 new 創(chuàng)建的實(shí)例中遵守。
詳細(xì)：
提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo),也就是說Vue綁定數(shù)據(jù)到哪里去找。可以是CSS 選擇器，也可以是一個(gè)?HTMLElement實(shí)例。
在實(shí)例掛載之后(生命周期的內(nèi)容后面會(huì)詳細(xì)講的奧)， 元素可以用 vm.$el 訪問。
如果這個(gè)選項(xiàng)在實(shí)例化時(shí)有作用，實(shí)例將立即進(jìn)入編譯過程，否則，需要顯式調(diào)用 vm.$mount() 手動(dòng)開啟編譯。
// 幾乎所有例子都用到這個(gè)，所以就不再贅述var app = new Vue({ el: '#app', ...});5.2. Vue實(shí)例的生命周期
Vue實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
在Vue的整個(gè)生命周期中，它提供了一系列的事件，可以讓我們注冊(cè)js方法，可以讓我們達(dá)到控制整個(gè)過程的目的地，哇賽，如果你搞過Asp.Net WebForm的話，你會(huì)發(fā)現(xiàn)整個(gè)就是WebForm的翻版嘛哈哈。值得注意的是，在這些事件響應(yīng)方法中的this直接指向的是vue的實(shí)例。
首先看看下面官網(wǎng)的一張生命周期的圖，我做一下標(biāo)注，看看整體的流程，后面我們上代碼做一下效果。
Vue提供的可以注冊(cè)的鉤子都在上圖片的紅色框標(biāo)注。他們是：
beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用。
created
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroyed
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。接下來我們做一個(gè)例子，看一下Vue中所有的生命周期怎么用的。
<html lang="en"><head> <meta charset="UTF-8"> <title>Vue入門之生命周期title> <script src="https://unpkg.com/vue/dist/vue.js">script>head><body> <div id="app"> <p>{{ number }}p> <input type="text" name="btnSetNumber" v-model="number"> div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, beforeCreate: function () { console.log('beforeCreate 鉤子執(zhí)行...'); console.log(this.number) }, cteated: function () { console.log('cteated 鉤子執(zhí)行...'); console.log(this.number) }, beforeMount: function () { console.log('beforeMount 鉤子執(zhí)行...'); console.log(this.number) }, mounted: function () { console.log('mounted 鉤子執(zhí)行...'); console.log(this.number) }, beforeUpdate: function () { console.log('beforeUpdate 鉤子執(zhí)行...'); console.log(this.number) }, updated: function () { console.log('updated 鉤子執(zhí)行...'); console.log(this.number) }, beforeDestroy: function () { console.log('beforeDestroy 鉤子執(zhí)行...'); console.log(this.number) }, destroyed: function () { console.log('destroyed 鉤子執(zhí)行...'); console.log(this.number) }, });script>body>html>再看一個(gè)綜合的實(shí)戰(zhàn)的例子，可能涉及到ajax和組件，不過先看一下vue的生命周期的例子的用法：
import Axios from 'axios' // 這是一個(gè)輕量級(jí)的ajax庫(kù)，import是es6模塊導(dǎo)入的語法。export default { // 這是一個(gè)vue的模塊，后面講奧。 name: 'app', components: { }, data: function () { return { list: [] } }, mounted: function () { // 掛在完成后的生命周期鉤子注冊(cè)。 this.$nextTick(function () { // 等待下一次更新完成后執(zhí)行業(yè)務(wù)處理代碼。 Axios.get('/api/menulist', {// 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新 params: { } }).then(function (res) { this.list = res.data }.bind(this)) }) }}5.3. Vue實(shí)例的全局配置
這一塊都是一些小的知識(shí)點(diǎn)，我就不贅述了，直接copy?官網(wǎng)?Vue.config 是一個(gè)對(duì)象，包含 Vue 的全局配置。可以在啟動(dòng)應(yīng)用之前修改下列屬性：
silent
類型：boolean
默認(rèn)值：false
用法：
- Vue.config.silent = true//取消 Vue 所有的日志與警告。
optionMergeStrategies
類型：{ [key: string]: Function }
默認(rèn)值：{}
用法：
- Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {return child + 1}const Profile = Vue.extend({_my_option: 1})// Profile.options._my_option = 2//自定義合并策略的選項(xiàng)。//合并策略選項(xiàng)分別接受第一個(gè)參數(shù)作為父實(shí)例，第二個(gè)參數(shù)為子實(shí)例，Vue實(shí)例上下文被作為第三個(gè)參數(shù)傳入。
devtools
類型：boolean
默認(rèn)值：true (生產(chǎn)版為 false)
用法：
- // 務(wù)必在加載 Vue 之后，立即同步設(shè)置以下內(nèi)容Vue.config.devtools = true//配置是否允許 vue-devtools 檢查代碼。開發(fā)版本默認(rèn)為 true，生產(chǎn)版本默認(rèn)為 false。生產(chǎn)版本設(shè)為 true 可以啟用檢查。
errorHandler
類型：Function
默認(rèn)值：默認(rèn)拋出錯(cuò)誤
用法：
- Vue.config.errorHandler = function (err, vm) {// handle error}//指定組件的渲染和觀察期間未捕獲錯(cuò)誤的處理函數(shù)。這個(gè)處理函數(shù)被調(diào)用時(shí)，可獲取錯(cuò)誤信息和 Vue 實(shí)例。//Sentry, an error tracking service, provides official integration using this option.
ignoredElements
類型: Array
默認(rèn)值: []
用法:
- Vue.config.ignoredElements = ['my-custom-web-component', 'another-web-component']須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則，它會(huì)假設(shè)你忘記注冊(cè)全局組件或者拼錯(cuò)了組件名稱，從而拋出一個(gè)關(guān)于 Unknown custom element 的警告。
keyCodes
類型：{ [key: string]: number | Array }
默認(rèn)值：{}
用法：
- Vue.config.keyCodes = {v: 86,f1: 112,mediaPlayPause: 179,up: [38, 87]}api//給 v-on 自定義鍵位別名。
5.4. Vue的全局API
Vue的全局API提供大量的功能，我這里就給大家羅列幾個(gè)常用的結(jié)果，其他的還是參考官網(wǎng).
5.4.1. Vue.nextTick
語法：Vue.nextTick( [callback, context] )
參數(shù)：{Function} [callback]{Object} [context]用法：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
// 修改數(shù)據(jù)vm.msg = 'Hello'// DOM 還沒有更新Vue.nextTick(function () { // DOM 更新了})5.4.2. Vue.set
語法：Vue.set( object, key, value )
參數(shù)：{Object} object{string} key{any} value返回值：設(shè)置的值.用法：
設(shè)置對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時(shí)觸發(fā)視圖更新。這個(gè)方法主要用于避開 Vue 不能檢測(cè)屬性被添加的限制。注意對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。
5.4.3. Vue.compile
語法：
Vue.compile( template )
參數(shù)：
{string} template
用法：
5.4.4. 全局API總結(jié)
其實(shí)還有幾個(gè)其他的全局API，不打算在這里講了，比如擴(kuò)展組件Vue.extend 的用法、Vue.use加載插件、Vue.filter加載過濾器、Vue.directive自定義指令等 后面再講其他Vue的知識(shí)點(diǎn)的時(shí)候，再加上這些，全局API其實(shí)就是Vue類型的靜態(tài)方法，全局范圍內(nèi)都可以使用的，某些實(shí)例的方法本質(zhì)也是調(diào)用了這些全局的，后面用到時(shí)候再說。
5.5. Vue實(shí)例與生命周期總結(jié)
Vue的實(shí)例封裝的還是挺有藝術(shù)性的，很符合開發(fā)者的思維規(guī)范，它的生命周期也非常清晰，使用起來也非常方便。Vue確實(shí)一個(gè)好框架。
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3怎么创建一个链表_怎么创建
- 下一篇： Java web对试卷进行单选多选答题进