vue-生命周期

概念：
每个组件的实例，都将进行 创建、运行、销毁 三个阶段；
在这些阶段中会自动触发一系列事件，并且执行函数；
这些就是生命周期事件和生命周期函数。

Vue中的生命周期

实例代码：

<div id="app">
		<!-- 添加新名称 -->
		<div>
			<input v-model="name" />
			<button @click="add">添加</button>
		</div>
		<ul>
			<li v-for="item in list" :key=item.id>
				<input type="checkbox" />
				编号：{{item.id}} --- 姓名：{{item.name}}
			</li>
		</ul>
		
	</div>

	<script type="text/javascript">
		const vue = new Vue({
			el: '#app',
			data: {
				name: '礼拜',
				list:[
					{id: 0, name: '张三'},
					{id: 1, name: '李四'},
					{id: 2, name: '王五'}
				]
			},
			methods: {
				add(){
					console.log('add函数被执行')
					var newuser = {id: this.list.length, name: this.name}
					this.list.unshift(newuser)
				}
			},
			//生命周期函数
			beforeCreate(){
				console.log(this.name)//undefined
				//this.add()//this.add is not a function
				console.log(this.$el)//undefined
			},
			created(){
				console.log(this.name)//张三
				this.add()//add函数被执行
				console.log(this.$el)//undefined
			},
			beforeMount(){
				console.log(this.$el)//输出原始模板结构
			}

		})

原始模板结构：

页面展示：