Vue总结-CSDN博客

本文链接：https://blog.csdn.net/qq_42981449/article/details/101032298

一、Vue生命周期

vue生命周期共分为四个阶段
1.1.实例创建
1.2.DOM渲染
1.3.数据更新
1.4.销毁实例
vue生命周期函数就是vue实例在某个时间会自动执行的函数
2.1.beforeCreate:vue实例的挂载元素el和数据对象data都为undefined
2.2.created:vue实例的数据对象data有了，但el还没有
2.3.beforeMounte:vue实例的el和data都有了，但还是虚拟的dom元素
2.4.mounted:vue实例挂载完成
2.5.beforeUpdate:data更新时触发
2.6.updated:data更新后触发
2.7.beforeDestroy:组件销毁时触发
2.8.destroyed:组件销毁时触发，vue实例解除了事件监听以及和dom的绑定，但dom节点依旧存在

二、Vue中key的作用

v-if中用key管理可复用的元素
vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
例如：用户在不同的登录方式间切换

<body>
	<div id="app">
		<p v-if="type==='username'">用户名<input type="text" placeholder="请输入用户名"/></p>
		<p v-else>邮箱<input type="text" placeholder="请输入邮箱"/></p>
		<button v-on:click="change">切换</button>
	</div>
</body>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			type:"username"
		},
		methods:{
			change:function(){
				this.type=this.type==="username"?"email":"username"
			}
		}
	})
</script>

点击切换
在这里插入图片描述
因为v-if和v-else使用了相同的元素，所以点击切换时会复用之前的dom,input中的内容不会被清空，而只是替换的placeholder的内容
此时我们可以给input加上key值，然后点击切换，input框中的内容会被清空，此时由于加了key，vue会认为这是两个不同的dom,所以每次点击切换时，input框都会被重新渲染。

<div id="app">
	<p v-if="type==='username'">用户名<input type="text" placeholder="请输入用户名" key="username"/></p>
	<p v-else>邮箱<input type="text" placeholder="请输入邮箱"/ key="email"></p>
	<button v-on:click="change">切换</button>
</div>

v-for中的key的作用：提升渲染效率
例如：有一个数组A=[1,2,3,4,5],假如我们在这个数组中间加一个t,即A’=[1,2,t,3,4,5]
2.1.如果不用key，则vue默认1–>1,2–>2,3–>t,4–>3,5–>4依此比较，然后会更新3，4，5数据为t，3，4最后将5插入数组中
2.2.如果使用key，则vue将按照1–>1,2–>,3–>3,4–>4,5–>5比较，最后将t插入数组，此时只更新了一条数据，所以dom渲染效率会变高

三、Vue中父子组件传值

父组件向子组件传值
父组件通过v-bind:参数=“参数值”的方式给子组件传值，子组件通过props:[“参数”]的方式接收父组件传过来的值

<div id="root">
	<ul>
		<todo-item v-bind:content="item" v-for="item in list">	
		</todo-item>
	</ul>
</div>

var TodoItem={
	props:["content"],
	template:"<li>{{content}}</li>"
}
var app=new Vue({
	el:'#root',
	components:{
		TodoItem:TodoItem
	}
})

2.子组件向父组件传值
子组件通过$emit触发一个事件,同时将要传递的参数作为emit事件的参数传递给父组件，父组件可以监听子组件的事件，并在监听事件上绑定一个方法，这个方法就可以接收子组件传递给父组件的参数。

<div id="root">
	<ul>
		<todo-item 
		   v-bind:content="item"
		   v-bind:index="index"
		   v-for="(item,index) in list"
		   @delete="handleItemDelete"		
		</todo-item>
	</ul>
</div>

var TodoItem={
	props:["content","index"],
	template:"<li @click='handleClickItem'>{{content}}</li>",
	methods:{
		handleClickItem:function(){
			this.$emit("delete",this.index);
		}
	}
}
var app=new Vue({
	el:'#root',
	components:{
		TodoItem:TodoItem
	},
	data:{
		list:[1,2,3,4,5],
	},
	methods:{
		handleItemDelete:function(index){
			this.list.splice(index,1);
		}
	}
})