Vue.js实例学习：生命周期

最新推荐文章于 2023-01-03 12:06:29 发布

白小宇

最新推荐文章于 2023-01-03 12:06:29 发布

阅读量720

点赞数

分类专栏： Vue web前端文章标签： vue 生命周期

本文链接：https://blog.csdn.net/b954960630/article/details/87530425

版权

本文详细探讨了Vue.js组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated和deactivated等阶段，并通过实例展示了每个阶段的特点和用途。还介绍了优化技巧——keep-alive组件的使用，如何避免不必要的组件创建和销毁，提高应用性能。

摘要由CSDN通过智能技术生成

Vue生命周期钩子：

beforeCreate、created
beforeMount、mounted
beforeUpdate、updated
activated、deactivated
beforeDestroy、destroyed
errorCaptured

一、beforeCreate、created

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `<div>{
  { myText }}</div>`,
    data() {
      return {myText: 'Hello Vue'};
    },
    beforeCreate: function() {
      console.log('beforeCreate: ',this.myText);
    },
    created: function() {
      console.log('created: ',this.myText);
    },
  };

  new Vue({
    el: '#app',
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制台输出：
在这里插入图片描述
说明：在created中可以操作数据，并且可以实现从Vue到页面的影响。应用：发起Ajax请求。

在这里插入图片描述

二、beforeMount、mounted

<div id="test">
  <div id="app"></div>
</div>

<script type="text/javascript">
  let App = {
    template: `<div>{
  { myText }}</div>`,
    data() {
      return {myText: 'Hello Vue'};
    },
    beforeMount: function() {
      console.log('beforeMount: ',this.myText);
      console.log(document.getElementById('test').innerHTML);
    },
    mounted: function() {
      console.log('mounted: ',this.myText);
      console.log(document.getElementById('test').innerHTML);