vue framework learning (3)-life cycle

1. What is MVVM

MVVM is an abbreviation of Model-View-ViewModel, which is reflected in the framework as follows: (The picture is found on the Internet) is

reflected in the code writing position as follows:

MVVM is one of them View 的状态和行为抽象化, let us 视图 UI 和业务逻辑separate. Of course, the ViewModel has already done these things for us, it can 取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑, but MVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性, let the development focus on business processing, the display of the interface is only a small part of the things.

Two, create a Vue instance

If you have studied object-oriented programming, you are super familiar with this example, which is a creation of objects. The same is true for Vue, using the new keyword. Every Vue application starts by creating a new Vue instance with Vue functions:

var vm = new Vue({
  // 选项
})

Three, the options of Vue

3.1 What are options

When we write a Vue instance, an object, or a parameter, can be passed into the instance, but the object of
this parameter is written on the official website. Put this object in ({object value: option})

	const app = new Vue({
			el: "#app1",
			data: {
				message: "hello vue"
			}
		})

I put this object out, so that it will be more obvious. In fact, it is a parameter passing obj, but there are many values ​​in the parameter passing object for yourself to choose.对象里的值就是Vue的选项

var obj = {
			el: "#app1",
			data: {
				message: "hello vue"
				}
			}
const app = new Vue(obj)

3.2 What are the option values

You can take a look at the option API on the official website . There are so many option values, we don’t need to remember so many, and we can’t remember so many. I just need to remember a few commonly used ones. .

#el
Type: string Element
restrictions:只在用 new 创建实例时生效 .

#data
Type: Object Function
Limitation: The definition of the component 只接受 function.

#methods
Type: {[key: string]: Function }
Details: methods will be mixed into the Vue instance. You can directly VM 实例access these methods, or instruction used in the expression method of thisautomatically binding to Vue instance.

#生命周期钩子
函数名称：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated 、deactivated、beforeDestroy、destroyed、errorCaptured

Four, Vue life cycle

4.1 Life Cycle Diagram

The life cycle of Vue starts from the beginning 创建, 初始化data, 编译templates, 挂载Dom 渲染→ 更新→ 渲染→ 销毁(pictures found on the Internet)

4.2 life cycle hook function

hook	Description
beforeCreate	After the instance is initialized, it is called before data observation and event/watcher time configuration. At this time, the this variable cannot be used. The data under data, the methods under methods, and the events in the watcher cannot be obtained;console.log(this.page); // undefined
created	Called after the instance has been created. At this step, the instance has completed the following configuration: data observation, attribute and method calculation watch/event event callback. However, the mount phase has not yet started, and the $el attribute is currently not visible. At this time, the data and various methods in the vue instance can be manipulated, but the "dom" node cannot be manipulated yet; let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值
beforeMount
mounted	At this time, the mounting is complete, and the dom node is rendered into the document at this time, and some operations that require dom can be performed normally at this time. Note: mounted is executed only once in the life cycle of the entire instance. let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值
beforeUpdate	Operation before data update
updated	The virtual DOM is re-rendered and patched due to data changes, after which the hook will be called. When this hook is called, the component DOM has been updated, so you can now perform operations that depend on the DOM. In most cases, however, you should avoid changing the state during this period, as this may cause an endless loop of updates.
activated	Called when the keep-alive component is activated. This hook is not called during server-side rendering.
deactivated	Called when the keep-alive component is disabled. This hook is not called during server-side rendering.
beforeDestroy	It is before the destruction of the Vue instance, as we often see: "Are you sure you want to exit this interface"
destroyed	Called after the Vue instance is destroyed. After the call, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.

Keep-alive: The
concept
    keep-alive is a built-in component of Vue. When it wraps dynamic components, it caches inactive component instances instead of destroying them. Similar to transition, keep-alive is an abstract component: it will not render itself as a DOM element, nor will it appear in the parent component chain.
It is
    used to keep the state in the memory during component switching, prevent repeated rendering of the DOM, reduce loading time and performance consumption, and improve user experience

Article notes refer to https://blog.csdn.net/qq_30442207/article/details/108266756