Vue life cycle table: (English)

(middle)

1. Vue instance creation phase

1: beforeCreate() { }

The first lifecycle function executed after Vue starts, the data in data and methods has not been initialized during execution . (The beginning of everything, as the name suggests - it's useless)

beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
  // console.log(this.msg)
  // this.show()
  // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},

2: created() { }

The second lifecycle function executed after Vue starts, in created, both data and methods have been initialized . If you want to call the methods in methods, or manipulate the data in data, you can only operate in created at the earliest ! !

created() { // 这是遇到的第二个生命周期函数
  // console.log(this.msg)
  // this.show()
  //  在 created 中，data 和 methods 都已经被初始化好了！
  // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},

3: beforeMount() { }

The third life cycle function executed after Vue starts, indicates that the template has been edited in memory , but the template has not been rendered to the page yet. When beforeMount is executed, the elements in the page have not been actually replaced, just some template strings written before

beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
  // console.log(document.getElementById('h3').innerText)
  // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},

4: mounted() { }

The fourth lifecycle function executed after Vue starts indicates that the template in memory has been actually mounted to the page, and the user can already see the rendered page. Note: mounted is the last life cycle function during instance creation. When mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, this instance will not perform any operations}.

mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
  // console.log(document.getElementById('h3').innerText)
  // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
},

Vue instance running phase

1: beforeUpdate() { }

At this stage, the interface has not been updated but the data in the DOM has been updated. When beforeUpdate is executed, the data displayed on the page is still old. At this time, the data data is the latest, and the page has not yet been synchronized with the latest data.

beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
  /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
  console.log('data 中的 msg 数据是：' + this.msg) */
  // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},

2: updated() { }

At this stage, the interface and data have been updated. When the updated event is executed, the page and data data have been kept in sync and are up to date

updated() {
  console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
  console.log('data 中的 msg 数据是：' + this.msg)
  // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
}

Vue instance destruction phase

1: beforeDestroy() { }

When executing beforeDestroy, all the data and all methods, performers, and instructions on the instance are available. At this time, the process of destruction has not yet been actually executed.

2: destroyed() { }

When the destroyed function is executed, the component has been completely destroyed. At this time, all data, methods, instructions, filters.... in the component are no longer available

Difficulties (new knowledge points):

1. The JavaScript Console object

JavaScript Console Object | Rookie Tutorial (runoob.com) https://www.runoob.com/w3cnote/javascript-console-object.html

The Console object is used for JavaScript debugging.

By default, there is no Console object in native JavaScript, which is a built-in object provided by the host object (that is, the browser). Used to access the debug console, may work differently in different browsers.

There are two common uses of the Console object:

Displays error messages when the web page code is running.
Provides a command-line interface for interacting with web page code.

二：document.getElementById('demo').innerText

document.getElementById - Web API interface reference | MDN (mozilla.org) https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById innerHTML is a two-way function in JS: get the content of the object or Insert content into the object;
for example: <div id="demo">This is the content</div>get
the embedded content of the object whose id is aa through document.getElementById('demo').innerHTML;
An object inserts content,
such as document.getElementById('demo').innerHTML='This is the inserted content'; In this way, content can be inserted into the object whose id is abc.

document.getElementById().innerHTML_qq_45330179's Blog - CSDN Blog_document.getelementbyid().innerhtml https://blog.csdn.net/qq_45330179/article/details/107239340

This article was written independently by the author

All original articles on this blog may not be used for commercial purposes and traditional media without my permission. Please indicate the source for reprinting by online media, otherwise it is an infringement.

Vue study notes (5): life cycle function