一篇文章带你搞懂Vue的生命周期

文章目录

• • 1、引入生命周期
  • • 1.1、搭建页面结构
  • 2、vue的生命周期函数
  • • 2.1、挂载流程
    • 2.2、更新流程
    • 2.3、销毁流程
  • 3、vue的生命周期总结

1、引入生命周期

假设有这么一个案例，打开一个页面，上面显示的内容在不断地由清晰到模糊的变化，也就是说不断地改变透明度，应该如何实现这么一个案例呢？

1.1、搭建页面结构

<div id="root">
    <h2 :style="{opacity}">{
  {msg}}</h2>
</div>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            opacity: 1,
            msg: 'vue的生命周期'
        }
    })
</script>

一种很容易想到的思路是我们在外部开一个定时器，就像下面这样

    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            opacity: 1,
            msg: 'vue的生命周期'
        }
    })
    setInterval(() => {
        vm.opacity -= 0.01
        if(vm.opacity <= 0) vm.opacity = 1
    }, 16)

静态图不方便展示，但实际上是可以看到效果的。

但这样做的有不好的地方，我们在vue对象管理的外部写入了其他的脚本，而且还修改了vm中的属性，实际情况下，我们不会用vm来接收vue对象。

另一种思路是我们写一个回调函数

methods: {
    change() {
        setInterval(() => {
        	console.log('调用了定时器')
            this.opacity -= 0.01
            if(this.opacity <