vue生命周期
生命周期:
vue组件实例从创建->运行->销毁 所经过的一系列过程统称为生命周期！强调的是一个时间段
1. beforeCreate
在实例创建之前被调用。在这个阶段，实例的数据和方法都还没有初始化。
2. created
在实例创建完毕后被调用。在这个阶段，实例的数据和方法已经初始化完成，并且可以进行访问。
3. beforeMount
在挂载开始之前被调用。在这个阶段，模板编译完成，但尚未将编译后的模板渲染到页面中。
4. mounted
在挂载结束后被调用。在这个阶段，编译后的模板已经被渲染到了页面中，并且实例已经添加到了页面上，可以进行操作。
5. beforeUpdate
在更新开始之前被调用。在这个阶段，组件的数据发生了变化，但尚未重新渲染。
6. updated
在更新完成后被调用。在这个阶段，组件的数据已经重新渲染，并且可以进行操作。
7. beforeDestroy
在实例销毁之前被调用。在这个阶段，组件即将被销毁，但它的数据和方法仍然可以访问。
注：
当一个组件被销毁时，它的定时器并不会自动销毁。这意味着如果在组件中使用了定时器，需要手动清除它们，否则可能会导致内存泄漏和性能问题。
在 Vue.js 中，事件监听器会在组件销毁时自动移除。当组件被销毁时，Vue.js 会清除所有与之相关的事件监听器，包括绑定在 DOM 元素上的事件和通过 $on 方法添加的自定义事件。
这是因为在 Vue.js 的实现中，每个组件都有一个独立的事件系统，它会跟踪组件所绑定的所有事件并在组件销毁时将它们全部移除。这样可以确保已经销毁的组件不会对应用程序的其他部分造成任何影响，并且可以避免一些潜在的内存泄漏问题。
需要注意的是，如果在组件外部仍然存在对组件事件的引用，那么即使组件已经被销毁，这些事件也可能不会被正确地移除。因此，在使用自定义事件时，最好确保在组件销毁之前解除所有事件的绑定。
另外，如果要手动添加或移除事件监听器，可以使用 Vue.js 提供的 $on 和 $off 方法。这些方法与原生的 addEventListener 和 removeEventListener 方法相似，但具有更好的跨浏览器兼容性，并且能够在组件销毁时自动移除事件监听器。
8. destroyed
在实例销毁之后被调用。在这个阶段，组件已经被完全销毁了，它的数据和方法都无法访问。
9. errorCaptured
当捕获到一个来自子孙组件的错误时被调用。该钩子函数可以返回 false 阻止错误向上传递，或者返回一个错误对象以通知开发者。
组件基础
组件概念：
Vue组件是一个包含Vue特定选项的JavaScript对象
全局注册：
局部注册：
组件通信
1、props（父传子）
父组件写法：
<ComA :init='init' ></ComA>
接受的两种方式：
数组方式：
对象方式：
props:{
name:{
type:String, //规定类型
required:true, //是否必填
default:'rose', //设置默认值
validator(val){ //进行校验
if(val == 'jack'){
return true
}else{
return false
}
}
},
props传值特点：
- 单向数据流props 都遵循着单向绑定原则因父组件的更新而变化，而不会逆向传递
- 组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错；
2、自定义方法（子传父）
父组件写法：
<ComB @sas="add"></ComB> //构建自定义方法sas 方法体为add
methods: {
add(nun){
this.num = nun //将子组件传递的参数赋值给父组件响应式变量num
}
},
子组件写法：
<button @click='add'>提交</button> //子组件添加点击事件
emits:['sas'], //子组件接收父组件自定义方法
methods: {
add(){
this.$emit('sas',this.msx) //this.$emit(接收的自定义方法，需要传递的参数)
}
},
子组件点击触发add（），然后利用this.$emit传递参数后，触发父组件add（）将参数值赋值给父组件响应式数据。
3、v-model
父组件写法：
<ComC v-model="invalur"></ComC>{{invalur}}
子组件写法：
<input v-model="value">
props:['modelValue'],
emits:['update:modelValue'],
value:{
get(){
return this.modelValue
},
set(newN){
this.$emit('update:modelValue',newN)
}
}
},
效果：
v-model 多个传参：
4、透传 attribute
export default {
components: {
MyButton,
},
data() {
return {
title: "属性透传",
};
},
methods:{
bindClick(){
console.log('bindClick>>>>');
}
},
/html/
template:
<div> <h2>{{title}}</h2> <my-button class="m-btn" id="btn1" :name="'jack'" @click="bindClick"></my-button> </div>,
};
export default {
props:['name'],
inheritAttrs: false, // 阻止透传根节点
data() {
return {};
},
mounted() {
console.log(this.$attrs);
},
/*html*/
template: `<div>
<button class="m-btn-1" v-bind="$attrs">确定</button>
</div>`,
};
inheritAttrs: false
防止样式加在：子组件div上
v-bind="$attrs"
指定加载位子
5、ref：
ref加在普通元素和vue组件上做为属性使用,
<button ref = "btn1"><button>
<todo-list ref="list"></todo-list>
1、ref 加在普通的元素上，用this.refs.list 获取到的是组件实例，可以使用组件的所有方法
父组件：
<ComD ref='cond'></ComD> //添加ref
mounted() {
console.log(this.$refs.cond)
}
子组件：
export default{
data() {
return {
ste:'sdss'
}
},
computed:{
},
methods: {
add(){
console.log('---')
}
},
template: `
<div style="width:100px;height:100px;background-color:blue;">
<p style="color:white">cond</p>
</div>
`
}
效果：
子组件添加expose指定获取：
expose:['ste']
6、插槽
概念：
简单的说，插槽就是可以让开发者往子组件中放置代码片段的东西。 就好像专门在某几个地方弄了几个槽（子组件中），开发时，就可以在对应的槽中放置对应的代码了。
默认插槽：
具名插槽：
作用域插槽：
注
v-slot：xx 等价于 #xx
slot=”xx“ 等价于 v-slot：xx
7、依赖注入
作用：
祖先元素给后代元素传值
祖先组件写法：
provide() {
return {
str: computed(() => this.str) //使用计算属性
}
},
后代组件写法;
数组形式：
inject: ['str'],
对象形式：
s:{ //别名
from:"str", //接收来源
default:'sss' //默认
}
