vue项目中小知识点总结
vue的生命周期
- beforeCreate
创建之前，此时还没有data和Method - Created
创建完成，此时data和Method可以使用了
在Created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续 - beforeMount
在渲染之前 - mounted
页面已经渲染完成，并且vm实例中已经添加完$el了，已经替换掉那些DOM元素了(双括号中的变量)，这个时候可以操作DOM了(但是是获取不了元素的高度等属性的，如果想要获取，需要使用nextTick()) - beforeUpdate
data改变后，对应的组件重新渲染之前 - updated
data改变后，对应的组件重新渲染完成 - beforeDestory
在实例销毁之前，此时实例仍然可以使用 - destoryed
实例销毁后
父子组件的生命周期是一个嵌套的过程
- 渲染的过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted - 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated - 父组件更新过程
父beforeUpdate->父updated - 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
Vue中的nextTick
解释
- nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
应用 - 想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数
- 在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick
computed和watch的区别
computed
- 计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
watch
- 类似于数据改变后的回调
- 如果想深度监听的话，后面加一个deep:true
- 如果想监听完立马运行的话，后面加一个immediate:true
Vue-router的模式
hash模式
- 利用onhashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载。
history模式
- 利用pushstate和replacestate来将url替换但不刷新，但是有一个致命点就是，一旦刷新的话，就会可能404，因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。
Vue的Key的作用
key主要用在虚拟Dom算法中，每个虚拟节点VNode有一个唯一标识Key，通过对比新旧节点的key来判断节点是否改变，用key就可以大大提高渲染效率，这个key类似于缓存中的etag。(因为vue在渲染时key值报错,还是很长常见的,一般都是key值不唯一造成的)
Vue组件之间的通信方式
1.props和emit
父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。
2.eventBus任意组件通信，新建一个空的全局Vue对象，利用emit 发 送 ,emit发送,emit发送,on接收(详细文档)
Vue.prototype.Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
3.祖先组件使用provide提供数据，子孙组件通过inject注入数据(详细文档)
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
4.v-model
父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
}
},
template:`
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<p>{
{message}}</p>
<child v-model="message"></child>
</div>
`,
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
5.$parent和children
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
}
},
template:`
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</div>
`,
methods:{
changeChildValue(){
this.$children[0].mymessage = 'hello';
}
},
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
6.refs—$ref
7.父组件使用slot插槽是无法获取子组件的数据的，但是使用了slot-scope就可以获取到子组件的数据(拥有了子组件的作用域)
8.vuex处理组件之间的数据交互
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。