一、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);
}
}
})