快捷導(dǎo)航

vue中methods、mounted等的使用方法解析

更新時(shí)間：2022年06月10日 15:09:18 作者：姚華軍

這篇文章主要介紹了vue中methods、mounted等的使用方法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

methods、mounted的使用方法

created：html加載完成之前，執(zhí)行。執(zhí)行順序:父組件-子組件
mounted：html加載完成后執(zhí)行。執(zhí)行順序:子組件-父組件
methods：事件方法執(zhí)行。
watch：去監(jiān)聽一個(gè)值的變化，然后執(zhí)行相對(duì)應(yīng)的函數(shù)。
computed：computed是計(jì)算屬性，也就是依賴其它的屬性計(jì)算所得出最后的值

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.什么是生命周期

首先，我們了解一下"生命周期"這個(gè)詞。通俗的來說，生命周期就是一個(gè)事務(wù)從出生到消失的過程。例如，一個(gè)人從出生到去世。在vue中，vue的生命周期是指，從創(chuàng)建vue對(duì)象到銷毀vue對(duì)象的過程。

Vue實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。

在Vue的整個(gè)生命周期中，它提供了一系列的事件，可以讓我們?cè)谑录|發(fā)時(shí)注冊(cè)js方法，可以讓我們用自己注冊(cè)的js方法控制整個(gè)大局，在這些事件響應(yīng)方法中的this直接指向的是vue的實(shí)例。

2.鉤子函數(shù)

【解釋】：

鉤子函數(shù)是Vue框架中內(nèi)置的一些函數(shù)，隨著Vue的生命周期階段，自動(dòng)執(zhí)行
鉤子函數(shù)是Vue框架中內(nèi)置的一些函數(shù)，隨著Vue的生命周期階段，自動(dòng)執(zhí)行

【作用】：

特定的時(shí)間，執(zhí)行特定的操作
特定的時(shí)間，執(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}">歡迎學(xué)習(xí)</h2>
       {{ change() }}
   </div>
</body>
 
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods:{
            change(){
                console.log('開啟了一個(gè)定時(shí)器')
                setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0)
                    {
                        this.opacity=1
                    }
                },16)
            }
        }
    })
</script>
</html>

【代碼分析】：

【代碼演示2】：

<template>
? ?<div>
? ? ? ?<h3>生命周期函數(shù)</h3>
? ? ? ?<button @click="message='測(cè)試'">修改數(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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: