生命周期、组件间的数据共享、ref、动态组件

生命周期

生命周期（Life Cycle） 是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。

生命周期函数是vue内置的函数，会伴随生命周期自动运行。

创建阶段：

beforeCreate()--created()--beforeMount()--mounted()

运行阶段：

beforeUpdate()--updated()

销毁阶段：

beforeDestroy()--destroyed()

new Vue->init Event& LifeCycle(初始化事件和生命周期函数)-->beforeCreate()(此时组件的props、data、methods尚未被创建，都处于不可用的状态)->Init injecitons& reactivity(初始化props、data、methods)->created()（此时组件的props、data、methods已创建，都是可用的状态。但是组件的模板结构尚未生成,不能操作dom.）->has "el" option? ->has "template" option? ->beforeMount()(将要把内存中的HTML结构渲染到浏览器中，此时浏览器中还没有当前组件的dom结构,不能操作dom) -> create vm.$el and repace "el" with it (用内存中编译的HTML结构替换掉el属性指定的DOM元素) ->mounted() （可以操作dom）

 

beforeUpdate（）（将要根据变化的过后，准备重新渲染）--->重新渲染-->upated()(渲染完成后)

父子组件的生命周期

• 加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated

• 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

组件之间的数据共享

父子关系：

父向子传数据：使用自定义属性的方式

子向父传数据：使用自定义事件的方式

子：this.$emit("自定义事件名"，待传值) 父：@自定义事件名=“事件处理函数”

 

兄弟关系：

数据分享方案是EventBus

先定义一个bus.js ,里面抛出一个vue对象，用来挂载兄弟之间的自定义事件。

在发送方调用bus.$emit("事件名"，待发数据)

接收方bus.$on("事件名"，数据处理函数) 在created（）函数中使用

 

ref引用

每个vue对象默认都有一个$refs属性，默认指向有一个空对象，在标签中使用ref属性可以引用该dom元素或者组件。

this.$nextTick()的作用是延迟代码至dom重新渲染完成后执行

 

动态组件

vue 提供了一个内置的 <componet> 组件，专门实现动态组件的渲染

<componet>的属性可以动态绑定组件 ，如果直接改is属性的组件名，则切换时组件会创建与销毁，如要实现组件不销毁，则要套一个<keep-alive>标签，此标签可以将内部组件进行缓存，而不是销毁。

keep-alive的生命周期：

activated（）第一次创建会调用，激活会调用

deactivated（）缓存时调用

include属性哪些需要被缓存，exclude 那些不缓存，只能使用一个。

插槽

插槽（solt）是为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望由用户指定的中部分定义为插槽。

每个插槽都要有一个name名称，默认为default，使用时默认填充到default插槽中。

v-slot要跟一个插槽的名称（v-slot:default）v-slot：简写为（#），v-slot 只能给template标签或component标签使用。

template 只起到一个包裹的作用，不会被渲染成实质的标签。

若插槽设定默认内容，则在<slot>这里写默认内容</slot> (后备内容)

具名插槽：具有名字的插槽

#插槽名=“scope” 可以获取插槽定义的对象内容，加了数据后的插槽称为 作用域插槽。

自定义指令

在directives结点可以声明自定义指令，在标签上使用v-test

directives：{
test：{
    //被绑定时会自动调用，el为绑定的dom元素，binding为等号传过来的值。
    bind(el，binding){
    el.style//可以操作样式
    //binding 第一次绑定调用
    binding.vaule
    }
}
}

如果在要数据发生改变时产生效果，则需要使用update函数

bind和update同时使用时，可以简写。

directives：{
test(el，binding){
    el.style
    binding.vaule
}
}

全局定义

Vue.directive("test",function(el,binding){
​
})

ESLint

https://eslint.bootcss.com/docs/rules/https://eslint.bootcss.com/docs/rules/