Vue学习计划-Vue2--Vue核心（七）生命周期

news2024/11/27 20:59:51

抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现
示例：

<body>
<div id="app">
    {{ n }}
    <button @click="add">执行</button>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data:{
            n: 1
        },
        methods: {
            add(){
                // this.n ++
                setInterval(()=>{
                    this.n ++
                },1000)
            }
        },
        // 特定时期调用特定函数（这就是 生命周期函数/钩子函数 ）
        // 表示页面渲染完成之后
        mounted(){
            setInterval(()=>{
                this.n ++
            },1000)   
        }
    })
    // 外部执行 不推荐，开启了定时器，最后要销毁的
    // setInterval(()=>{
    //     vm.n ++
    // },1000)
</script>
</body>

下面正式进入生命周期

1. 生命周期

常用的生命周期钩子：
1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何消息
2. 销毁后自定义事件会失效
3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会在触发更新流程了
4. vm.$destroy():完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
vm的生命周期
1. 将要创建 ==> 调用beforeCreate函数
2. 创建完毕 ==> 调用created函数
3. 将要挂载 ==> 调用beforeMount函数
4. （重要）挂载完毕 ==> 调用mounted函数 =====>【重要的钩子】
5. 将要更新 ==> 调用beforeUpdate函数
6. 更新完毕 ==> 调用updated函数
7. （重要）将要销毁 ==> 调用beforeDestroy函数 =====>【重要的钩子】
8. 销毁完毕 ==> 调用destroyed函数
注意：
$destory方法进入销毁生命周期，进入beforeDestroy后，销毁页面。vue-tools就不在监视,并且页面dom与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>Document</title>
	    <script src="./vue.js"></script>
	</head>
	<body>
	<div id="app" :x="n">
	    <h2>当前的n值是：{{ n }}</h2>
	    <button @click="add">添加</button>
	    <button @click="bye">销毁</button>
	</div>
	
	<script>
	    const vm = new Vue({
	        el: "#app",
	        // template:'<h2>当前的n值是：{{ n }}</h2><button @click="add">添加</button> <button @click="bye">销毁</button> ', // 模板不能空格
	        // template:`
	        // <div>
	        // 		<template>
	       //     		<h2>当前的n值是：{{ n }}</h2>
	        //   		<button @click="add">添加</button> 
	        //     		<button @click="bye">销毁</button> 
	        // 		</template>
	        // </div>
	        // `,
	        // template:`
	        // <div>
	        //     <h2>当前的n值是：{{ n }}</h2>
	        //     <button @click="add">添加</button> 
	        //     <button @click="bye">销毁</button> 
	        // </div>
	        // `,
	        data: {
	            n: 1
	        },
	        methods: {
	            add(){
	                console.log("add")
	                this.n ++
	            },
	            bye(){
	                this.$destroy()
	            }
	        },
	        beforeCreate() {
	            console.log('beforeCreate');
	            // console.log(this)
	            // debugger
	        },
	        created() {
	            console.log('created');
	            // console.log(this)
	            // debugger
	        },
	        beforeMount() {
	            console.log('beforeMount');
	            console.log(this);
	            // 最终都不奏效
	            // document.querySelector("h2").innerText = "哈哈"
	            // debugger
	        },
	        mounted() {
	            console.log('mounted');
	            console.log(this.$el)
	            // 可以修改真实DOM，不推荐
	            // document.querySelector("h2").innerText = "哈哈"
	            // console.log(this)
	            // debugger
	        },
	        beforeUpdate() {
	            console.log('beforeUpdate');
	            // console.log(this.n)
	            // debugger
	        },
	        updated() {
	            console.log('updated');
	            // this.n = 99
	            // console.log(this.n)
	            // debugger
	        },
	        beforeDestroy() {
	            console.log('beforeDestroy');
	            console.log(this.n)
	            this.n = 99
	            // debugger
	        },
	        destroyed() {
	            console.log('destroyed');
	            // console.log(this)
	            // debugger
	        },
	    })
	    // vm.$mount("#app")
	</script>
	</body>
	</html>

回归问题：beforeDestroy生命周期内清除定时器

<body>
<div id="app">
  <p v-text="n"></p>
  <h2>此时的n值是：{{ n }}</h2>
  <button @click="n=99">n值设置为99</button>
  <button @click="bye">停止</button>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data:{
            n: 1
        },
        methods: {
          bye(){
         	// 手动清除定时器，DOM和Vue还有联系，所以点击n=99还能实现
            // clearInterval()
            // clearInterval(this.timer)
            // 手动调用$destory方法进入销毁生命周期，对比区别：进入beforeDestroy后，销毁页面。vue-tools就不在监视。并且页面dom与Vue断了联系，点击n=99,已经无反应
            this.$destroy()
          }
        },
        mounted(){
          console.log("mounted")
          this.timer = setInterval(()=>{
              console.log('setInterval')
              this.n ++
          },1000)   
        },
        beforeDestroy(){
          console.log(111);
          clearInterval(this.timer)
        }
    })
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1291451.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！