开发项目中遇到的问题

css

1. last-child 和 first-child失效问题：
   如果父亲元素里的子元素有包含其他不一样的标签时,会出现获取不到的问题。
   当使用first的话,第一个子元素一定要是一样的标签.中间和最后可以是不一样的标签.
   last最后一个元素标签要一致,前面和中间可以是不一样标签。
   除了这些伪类，同样，其他的伪类在这种情况无法获取到。

vue

1. 在使用this.$router.push实现路径跳转时，会延迟好几秒；
   是因为query属性的原因，当query对象属性以及属性值内容太多时，会增长路径拼接的速度。
2. 在使用图片的时候，直接使用开发环境的路径在标签内使用图片或者在css中使用背景图片都会无法显示。
   第一种情况可以提前加载图片require(url)

• css中给元素添加背景图，background: url(~@/img/page.png)
  ~是相对于其他路径（文件）的，类似于相对路径
  所以background正常使用相对路径也是ok的。

vue之computed

computed是计算出来的属性, 相当于计算结果, 所以我们不能直接对结果进行修改!

1. getter函数
   负责使用data中的数据, 但是注意 只能用, 不能改! 使用完后 记得将结果return
2. setter函数
   有一个参数 newValue, 负责接收传进来的值, 可以使用这个newValue给data中的数据进行操作:
3. 给computed创建的属性赋值，其实是传参给setter函数，触发set事件

现在有个需求: 想给options里添加新的数据, 如何操作?

// 1. 需要用到set函数:
computed {
   
    objArr: {
   
        get() {
    return this.options;},
        set(newValue) {
   
            console.log('newValue', newValue)
            this.options.push(newValue);
        }
    }
}
// 2. 触发set函数 即给objArr赋值:
// 这里我们封装个方法:
methods: {
   
    setObjArr() {
   
        this.objArr = {
   b: 2}
    }
}
// 通过按钮点击触发
<button @click="setObjArr">set</button>
/**这里的this.objArr = { b: 2 }并不是把{b: 2} 赋值给objArr的意思, 而是传参给里面的set函数。
触发setObjArr事件, 会发现 计算属性 objArr 已经改变了, 其本质是因为data中的options发生了改变。**/

provide 和 inject 之响应式

provide和inject ：provide并不是响应式的，当子组件inject的时候已经丢失了响应式功能

希望整个数据都是响应式的—provide提供一个函数。
函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。

父组件：

provide() {
   
    return {
   
         getActiveSecurityType: () => ({
   
             activeSecurityType: this.securityType
         })
     }
 },

孙后代组件：

inject: ['getActiveSecurityType'],
computed: {
   
        activeSecurityType() {
   
            return this.getActiveSecurityType();
        },
    },
}
 watch: {
   
      activeSecurityType(newVal) {
   
      }
 }

form校验

1. validate：
   对整个表单进行校验的方法，参数为一个回调函数。
   该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
   若不传入回调函数，则会返回一个 promise
   Function(callback: Function(boolean, object))
2. validateField：
   对部分表单字段进行校验的方法
   Function(props: array | string, callback: Function(errorMessage: string))

<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="80px"
    size="mini"
  >
    <el-form-item
      label="姓名"
      prop="name"
    >
      <el-input v-model.trim="form.name"></el-input>
    </el-form-item>

    <el-form-item
      label="年龄"