vue-cli使用, Vue组件生命周期

基本的命令

npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

如果版本不对, 重新安装nodejs
https://cdn.npm.taobao.org/dist/node/v14.2.0/node-v14.2.0-x64.msi

删掉这些这个文件夹 %userprofile%\AppData\Roaming\npm
参考官方网站:
https://cli.vuejs.org/zh/guide/installation.html

webstorm激活不了?
链接: https://pan.baidu.com/s/1TiRv0KlzRa7-w5gLPzZlWw 提取码: aa77

image.png

创建个组件测试:
src\components\TodoItem.vue

<template>
    <li class="item">{{item}}</li>
</template>

<script>
    export default {
        props: ['item'],
        name: "TodoItem",
        beforeCreate() {
            console.log("子组件beforeCreate");
        },
        created() {
            console.log("子组件Created");
        },
        beforeMount() {
            console.log("子组件beforeMount");
        },
        mounted() {
            console.log("子组件mounted");
        },
        beforeUpdate() {console.log("子组件beforeUpdate");},
        updated() {console.log("子组件updated")},
        beforeDestroy() {console.log("子组件beforeDestroy")},
        destroyed() {console.log("子组件destroyed")}
    }
</script>

<style scoped>
    .item {color: red;}
</style>

src\App.vue

<template>
  <div id="app">
    {{msg}}
    <div>
      <input type="text" v-model="info">
      <button v-on:click="handleClick">添加</button>
    </div>
    <ul>
      <todo-item v-for="item in list" :key="item" :item="item"></todo-item>
    </ul>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import TodoItem from "./components/TodoItem";

export default {
  name: 'App',
  components: {
    TodoItem,  // 注册依赖的组件
  },
  data() {
    return {
      msg: "Hello geektime",
      info: '',
      list: [ "Initial line" ],
    }
  },
  methods: {
    handleClick() {
      this.list.push(this.info);
      this.info = '';
    }
  },
  beforeCreate() {console.log("父组件beforeCreate");},
  created() {console.log("父组件Created");},
  beforeMount() {console.log("父组件beforeMount");},
  mounted() {console.log("父组件mounted");},
  beforeUpdate() {console.log("父组件beforeUpdate");},
  updated() {console.log("父组件updated")},
  beforeDestroy() {console.log("父组件beforeDestroy")},
  destroyed() {console.log("父组件destroyed")}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果如下:

image.png

创建的时候，子组件创建过程，夹在父组件的 beforeMount, mounted之间。

这个示例代码不能说明销毁的场景：
我这样改一下:
把以前的App.vue里面的内容都拿出来作为父组件Panel.vue，App.vue中引入Panel.vue

Panel.vue

<template>
    <div class="panel">
        {{msg}}
        <div>
            <input type="text" v-model="info">
            <button v-on:click="handleClick">添加</button>
        </div>
        <ul>
            <todo-item v-for="item in list" :key="item" :item="item"></todo-item>
        </ul>
    </div>
</template>

<script>
    // import HelloWorld from './components/HelloWorld.vue'
    import TodoItem from "./TodoItem";

    export default {
        name: 'Panel',
        components: {
            TodoItem,  // 注册依赖的组件
        },
        data() {
            return {
                msg: "Hello geektime",
                info: '',
                list: [ "Initial line" ],
            }
        },
        methods: {
            handleClick() {
                this.list.push(this.info);
                this.info = '';
            }
        },
        beforeCreate() {console.log("父组件beforeCreate");},
        created() {console.log("父组件Created");},
        beforeMount() {console.log("父组件beforeMount");},
        mounted() {console.log("父组件mounted");},
        beforeUpdate() {console.log("父组件beforeUpdate");},
        updated() {console.log("父组件updated")},
        beforeDestroy() {console.log("父组件beforeDestroy")},
        destroyed() {console.log("父组件destroyed")}
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

使用v-if="false"即可销毁里面的组件

App.vue

<template>
  <div id="app">
    <button v-on:click="destroyAll">清空组件</button>
    <div v-if="hasPanel">
      <Panel></Panel>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Panel from "./components/Panel";

export default {
  name: 'App',
  components: {
    Panel,  // 注册依赖的组件
  },
  data() {
    return {
      hasPanel: true
    }
  },
  methods: {
    destroyAll() {
      this.hasPanel = false;
    }
  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image.png

销毁的时候，子组件销毁过程夹在父组件的beforeDestroy， Destroyed之间。