vue中methods、mounted等的使用方法解析
methods、mounted的使用方法
created
:html加載完成之前,執(zhí)行。執(zhí)行順序:父組件-子組件mounted
:html加載完成后執(zhí)行。執(zhí)行順序:子組件-父組件methods
:事件方法執(zhí)行。watch
:去監(jiān)聽一個值的變化,然后執(zhí)行相對應的函數(shù)。computed
:computed是計算屬性,也就是依賴其它的屬性計算所得出最后的值
export default { name: "draw", data(){ //定義變量source return { source:new ol.source.Vector({wrapX: false}), } }, props:{ //接收父組件傳遞過來的參數(shù) map:{ //type:String }, }, mounted(){ //頁面初始化方法 if (map==map){ } var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); }, watch: { //監(jiān)聽值變化:map值 map:function () { console.log('3333'+this.map); //return this.map console.log('444444'+this.map); var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); } }, methods:{ //監(jiān)聽方法click事件等,執(zhí)行drawFeatures方法 drawFeatures:function(drawType){} } }
vue生命周期(methods、mounted)
1.什么是生命周期
首先,我們了解一下"生命周期"這個詞。 通俗的來說,生命周期就是一個事務從出生到消失的過程。例如,一個人從出生到去世。 在vue中,vue的生命周期是指,從創(chuàng)建vue對象到銷毀vue對象的過程。
Vue實例有一個完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程,就是生命周期。
在Vue的整個生命周期中,它提供了一系列的事件,可以讓我們在事件觸發(fā)時注冊js方法,可以讓我們用自己注冊的js方法控制整個大局,在這些事件響應方法中的this直接指向的是vue的實例。
2.鉤子函數(shù)
【解釋】:
- 鉤子函數(shù)是Vue框架中內(nèi)置的一些函數(shù),隨著Vue的生命周期階段,自動執(zhí)行
- 鉤子函數(shù)是Vue框架中內(nèi)置的一些函數(shù),隨著Vue的生命周期階段,自動執(zhí)行
【作用】:
- 特定的時間,執(zhí)行特定的操作
- 特定的時間,執(zhí)行特定的操作
【分類】:
- 四大階段,八大方法
階段 | 方法名 | 方法名 |
---|---|---|
初始化 | beforeCreate | created |
掛載 | beforeMount | mounted |
更新 | beforeUpdate | updated |
銷毀 | beforeDestroy | destroyed |
3.Vue生命周期之初始化階段
【圖示】:
【代碼演示1】:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <script src="js/vue.min.js"></script> </head> <body> <div id="root"> <h2 :style="{opacity}">歡迎學習</h2> {{ change() }} </div> </body> <script type="text/javascript"> Vue.config.productionTip=false; new Vue({ el:'#root', data:{ opacity:1 }, methods:{ change(){ console.log('開啟了一個定時器') setInterval(()=>{ this.opacity-=0.01 if(this.opacity<=0) { this.opacity=1 } },16) } } }) </script> </html>
【代碼分析】:
【代碼演示2】:
<template> ? ?<div> ? ? ? ?<h3>生命周期函數(shù)</h3> ? ? ? ?<button @click="message='測試'">修改數(shù)據(jù)</button> ? ? ? ?<p>{{ message }}</p> ? ?</div> </template>
<script> ? ? export default { ? ? ? ? name: "life", ? ? ? ? data(){ ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? message:"hello" ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? beforeCreate() ? ? ? ? { ? ? ? ? ? ? console.log("beforeCreate -->創(chuàng)建前"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? created(){ ? ? ? ? ? ? console.log("created -->創(chuàng)建后"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? beforeMount(){ ? ? ? ? ? ? console.log("beforeMount --> 渲染前"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? mounted(){ ? ? ? ? ? ? console.log("mounted --> 渲染后"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? beforeUpdate(){ ? ? ? ? ? ? console.log("beforeUpdate --> 修改前"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? updated(){ ? ? ? ? ? ? console.log("updated --> 修改后"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? beforeDestroy(){ ? ? ? ? ? ? console.log("beforeDestroy --> 銷毀前"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? }, ? ? ? ? destroyed(){ ? ? ? ? ? ? console.log("destroyed --> 銷毀后"); ? ? ? ? ? ? console.log(this.message); ? ? ? ? } ? ? } </script> ? <style scoped> ? </style>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue中axios處理http發(fā)送請求的示例(Post和get)
本篇文章主要介紹了vue中axios處理http請求的示例(Post和get),這里整理了詳細的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08Vuex中如何getters動態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動態(tài)獲取state的值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue3實戰(zhàn)學習配置使用vue?router路由步驟示例
這篇文章主要為大家介紹了Vue3實戰(zhàn)學習配置使用vue?router路由步驟示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06