VUE [Introduction (2)]

cycle	illustrate
beforeCreate	Called after instance initialization, but before data observation and event configuration
created	Called immediately after the instance is created to complete data observation, property and method operations, initialization events, $el property is not seen
beforeMount	Called before the mount starts: the relevant render function is called for the first time, only generating HTML in the virtual DOM
mounted	Called after el is replaced by the newly created vm.$el and mounted to the instance. The instance has completed the following configuration: replace the DOM object pointed to by the el attribute with the compiled html content above. Complete the html rendering in the template to the html page. Ajax interaction during this process
beforeUpdate	Called before the data is updated, before the virtual DOM is re-rendered and patched. The state can be further changed in this hook without triggering additional re-rendering process
updated	Called after the virtual DOM has been re-rendered and patched due to data changes. When called, the component DOM has been updated, so operations that depend on the DOM can be performed. In most cases, however, changing state during this time should be avoided, as this may cause an infinite loop of updates. This hook is not called during server-side rendering
activated	Called when the keep-alive component is activated
deactivated	Called when the keep-alive component is deactivated
beforeDestroy	Called before the instance is destroyed. Instance is still fully available
destroyed	Called after the instance is destroyed. After calling, all event listeners will be removed and all child instances will be destroyed. This hook is not called during server-side rendering

3. Detailed code explanation

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之Helloworld</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{
   
   {message}}
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					message:'hello Vue!'
				},
				beforeCreate: function () {
					console.group('beforeCreate 创建前状态===============》');
					console.log("%c%s", "color:red" , "el      : " + this.$el); //undefined
					console.log("%c%s", "color:red","data    : " + this.$data); //undefined 
					console.log("%c%s", "color:red","message: " + this.message)  
				},
				created: function () {
					console.group('created 创建完毕状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el); //undefined
					console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化 
					console.log("%c%s", "color:red","message: " + this.message); //已被初始化
				},
				beforeMount: function () {
					console.group('beforeMount 挂载前状态===============》');
					console.log("%c%s", "color:red","el      : " + (this.$el)); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化  
					console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
				},
				mounted: function () {
					console.group('mounted 挂载结束状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el); //已被初始化
					console.log(this.$el);     
					console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化
					console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
				},
				beforeUpdate: function () {
					console.group('beforeUpdate 更新前状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el);
					console.log(this.$el);    
					console.log("%c%s", "color:red","data    : " + this.$data); 
					console.log("%c%s", "color:red","message: " + this.message); 
				},
				updated: function () {
					console.group('updated 更新完成状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el);
					console.log(this.$el); 
					console.log("%c%s", "color:red","data    : " + this.$data); 
					console.log("%c%s", "color:red","message: " + this.message); 
				},
				beforeDestroy: function () {
					console.group('beforeDestroy 销毁前状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el);
					console.log(this.$el);     
					console.log("%c%s", "color:red","data    : " + this.$data); 
					console.log("%c%s", "color:red","message: " + this.message); 
				},
				destroyed: function () {
					console.group('destroyed 销毁完成状态===============》');
					console.log("%c%s", "color:red","el      : " + this.$el);
					console.log(this.$el);  
					console.log("%c%s", "color:red","data    : " + this.$data); 
					console.log("%c%s", "color:red","message: " + this.message)
				}
			})
		</script>
	</body>
</html>

4. Analysis of results

Open it in the chrome browser, F12 to view the console, and interpret it in three stages

Phase 1: Create and Mount

beforecreated: el and data are not initialized
created: completed the initialization of data data, el did not
beforeMount: Completed el and data initialization
mounted : completed mounting

Phase Two: Update

Execute the following command in the chrome console:

app.message= 'yes !! I do';

beforeUpdate: Update html according to data changes in virtual DOM
updated: update the HTML of the virtual DOM update to the page

Phase Three: Destruction

Execute the following command in the chrome console:

app.$destroy();

beforeDestroy: called before destruction
destroyed: Called after destruction, and then execute app.message = 'hello vue', the page will not be updated synchronously.

The specific diagram is as follows:

1.4 Common options

Vue has many configuration options, some commonly used options are listed in this section

1、computed

Computational attributes: mainly to transform and output the original data. Retrofit output: including formatting data (price, date), case conversion, sorting, adding symbols

Call the get/set method to transform the data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="price">
			<div v-text="changePirce"></div>
		</div>
	</body>
</html>
<script>
	let vue = new Vue({
		el: "#app",
		data: {
			price: 15
		},
		computed: {
			changePirce : {
				get: function() {
					return "￥" + this.price + "元";
				},
				set : function (v){
					return this.price = v; 
				}
			}
		}
	});
</script>

2、methods

Method attribute: used to bind the method corresponding to the event in html

methods:{
	add (num) {
		this.count += num;
	}
}

3、watch

Data change listener: mainly used to monitor data changes in data to make v-model take effect

Note that you should not use arrow functions to define watcher functions

watch: {
			被监听的属性: {
				处理方法 : function(val, oldVal) {
					console.log('new: %s, old: %s', val, oldVal);
				},
				被嵌套也能成功监听(深度监听) : true
			}
		}

4、filters

Filter: usually formatted characters, using pass-by

filters: {
	filterA(value) {
		return value.toUpperCase();
	}
}

5、mixins

Mix-in: used to reduce code pollution, reduce code volume, and achieve code reuse

// 额外临时加入时，用于显示日志
var addLog={
	updated:function(){
		console.log("数据放生变化,变化成"+this.count+".");
	}
}

// 实例化vue
var app = new Vue({
	// 挂载实例
	el:'#app',
	// 页面数据初始化，字符，对象、数组
	data:{
		count: 100
	},
	// 混入
	mixins: [addLog]
})

6、extends

Extension: Extend the constructor

// 扩展
var extendObj ={
	created: function(){
		console.log("我是被扩展出来的");
	}
}

// 实例化vue
var app = new Vue({
	// 挂载实例
	el:'#app',
	// 页面数据初始化，字符，对象、数组
	data:{
	},
	// 扩展
	extends: extendObj
})

1.5 Instance events

Vue has instance attributes, instance methods, and instance events. The first two are similar to options and are not very commonly used. Here we only talk about instance events.

1. $on (add event outside the constructor)

$on receives two parameters, the first parameter is the event name when calling, and the second parameter is an anonymous method

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.count--;
});

2. $once (an event executed once)

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.count--;
});

3. $off (close event)

function off(){
    console.log('关闭事件');
    app.$off('reduce');
}

4. $emit (event call)

function reduce() {
    // 事件调用
    console.log('emit事件调用');
    app.$emit('reduce');
}

5. Complete sample code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>数字：{
   
   {count}}</div>
			<button onclick="reduce()">on调用</button>
			<button onclick="reduceOnce()">once调用</button>
			<button onclick="off()">off调用</button>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					count: 1
				}
			})
			// $on 在构造器外部添加事件
			app.$on('reduce', function() {
				console.log('执行了reduce()');
				this.count--;
			});
			// 调用
			function reduce() {
				// 事件调用
				console.log('emit事件调用');
				app.$emit('reduce');
			}

			// $once执行一次的事件
			app.$once('reduceOnce', function() {
				console.log('只执行一次的方法');
				this.count--;
			});
			// 调用
			function reduceOnce() {
				app.$emit('reduceOnce');
			}

			// 关闭事件
			function off() {
				console.log('关闭事件');
				app.$off('reduce');
			}
		</script>
	</body>
</html>