引出生命周期

实现一个透明度来回变化的效果。

实现方式一：通过外部的定时器实现

缺点：代码有点割裂，代码尽量写在Vue实例里面，全局配置可以写在外面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引出生命周期</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2><!-- <button @click="fang">点我变化透明度</button> --></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{opacity:1,},})// 通过外部的定时器实现setInterval(()=>{vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity=1},16)
</script>
</html>

实现方式二：methods

methods中使用事件回调不可取，不符合需求。
此时，data中数据变化，重新解析模板，每个重新解析，又会再次调用开启定时器，如此一来，会极大消耗资源，并且屏幕出现鬼畜效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uakwmN2-1659269367736)(2022-07-31-18-15-12.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引出生命周期</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2>{{change()}}</div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{opacity:1,},methods:{change(){setInterval(()=>{console.log("change")this.opacity -= 0.01if(this.opacity <= 0) vm.opacity=1},16)}}})
</script>
</html>

实现方式三：生命周期mounted

Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted，只调用了一次，开启了一个定时器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSD7FoWV-1659269367739)(2022-07-31-18-20-12.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引出生命周期</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{opacity:1,},// Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mountedmounted(){console.log("mounted")setInterval(()=>{this.opacity -= 0.01if(this.opacity <= 0) vm.opacity=1},16)},})
</script></html>

总结：

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this执行是vm 或组件实例对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ETs206ms-1659269367740)(./lifecycle.png)]

分析生命周期

vm销毁后原生回调好使

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUUDH71A-1659269367742)(2022-07-31-18-30-09.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>分析生命周期</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>当前的n值是{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',// // template全部替换el指向元素，的有一个根元素// template:`// <div>//     <h2>当前的n值是{{n}}</h2>//     <button @click="add">点我n+1</button>// </div>// `,data:{n:1},methods:{add(){this.n++},bye(){ // vm销毁后 原生回调好使console.log("bye")this.$destroy()}},beforeCreate() {// 此时vue中没有数据，还没绑定，vm实例中没有_data和nconsole.log("beforeCreate")// console.log(this)  // Vue// debugger},created() {// 此时vue实例上有了_data和n及其getsetconsole.log("created")// console.log(this)// debugger},beforeMount() {// 这里边操作DOM无效console.log("beforeMount")// console.log(this)// // debugger// document.querySelector('h2').innerText = '哈哈'},mounted() {console.log("mounted")// console.log(this)// // 对DOM操作有效// document.querySelector('h2').innerText = '哈哈'// debugger},beforeUpdate() { //页面和数据未同步console.log("beforeUpdate")// console.log(this.n)// debugger},updated() { //页面和数据同步console.log("updated")// console.log(this.n)// debugger},beforeDestroy() { // 到了这个阶段 设计数据更新不会再起到效果console.log("beforeDestroy")},destroyed() {console.log("destroyed")},})
</script>
</html>