vue---组件生命周期钩子函数(共11个,此处举例八个)

vue生命周期图示详情链接

vue---组件生命周期钩子函数(共11个,此处举例八个)_第1张图片
组件生命周期钩子函数有十一个,暂时学了八个,其中有六个是执行一次的,有两个是循环执行的
如果在更新阶段,改变了data,会触发什么样的结果:内存溢出,死循环

vue---组件生命周期钩子函数(共11个,此处举例八个)_第2张图片


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue组件生命周期title>
    <style>
      .ball {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: orangered;
      }
    style>
  head>
  <body>
    <div id="app">
      <h1 @click="count++">计数值为:{{count}}h1>
      <ball v-if="isShow">ball>
      <button @click="isShow=!isShow">togglebutton>
    div>
    <script src="./libs/vue.js">script>
    <script>
      var ball = {
        template: '
'
, beforeDestroy() { console.log("组件销毁之前"); }, destroyed() { console.log("组件销毁完成"); }, }; new Vue({ el: "#app", data: { count: 1, isShow: true, }, components: { ball, }, beforeCreate() { console.log("组件创建之前"); }, created() { console.log("组件创建完成"); }, beforeMount() { console.log("组件挂载之前"); }, mounted() { console.log("组件挂载完成"); // this.$el可以获取当前组件中的dom元素 // console.log(this.$el); // this.$el.querySelector("h1").style.color = "red"; }, beforeUpdate() { console.log("组件更新之前"); }, updated() { console.log("组件更新完成"); // this.count++; 死循环 }, beforeDestroy() { console.log("组件销毁之前"); }, destroyed() { console.log("组件销毁完成"); }, });
script> body> html>

你可能感兴趣的:(三阶段,Vue)