Vue基础总结
请阐述一下Vue 的八大生命周期？
1.beforeCreate(创建前)：通过new Vue() 创建实例出来之后就会执行beforeCreate钩子函数。这个时候，数据还没有挂载呢，只是一个空壳。无法访问到数据和$el不存在，computed和watch上的数据均不能访问。一般不做操作
2.created(创建后)：可以进行数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。这个时候已经可以使用数据，也可以更改数据。然而，挂载阶段还没开始，$el 属性目前不可见。什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的
3.beforeMount(载入前)：虚拟dom创建完成，马上就要渲染。我们能发现el还是 {{message}}，这里就是应用的是虚拟Dom技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。但还是无法进行DOM操作
4.mounted(载入后)：el 被新创建的 vm.el 替换，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用ref属性对Dom进行操作。
Tips:el与el的区别：el是为了将实例化后的Vue挂载到指定的dom元素中。在实例挂载之后，元素可以用 vm.el 访问
5.beforeUpdate(更新前)：就是响应式数据发生更新，dom还没有刷新
6.updated(更新后)：就是响应式数据发生更新，update是dom已经刷新了
7.beforeDestroy(销毁前)：这个钩子发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
8.destroyed(销毁后)：发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
02
对slot 插槽的理解和你怎么使用的呢？ |
|---|
插槽分为匿名插槽，具名插槽和作用域插槽
1.匿名插槽：
子组件代码：
<template>
<div style="border: 1px solid green;">
<h4>这是Child组件</h4>
<!-- 用来存放父组件的内容 -->
<slot></slot>
<p>我喜欢编程</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>父组件代码：
<template>
<van-panel title="普通插槽">
<Child>hello child,我来自父组件</Child>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
2.具名插槽：
子组件代码：
<template>
<div class="flex jc-sa" style="border: 1px solid green;">
<!-- 接收父组件对应的内容 -->
<slot name="left"></slot>
<!-- <slot name="right"></slot> -->
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
父组件代码：
<template>
<van-panel title="具名插槽">
<Child>
<p slot="left">
<van-button>左边</van-button>
</p>
<p slot="right">
<van-button>右边</van-button>
</p>
</Child>
<!-- vant的slot -->
<div slot="footer">
<van-button type="primary">点击</van-button>
</div>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
3.作用域插槽：
子组件代码：
<template>
<ul>
<slot name="slotName"
v-for="item in propName"
:dos="item.do"></slot>
</ul>
</template>
<script>
export default{
props:['propName']
}
</script>
父组件代码：
<template>
<div>
<child :propName="items">
<!--作用域插槽也可以具名！-->
<li
slot="slotName"
slot-scope="scopeName">
{{scopeName.dos}}
</li>
</child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default{
components:{child},
data(){
return{
items:[
{do:'play'},
{do:'eat'},
{do:'sleep'},
{do:'play'},
{do:'eat'},
{do:'sleep'}
]
}
}
}
</script>腾讯云开发者
