vue生命周期详细

最新推荐文章于 2022-09-21 16:41:28 发布

Gjanuary

最新推荐文章于 2022-09-21 16:41:28 发布

阅读量175

点赞数

分类专栏：前端学习记录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Gjanuary/article/details/121796310

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue生命周期</title>
	<script type="text/javascript" src="./vuebasic/vue.js"></script>
   
    <style>
     
    </style>
</head>
<body>
  
    <div id="root">
       <h3>{{ n }}</h3>
       <button @click="add">增加</button>
       <button @click="destroy">点我销毁vm</button>
    </div>

	<script>
		Vue.config.productTip = false// 阻止启动时候提示生产错误
        const vm = new Vue({
            el:'#root',
            data:{
               n:0
            },
            methods:{
                add(){
                    this.n++
                },
                destroy(){
                    // 虽然销毁了vm，但是vm最后的工作成果还在
                    this.$destroy()
                }
            },
            // 生命周期函数测试
            // 此时无法通过vm访问到data中的数据，methods中的方法
            beforeCreate(){
                console.log('初始化生命周期，事件已经完成，但是数据代理并没有开始')

            },
            // 此时的数据代理和数据加载已经完成，包括方法和数据，但是还没有生成虚拟dom
            created(){
                console.log('此时只是完成的数据和方法，但是并没有完成创建虚拟dom的')
            },
            // 进行挂载之前，此时已经完成了虚拟dom的制作，存储在内存中
            beforeMount(){
                console.log('单存的完成了虚拟dom的创建并没有真正的挂载到真实的页面中')
            },
            // 已经将内存中的虚拟dom 转入成真实dom插入的页面中，此时的初始化过程已经全部结束
            mounted(){
                console.log('虚拟dom 转入成真实dom插入的页面中')
            },
            // 当进行更改的时候，此时数据是新的，但页面时旧的，页面和数据尚未进行同步
            beforeUpdate(){
                // 此时的数据虽然增加了，但是页面中显示的还是原来的数字
                console.log('数据更新但是页面并没有同步',this.n)
            },
            // 此时的页面和数据已经同时进行了更新，也就是数据和页面中显示的数据是一致的
            updated(){
                console.log(this.n)
            },
            // 销毁前进行处理，vm中的所有的data，methods，指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器
            // 取消订阅消息，解绑自定义事件
            // 所以的数据和方法你都能调用到，但是更新不会被触发了，页面也就不会进行更新了
            beforeDestroy(){
                console.log('销毁之前可执行代码')
            },
            destroyed(){
                console.log('已经将vm销毁')
            }
           
        })
       
	</script>
</body>
</html>