生命周期、插槽
介绍: 每个 Vue 实例/组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中的某些阶段也会运行一些特定的函数,这些函数就被叫做生命周期钩子，这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子函数详解(前面带*号的生命周期表示非常用生命周期)
*beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。该生命周期中无法访问data 计算属性 props
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeCreate() {
console.log(
'组件被实例化后触发,但是该生命周期阶段数据还没有初始化完成',
this,
this.$data // undefined
)
}
})
created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 目前尚不可用。(在这个生命周期中不要操作页面中DOM元素,因为元素还没有被渲染出来)
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
created() {
console.log(
'组件被实例化后触发,data/计算属性/watch/methods已经配置完成,这里可以执行一些初始网络请求操作',
this,
this.$data
)
this.getDataFromServer()
},
methods: {
getDataFromServer() {
console.log('开启网络请求,向服务器请求数据')
}
}
})
*beforeMount: 在挂载(渲染)开始之前被调用: 相关的 render 函数首次被调用。
mounted: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意: mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeMount() {
console.log('实例将要被渲染',this.$refs) // this.$refs空对象
},
mounted() {
console.log('组件挂载完毕,挂载的意思就是实例第一次渲染完成,这里是一个操作DOM的好时机', this.$refs)
//this.$refs元素已经获取完毕
this.$nextTick(()=> {
// 这里所有子组件全部挂载完毕
})
}
})
beforeUpdate: 数据更新时调用，发生在虚拟 DOM更新渲染之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在DOM更新渲染之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意: updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeUpdate() {},
updated: function () {
// 不能保证所有子组件更新完毕
this.$nextTick(function () {
//保证所有子组件更新完毕
})
}
})
beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。(在该生命周期中我们仍然可以访问,实例对象的属性 方法 计算属性 DOM节点等)。
该生命周期中应该去做一些清理工作如：解绑计时器，取消网络请求，清理掉哪些原生事件监听或者在mounted阶段创建DOM节点
new Vue({
el: '#app',
data: {
name: '小明',
age: 18,
index: 0
},
mounted() {
// 模拟启动轮播图
this.timer = setInterval(() => {
this.index++
}, 1000);
},
beforeDestroy() {
// 解绑计时器
clearInterval(this.timer)
}
})
*destroyed: 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
activated: 被 keep-alive 缓存的组件激活时调用。
deactivated: 被 keep-alive 缓存的组件停用时调用。
<div id="app">
<keep-alive>
<component :is="show? 'demo': 'test'"></component>
</keep-alive>
<button @click="show = !show">show/hidden</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
components: {
demo: {
template: '<div>我是一个demo组件</div>',
mounted() {
console.log('组件第一次挂载完毕')
},
beforeDestroy() {
console.log('组件将要被销毁')
},
activated() {
console.log('demo组件被激活')
},
deactivated() {
console.log('demo组件被停用')
}
},
test: {
template: '<h2 @click="count++">count{{count}}</h2>',
data() {
return {
count: 7
}
},
activated() {
console.log('test组件被激活')
},
deactivated() {
console.log('test组件被停用')
}
}
}
})
</script>
插槽
概念: Vue 实现了一套内容分发的 API，为组件提供了一个 <slot> 元素作为承载分发内容的出口。
语法:
<script>
Vue.component('login-component',{
template: `
<div>
<div>
// 分发内容的内容会被承载到这个slot标签位置
<slot></slot>
</div>
<p>
账号: <input>
</p>
<p>
密码: <input type="password">
</p>
<button>登录</button>
</div>
`
})
</script>
// 这时你可以这样使用组件
<login-component>
<h2>科技</h2>
</login-component>
// 渲染在浏览器的结果是
<div>
<div>
<!--分发内容的内容会被承载到这个slot标签位置 -->
<h2>科技</h2>
</div>
<p>
账号: <input>
</p>
<p>
密码: <input type="password">
</p>
<button>登录</button>
</div>
注意:
如果
<login-component>的 template 中没有包含一个<slot>元素，则该组件对称标签内部的任何内容都会被抛弃。<slot>元素内部可以设置后备内容,如果当前组件对称标签内部没有插入任何内容的话,组件最终会渲染后备内容
Vue.component('login-component',{
template: `
<div>
<div>
<slot>后备内容</slot>
</div>
<p>
账号: <input>
</p>
<p>
密码: <input type="password">
</p>
<button>登录</button>
</div>
`
})
具名插槽
概念: 有时我们组件需要多个插槽。可以将不同的组件插入到不同插槽内部，实现方法是使用具名插槽，给组件中的<slot> 元素设置一个name属性。在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令将对应的内容插入到指定的<slot> 元素上
语法:
<script>
Vue.component('login-component',{
template: `
<div>
<div>
<slot>后备内容</slot>
</div>
<p>
账号: <slot name="user"></slot>
</p>
<p>
密码: <slot name="psd"></slot>
</p>
<button>登录</button>
<slot></slot>
</div>
`
})
</script>
<login-component>
<h2>科技</h2>
<template v-slot:user>
<!-- 这里所有的内容都会被插入到name="user" 插槽中 -->
<div>
123
</div>
</template>
<input slot="psd" type="password" placeholder="这个元素会被插入到name=psd 插槽中">
<component-a slot="psd"></component-a>
</login-component>
注意：跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 v-slot: 替换为字符 #。
例: v-slot:header 可以被缩写为 #header
<login-component>
<h2>科技</h2>
<template #user>
这里所有的内容都会被插入到name="user" 插槽中
<div>
123
</div>
</template>
<template #psd>
<input type="password" placeholder="这个元素会被插入到name=psd 插槽中">
</template>
</login-component>
注意：插槽在项目开发中不太常用，常用于一些UI库的开发。如果想对插槽有更深的了解可以查阅官方文档
