持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
说说你对vue的mixin的理解
在导出的对象中可以写组件的配置项 如: data methods computed watch ....
作用: 将组件内相同的业务逻辑提取到一个公共的模块,当组件需要时再混入到组件内
特性:
- 要混入的对象中如果是 生命周期函数 "依次执行" 先执行混入的生命钩子函数
- 要混入的对象中 data 如果变量的值冲突,以组件内的值为准 (覆盖)
- 要混入的对象中 methods 如果函数名冲突,以组件内的值为准 (覆盖)
说说你对slot的理解？slot使用场景有哪些？
slot是什么
Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口 应用场景
通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理
通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
比如布局组件、表格列、下拉选、弹框显示内容等
分类
默认插槽
子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面
父组件在使用的时候，直接在子组件的标签内写入内容即可
具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽
父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上
父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用
小结
v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用- 默认插槽名为
default，可以省略default直接写v-slot - 缩写为
#时不能不写参数，写成#default - 可以通过解构获取
v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"
组件缓存 keep-alive
组件缓存
组件的缓存可以在进行动态组件切换的时候对组件内部数据进行缓存,而不是走销毁流程
使用场景: 多表单切换,对表单内数据进行保存
keep-alive
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在<keep-alive>内被切换，它的activated和 deactivated这两个生命周期钩子函数将会被对应执行 。
1. keep-alive的参数
- include: 名称匹配的组件会被缓存-->include的值为组件的name。
- exclude: 任何名称匹配的组件都不会被缓存。
- max - 数量 决定最多可以缓存多少组件。
2. keep-alive的使用
-
搭配
<component></component>使用 -
搭配路由使用 ( 需配置路由meta信息的
keepAlive属性 ) -
清除缓存组件
- 在组件跳转之前使用后置路由守卫判断组件是否缓存
- ( beforeRouteLeave( to, from, next ){ from.meta.keepAlive = false }
keep-alive的两个钩子函数
| activated | deactivated |
|---|---|
在 keep-alive 组件激活时调用 | 在keep-alive 组件停用时调用 |
| 该钩子函数在服务器端渲染期间不被调用 | 该钩子在服务器端渲染期间不被调用 |
使用keep-alive会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated阶段获取数据，承担原来created钩子函数中获取数据的任务。
注意： 只有组件被keep-alive包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的
使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！在服务端渲染时，此钩子函数也不会被调用。
设置了缓存的组件钩子调用情况：
第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
后续进入时：beforeRouterEnter ->activated->deactivated> beforeRouteLeave
vue中计算属性computed 和watch 的区别是什么？
computed计算属性就是为了简化template里面模版字符串的计算复杂度、防止模版太过冗余。它具有缓存特性
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性
- watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
- computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。(定义的函数接收return的结果，return属于同步执行的，是没办法拿到异步请求结果的)
也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。
| 区别 | 侦听目标 | 执行区别 | 监听区别 |
|---|---|---|---|
| computed | 自己定义的变量 | 不能执行异步任务 | 监听属性值 |
| watch | vue实例(data里面的值) | 可以执行异步任务(可以检测computed) | 监听依赖值(依赖不变缓存复用) |
watch 怎么深度监听
deep：代表深度监控，不仅监控对象的变化，也监控对象中属性变化。 handler：就是以前的监控处理函数。 通过v.name和v.age获取对象中具体的值。
