问题记录

1. Vue中 Watch监听器 【应用场景：父子组件嵌套时】

  watch: {
    // 监听docId这个属性的变化
    docId: {
        // 属性变化时执行的操作
      handler() {
        // 发生变化时执行的逻辑
        this.parentDocId = this.docId
        this.viewRecord(this.parentDocId)
      },
      // 是当doc是对象或数组时监听内部的变化，（对象或数组时是引用地址）
      deep: true,
      // 是在监听器创建时就立即执行handler函数
      immediate: true
    }
  },

注：在Angular中
ngOnChanges 生命周期钩子
ngDoCheck 生命周期钩子
Observable 和 async 管道
有同样功能。

2 如何解决于遵循规范定义DTO 于第三方交互字段不一致的问题

1使用@jsonProperty注解（推荐）
如果你使用的是 Jackson 库来处理 JSON 序列化和反序列化，可以使用 @JsonProperty 注解来指定字段在 JSON 中的名称。
使用示例：

@JsonProperty("process_rule")
public String processRule;

2自定义序列化和反序列化（场景：需要复杂处理时）

@Data
@JsonSerialize(using = CreateDocByTextRequestDTO.Serializer.class)
@JsonDeserialize(using = CreateDocByTextRequestDTO.Deserializer.class)
public class CreateDocByTextRequestDTO {
    public String name;
    public String text;
    public String indexingTechnique;
    public String processRule;

    public static class Serializer extends JsonSerializer<CreateDocByTextRequestDTO> {
        @Override
        public void serialize(CreateDocByTextRequestDTO value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
            gen.writeStartObject();
            gen.writeStringField("name", value.name);
            gen.writeStringField("text", value.text);
            gen.writeStringField("indexing_technique", value.indexingTechnique);
            gen.writeStringField("process_rule", value.processRule);
            gen.writeEndObject();
        }
    }

    public static class Deserializer extends JsonDeserializer<CreateDocByTextRequestDTO> {
        @Override
        public CreateDocByTextRequestDTO deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
            JsonNode node = p.getCodec().readTree(p);
            CreateDocByTextRequestDTO dto = new CreateDocByTextRequestDTO();
            dto.name = node.get("name").asText();
            dto.text = node.get("text").asText();
            dto.indexingTechnique = node.get("indexing_technique").asText();
            dto.processRule = node.get("process_rule").asText();
            return dto;
        }
    }
}

3 使用 Map 或自定义方法进行转(建议在与三方交互时，字段名看起来相差较大时可使用)
利用geter()和setter（）方法转换

3 伪数组如何进行遍历

伪数组（Array-like Object）是什么？
具有length 属性但是不具备数组方法（例如：push, pop，foreach 等）的对象。它们可以像数组一样通过索引访问元素，任何具有length属性和数字索引的对象都可以视为伪数组，例如某些库返回的对象。

伪数组和真实数组的区别

	伪数组	真实数组
类型	对象Object	数组Array
方法	无数组的方法	有push(), foreach()方法发等
枚举性	在for循环中不可枚举，但是可以通过索引位置获取数据	可枚举
原型链差异	伪数组的原型链不包含Array原型链上的方法，因此无法直接调用数组的方法。	数组Array

伪数组如何变为真是数组
1 使用方法: Array.form(object);
2 使用拓展符：let array = [...object]

4 鼠标悬停，显示内容，鼠标移走，不显示

实现功能：
1 使用 display 属性。
2 使用 visibility 和 opacity。
3 transform 和 transition。

例如鼠标放到卡片上

利用CSS实现，可根据是否显示（none,） 显示的位置是否在可见局域中这类方法实现

跟焦点相关的，如何检查元素
如果我们写了这样的样式，没有按理想状态显示的话我们需要检查元素进行排查，怎么检查鼠标悬停时候的样式呢？？？

样式筛选器左边有：hov, 点击可设置模拟焦点页面

5 css伪类， 伪元素

什么是伪类
伪类用于选择元素的特定状态或位置。它们以冒号 (:) 开头。
例如： :hover :foucs :first :first- 等等

<article>
  <p class="first">
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>

article p:first-child {
   background-color: red
}

效果：

什么是伪元素
伪元素用于选择元素的特定部分，而不是整个元素。它们以双冒号 (::) 开头（CSS3 规范中推荐使用双冒号，但单冒号也兼容）。

<article>
  <p class="first">
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>

article p:first-line {
  font-size: 120%;
  font-weight: bold;
}

效果；