vue生命周期

1.引入生命周期

1.1vue实例外面编写函数

<script type="text/javascript" src="../js/vue.js"></script>
<div id="root">
	<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		 const vm=new Vue({
			el:'#root',
			data:{
				opacity:1
			},
		//通过外部的定时器实现（不推荐）
       setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) 
</script>

1.2配置methods

const vm=new Vue({
		data:{
		opacity:1 },
		methods: {
	  		change(){	
	  		setInterval(() => {
				vm.opacity -= 0.01
				if(vm.opacity <= 0) vm.opacity = 1
			},16)
			}
		},
	}
window.onload=()=>{
    vm.change()
}

请添加图片描述

1.3引入生命周期

//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
data:{
    
}
mounted(){
     console.log('mounted',*this*)
    setInterval(() => {
*this*.opacity -= 0.01
     if(*this*.opacity <= 0) *this*.opacity = 1
   },16)
  },
 与data平级

这把所有的逻辑函数都写在vue实例中，一定程度上提高了性能

2.生命周期

在这里插入图片描述

2.1创建时期

beforeCreate

关于数据代理就是

在这里插入图片描述

create

所以此时调用Create时可以通过vm访问到data中的数据以及

methods中的方法

2.2生成虚拟DOM

首先会检查vue实例中是否含有el这个配置项

(用于知道知道将解析好的结果呈现到那个容器)
检查在vue实例中是否有template配置项

 data: {
   opacity: 1,
    },
 template: `
	<div >
       <h2 v-if="a">你好啊</h2>
	   <h2 :style="{opacity}">欢迎学习Vue</h2>
	</div>`,

采用ES6的``方法用于结构可换行

注意：template配置项中必须要有一个根标签

这个阶段vue开始解析模板，然后生成虚拟DOM(内存中)，但是这时页面还只是呈现

未解析的内容

2.3挂载

beforeMount

在beforeMount和mounted中间内存中的虚拟DOM会转化为真实DOM插入页面

mounted

在调用这个函数时一般发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.4更新

beforeUpdate

在二者之间会进行虚拟DOM算法(diff)对新旧数据进行对比实现数据更新
updated

2.5销毁

beforeDestory

在这个时候就可以书写需要关闭的东西

比如：定时器，订阅消息，自定义事件
destoryed

3总结

常用的生命周期钩子：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

在这里插入图片描述