vue计算属性和vue实力的属性和方法

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue生命周期</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					msg:'welcome to itany'
				},
				methods:{
					update(){
						this.msg='欢迎来到南京网博！';
					},
					destroy(){
						// this.$destroy();
						vm.$destroy();
					}
				},
				beforeCreate(){
					alert('组件实例刚刚创建，还未进行数据观测和事件配置');
				},
				created(){  //常用！！！
					alert('实例已经创建完成，并且已经进行数据观测和事件配置');
				},
				beforeMount(){
					alert('模板编译之前，还没挂载');
				},
				mounted(){ //常用！！！
					alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
				},
				beforeUpdate(){
					alert('组件更新之前');
				},
				updated(){
					alert('组件更新之后');
				},
				beforeDestroy(){
					alert('组件销毁之前');
				},
				destroyed(){
					alert('组件销毁之后');
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		{{msg}}
		<br>

		<button @click="update">更新数据</button>
		<button @click="destroy">销毁组件</button>
	</div>
</body>
</html>

计算属性

计算属性也是用来存储数据，但具有以下几个特点：
    a.数据可以进行逻辑处理操作
    b.对计算属性中的数据进行监视