写一个欢迎学习Vue
:
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="indexCss.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--动态绑定,绑定后里面时一个对象,{opacity: opacity}重名简写-->
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>
<script src="indexJS.js"></script>
</html>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data(){
return{
opacity: 1,
}
}
})
借助VsCode
的Live Server
插件用Open with Live Server(Alt + L Alt + o)
运行这样你的Vue devtools
插件才能识别本地运行不行,没法识别也没有Vue标识
打开控制台,进入Vue开发者工具把opacity
改为0.5
改变了透明度
那这样我们就知道了每隔一段时间透明度减小一点点(把定时器写在Vue实例的外面)
setInterval(()=>{
opacity -= 0.01
},16)
写在外面有一个问题:我触碰不到vm实例里的opacity
这么写:
const vm = new Vue({
el: '#root',
data(){
return{
opacity: 1,
}
}
})
setInterval(()=>{
vm.opacity -= 0.01
if(vm.opacity === 0){vm.opacity = 1}
},16)
这么写if(vm.opacity === 0){vm.opacity = 1}
很危险,因为js不擅长处理小数有可能上一秒它是正数下一秒就负数了越过了0所以得这么写:
setInterval(()=>{
vm.opacity -= 0.01
if(vm.opacity <= 0){vm.opacity = 1}
},16)
这样实现是实现了,但是写的不完美:
- Vue实例(
vm
)和具体逻辑(setInterval
) - 基本上都是再Vue内部解决问题,所以在真正开发的时候很少会用到
vm
new Vue({
el: '#root',
data(){
return{
opacity: 1,
}
},
methods: {
change(){
setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <= 0){this.opacity = 1}
},16)
}
},
})
这样子写change没有被调用
- 这里的change要么把它当成事件的回调
- 要么作为模板的插值语法去掉(在这里建议不要使用这样定时器会一直递归创建无数个定时器)
所以change
写在methods
里面没办法处理我们的请求
如果Vue拿到<h2 :style="{opacity}">欢迎学习Vue</h2>
,解析成虚拟DOM,再转换成真实DOM最后再放入页面。这一系列最后一步干完后,把它放到页面的时候告诉我们一声,这个事一旦要是达成了,那它什么时候告诉我们,那我什么时候去开一个定时器就可以了,Vue给我提供了一个渠道:Vue把这些事干完的时候会调用一个函数,函数里面就可以写你的逻辑了,这个函数很特殊,跟methods
平级, 名字叫mounted
mount
:挂载
问题是什么是挂载?
Vue里面的挂载就是找到模板只解析虚拟DOM,然后往真实DOM去转,然后把这个真实的DOM元素放入
到页面。放入官方一点的说法就是挂载
//Vue完成模板的解析并把初始的真实DOM元素放入页面后(完成挂载)调用mounted
mounted(){
}
Vue完成模板的解析并把初始的真实DOM元素放入页面后(完成挂载)调用mounted
mounted
在vm
的工作过程种它只调一次,
mounted(){
console.log('mounted')
}
mounted
那就在这个函数里面开启你的定时器
mounted(){
console.log('mounted')
setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <= 0){this.opacity = 1}
},16)
}
所谓的生命周期指的就是这些特殊的函数mounted
就是一个普普通通的函数,只不过这个函数是Vue在一个关键性的时刻帮我们调用的
但是Vue实例在干活的时候是分为很多步骤的,在mounted
之前它都调用了很多函数,在mounted
后面起了一俩个函数,我们把这么一堆函数称为Vue生命周期函数(因为在整个vm干活当中特殊的时间点去帮你调用的)
这里的this
为什么是vm
,箭头函数往外找,找到mounted
的this,Vue在帮你调mounted
的时候this
已经帮你维护好了,就是vm
vm的生命周期指的就是vm的一生
总结
生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm或者组件实例对象