vue生命周期

最新推荐文章于 2022-04-01 14:21:07 发布

猪皮惡霸

最新推荐文章于 2022-04-01 14:21:07 发布

阅读量41

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/typeof83/article/details/109732353

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
<script>
  // var box = document.querySelector('.box');
</script>
</head>
<body>

<div id="app">
  <button @click="destroyHehe">销毁</button>
  <hehe v-if="isShow"></hehe>
</div>

<template id="hehe">
  <div class="hehe">
    <h1>这里是呵呵组件</h1>
    <div ref="box" class="box">{{num}}</div>
    <button @click="change">修改数据</button>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

Vue.component('hehe',{
  template: '#hehe',
  data(){
    return {
      msg: 'hi，my name is hehe',
      num: 1
    }
  },
  methods: {
    change(){
      this.num++;
    }
  },
  beforeCreate(){
    // 组件创建之前执行
    console.log('创建之前。。。');
    // console.log(this);// Vue{...}
    // console.log(this.msg);//undefiend
    // console.log( document.querySelector('.box') );//null
    console.log(this.$refs.box);
    // 有实例对象
    // 没有数据，没有真实dom
    // 很少用
  },
  created(){
    // 创建完成时执行
    console.log('创建完成。。。');
    // console.log(this);// {...}
    // console.log(this.msg);//hi，my name is hehe
    // console.log( document.querySelector('.box') );//null
    console.log(this.$refs.box);
    // 有实例对象，有数据
    // 没有真实dom
    // 用于数据请求
    // this.num++;//在此阶段修改数据，不会触发更新的钩子函数
  },
  beforeMount(){
    // 虚拟dom变成真实dom之前执行
    console.log('挂载之前。。。');
    // console.log(this);// {...}
    // console.log(this.msg);//hi，my name is hehe
    // console.log( document.querySelector('.box') );//null
    // 有实例，有数据，没有真实dom
    // 少用，和created类似
  },
  mounted(){
    // 虚拟dom变成真实dom之后执行
    console.log('挂载完成。。。');
    // console.log(this);// {...}
    // console.log(this.msg);//hi，my name is hehe
    // console.log( document.querySelector('.box') );//<div class="box">1</div>
    // 有实例，有数据，有真实dom
    // 常用，可以进行一些初始化操作
    // this.num++;//在此阶段修改数据，会触发更新的钩子函数

    this.timer = setInterval(function (){
      console.log(666);
    },1000);
  },
  // 以上四个钩子函数，一个组件只执行一次
  beforeUpdate(){
    // 数据更新之前执行
    console.log('更新之前。。。');
    // console.log(this);// {...}
    // console.log(this.msg);//hi，my name is hehe
    // console.log( document.querySelector('.box').innerHTML );//1
    // console.log(this.num);//2 数据是更新之后的值
    // 数据是更新之后的值，dom中的数据是更新之前的
  },
  updated(){
    // 数据更新完成之后执行
    console.log('更新完成。。。');
    // console.log( document.querySelector('.box').innerHTML );//2
    // console.log(this.num);//2 数据是更新之后的值
    // 数据是更新之后的值，dom中的数据是更新之后的
  },
  beforeDestroy(){
    // 组件销毁之前执行
    console.log('销毁之前。。。');
    // console.log(this);//vue{...}
    // console.log(this.msg);// 有数据
    // console.log( document.querySelector('.box') );//null
    // console.log( this.$refs.box );//div.box
  },
  destroyed(){
    // 组件销毁之后执行
    console.log('销毁完成。。。');
    // console.log(this);//vue{...}
    // console.log(this.msg);// 有数据
    // console.log( document.querySelector('.box') );//null
    // console.log( this.$refs.box );//div.box

    clearInterval(this.timer);
  }
})

// 创建vue实例
var vm = new Vue({//配置项
  el: '#app',// 挂载点
  data: {// 数据
    isShow: true
  },
  methods: {// 方法，事件处理函数所在的地方
    destroyHehe(){
      this.isShow = !this.isShow;
    }
  }
})
</script>
</body>
</html>

猪皮惡霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style><script> // var bo
复制链接

扫一扫