技能三十六能掌握组件之间传值的方式>8种

前端组件之间传值的方式有很多，以下是其中的九种方式：

1. props: 父组件通过 props 将数据传给子组件，子组件通过 props 接收数据。
1. $emit: 子组件通过$ emit 触发一个自定义的事件，并将数据传递给父组件，父组件通过监听这个事件，从而接收子组件传递的数据。
1. $refs: 父组件通过 ref 属性获取子组件的实例，并访问子组件的属性和方法。
1. Vuex: 使用 Vuex 进行状态管理，父子组件通过共享状态来进行通信。
1. $parent 和$ children: 父组件可以通过 $children 访问其所有直接子组件的实例，并通过$ parent 访问其父组件的实例。
1. provide 和 inject: 父组件通过 provide 属性提供数据，子组件通过 inject 属性来注入这些数据。
1. EventBus: 全局事件总线，在任意组件中触发事件和监听事件。
1. URL 参数传递：利用路由传值、query 或 hash 传参来进行组件之间的通信。
1. localStorage 和 sessionStorage：通过 localStorage 或 sessionStorage 进行数据的存储和读取，实现组件之间的数据共享。

技能三十七掌握el-form 表单校验(包括自定义校验)并有具体代码笔记

el-form 是 Element UI 中非常常用的一个表单组件，它提供了丰富的表单验证功能，是我们经常使用的一个组件。

下面是 el-form 表单校验的具体实现：

在 el-form 组件中添加 ref 属性，方便使用自定义校验函数：

<template>
  <el-form :model="form" :rules="rules" ref="loginForm">
    <!-- 表单元素 -->
  </el-form>
</template>

在 data 中声明表单校验规则 rules：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: ['blur', 'change'] }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
        { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] }
      ]
    }
  }
}

添加 el-form-item 组件，使表单元素进行分组。

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>

<el-form-item label="密码" prop="password">
  <el-input v-model="form.password" type="password"></el-input>
</el-form-item>

添加校验按钮，点击触发校验：

 <el-button type="primary" @click="submitForm('loginForm')">校验</el-button>

html复制代码

在 methods 中添加 submitForm 方法，用来触发表单校验：

methods: {
  submitForm(formName) {
    this.$refs[formName].validate(valid => {
      if (valid) {
        console.log('校验成功')
      }
    })
  }
}

javascript复制代码

自定义校验函数：

 data() {
   return {
     form: {
       username: '',
       password: ''
     },
     rules: {
       username: [
         { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
         { validator: this.checkUsername, trigger: ['blur', 'change'] }
       ],
       password: [
         { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
         { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] }
       ]
     }
   }
 },
 methods: {
   checkUsername(rule, value, callback) {
     // 自定义验证规则
     if (!value) {
       callback(new Error('用户名不能为空'));
     } else {
       if (/^\d+$/.test(value)) {
         callback(new Error('用户名不能为纯数字'));
       } else {
         callback();
       }
     }
   }
 }

javascript复制代码

通过以上步骤，就完成了 el-form 表单校验的配置，可以实现表单验证的功能了。

技能三十八按需加载使用 echarts

前端使用 Echarts 可以按需加载，以减小首次加载的体积。下面是按需加载 Echarts 的步骤：

安装 echarts

npm install echarts --save

bash复制代码

在需要引入Echarts的文件中，按需引入 import 需要的 Echarts 图表和组件，例如：

import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册所需的组件
echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer])

javascript复制代码

在页面中使用按需加载的 Echarts

import * as echarts from 'echarts'

// 创建图表实例
const chart = echarts.init(document.getElementById('chart'))

// 配置选项和数据
const options = {}

// 绘制图表
chart.setOption(options)

javascript复制代码

以上就是按需加载 Echarts 的实现方式，可以根据需要按需引入所需的 Echarts 图表和组件，减小首次加载的体积。

技能三十九 token为什么会失效，如何处理失效的情况

Token 失效通常有以下几种情况：

Token 过期：Token 有一个过期时间，一旦过期就会失效。
用户修改密码：如果用户修改了密码，旧的 Token 也会失效。
服务器换了密钥：如果 Token 使用的密钥被更改，那么之前的 Token 也会失效。

在处理 Token 失效情况时，可以根据具体情况进行以下处理：

判断 Token 是否过期：如果 Token 过期了，需要重新向服务器请求一个新的 Token。
用户修改密码：可以在前端弹出提示框，要求用户重新登录，并清除本地存储的旧 Token。
服务器换了密钥：如果服务器密钥发生了变化，需要重新向服务器请求一个新的 Token，并清除本地存储的旧 Token。

因为 Token 是用来标识用户身份的，因此 Token 泄露可能会导致安全问题。处理 Token 失效情况时，需要保证用户的安全性。建议在使用 Token 时，加上一些安全机制，如设置过期时间、使用 HTTPS 协议等。

技能四十说出$nextTick的具体应用场景

$nextTick 是 Vue.js 中的一个异步 API，它将回调函数推迟到 DOM 更新循环之后执行，在当前的代码执行结束后，下一轮 Event Loop 之前执行。

下面是 $nextTick 的一些常见应用场景：

操作 DOM 元素：$nextTick 可以确保修改数据之后立即对 DOM 进行操作，避免在修改数据之后立即对 DOM 进行操作时出现渲染不完全的情况。
访问 DOM 元素的属性：当你修改了数据之后，想访问 DOM 元素的属性（如 offsetTop）时，由于 Vue.js 采用异步更新 DOM 的方式，此时可能获取的属性值是错误的。可以将访问 DOM 元素的属性的代码放到 $nextTick 的回调函数中，等待 DOM 更新后再进行访问。
避免重复渲染：当你在一个生命周期钩子（如 created 或 mounted）中调用了多个异步方法，而这些异步方法又修改了同一个响应式数据（如一个数组），此时多次修改数据会导致多次渲染，影响页面性能。可以使用 $nextTick 在 DOM 更新后再次调用异步方法，避免多次渲染。
控制多个组件之间的通信：当你在父组件中修改了一个数据，需要同步给子组件，而子组件又需要使用修改后的数据进行计算，此时可以将子组件的计算代码放到 $nextTick 的回调函数中，等待 DOM 更新后再进行计算。

总之，$nextTick 的主要应用场景是在 Vue.js 响应式数据发生变化后操作 DOM 或进行异步操作，并确保执行时 DOM 已经得到渲染更新。

$nextTick代码示例:

<template>
  <div>
    <p ref="text">{{ message }}</p>
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'World'
      this.$nextTick(() => {
        console.log(this.$refs.text.innerText) // 输出 'World'
      })
    }
  }
}
</script>

在这个示例中，当用户点击按钮时，changeMessage 方法会调用 $nextTick，并将一个回调函数作为参数。该回调函数使用 $refs.text 取得页面中的文本元素，并打印出其最新的文本内容。由于 $nextTick 会在DOM更新后执行回调函数，因此这时打印的文本内容应该是 'World'。

展示自己小技能

技能三十六 能掌握组件之间传值的方式>8种

前端组件之间传值的方式有很多，以下是其中的九种方式：

技能三十七 掌握el-form 表单校验(包括自定义校验)并有具体代码笔记

技能三十八 按需加载使用 echarts