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

更新时间：2022年06月10日 15:09:18 作者：姚华军

这篇文章主要介绍了vue中methods、mounted等的使用方法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

methods、mounted的使用方法

created：html加载完成之前，执行。执行顺序:父组件-子组件
mounted：html加载完成后执行。执行顺序:子组件-父组件
methods：事件方法执行。
watch：去监听一个值的变化，然后执行相对应的函数。
computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

export default {
     name: "draw",
     data(){      //定义变量source        
       return {
         source:new ol.source.Vector({wrapX: false}),
       }
     },
    props:{ //接收父组件传递过来的参数
      map:{
        //type:String
      },
    },
	mounted(){   //页面初始化方法
		if (map==map){
		}
		var vector = new ol.layer.Vector({
		  source: this.source
		});
		this.map.addLayer(vector);
	},
	watch: {   //监听值变化: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:{   //监听方法click事件等，执行drawFeatures方法
       drawFeatures:function(drawType){}
	}
}

vue生命周期(methods、mounted)

1.什么是生命周期

首先，我们了解一下"生命周期"这个词。通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

2.钩子函数

【解释】：

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行
钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

【作用】：

特定的时间，执行特定的操作
特定的时间，执行特定的操作

【分类】：

四大阶段，八大方法

阶段	方法名	方法名
初始化	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>生命周期函数</h3>
       <button @click="message='测试'">修改数据</button>
       <p>{{ message }}</p>
   </div>
</template>

<script>
    export default {
        name: "life",
        data(){
            return {
                message:"hello"
            }
        },
        beforeCreate()
        {
            console.log("beforeCreate -->创建前");
            console.log(this.message);
        },
        created(){
            console.log("created -->创建后");
            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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

简单设置el-date-picker的默认当前时间问题
这篇文章主要介绍了简单设置el-date-picker的默认当前时间问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中axios处理http发送请求的示例（Post和get）
本篇文章主要介绍了vue中axios处理http请求的示例（Post和get），这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
浅谈Vue SSR中的Bundle的具有使用
这篇文章主要介绍了浅谈Vue SSR中的Bundle的具有使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue关闭浏览器退出登录的实现示例
本文主要介绍了vue关闭浏览器退出登录，一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现，感兴趣的可以了解一下
2021-12-12
浅谈Vue为什么不能检测数组变动
这篇文章主要介绍了浅谈Vue为什么不能检测数组变动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
VUE在for循环里面根据内容值动态的加入class值的方法
这篇文章主要介绍了VUE在for循环里面根据内容值动态的加入class值的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
Vue获取微博授权URL代码实例
这篇文章主要介绍了Vue获取微博授权URL代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Vuex中如何getters动态获取state的值
这篇文章主要介绍了Vuex中如何getters动态获取state的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue3实战学习配置使用vue router路由步骤示例
这篇文章主要为大家介绍了Vue3实战学习配置使用vue router路由步骤示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
Vue3单击新增添加新的input的方法
这篇文章主要介绍了Vue3单击新增添加新的input,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，文中补充介绍了Vue动态绑定、添加input，需要的朋友可以参考下
2023-01-01