挂

1.<script setup></script>

<template>

<div id="hello-vue">

<div style="text-align: center; margin-bottom: 30px">

<div>修改样式以达到和图片中相同的效果</div>

<img src="https://daoweb-resource.daocloud.io/fe-topic1.png" />

</div>

<div class="line" v-for="i in 9">

<span class="item" v-for="j in i">

{{ `${i}x${j}=${i * j}` }}

</span>

</div>

</div>

</template>

<style scoped>

* {

box-sizing: border-box;

}

.line{

display: flex;

justify-content: center;

align-items: center;

}

.item {

display: inline-block;

width: 70px;

border: 1px solid grey;

font-size: 12px;

height: 30px;

line-height: 28px;

text-align: center;

margin-bottom: -1px;

margin-right:-1px;

flex-shrink: 0;

}</style>

2.有一个问题就是如何去找到第 K 个的最小正整数呢？可以小于它的数字长度，然后要求你的时间复杂度尽可能低。

3.没考虑过用组件来实现吗？就比如说我们既然在 view 里面，为什么不用组件去实现这个东西，组件就是你现在是脱离了 view 本身的一个渲染能力。那这个 highlight 的话，它有哪些东西可以定制呢？你可以跟我介绍一下吗？那你有没有思路就是说我希望你通过 view 本身来渲染这个代码呢，而不是通过自己所写的字符串。因为在实际的场景中，我们可能很多像是一些复制按钮之类的，是我们已经存在的组件。你如果再用 html 拼接一遍的话，这个是成本比较高的，那我希望在这边通过通过未有实例，然后把我的组件渲染成一个。这是最简单，最粗暴的一个事情，还有一种可能就是我在里面去生成一个 view 实例，然后去来选择这个内容，然后把渲染的结果再输出输出来放到这里。

4.那会有这样一个问题，我很多时候就是渲染的，比如说从第一行到第当前这一行就是比如说第十行是最后一行，那么第十行第一个字符渲染出来和第十行最后一个字符渲染出来之间，这段时间我其实高度是没有变化的。intersection observer，但其实还有个东西叫做 size observer。

5.highlight 的一个调整，那你也遇你是你是否遇到过，就是比如说我们想要输出一个高亮，不输出一个斜体或者是加粗的时候，它会先把前面的那些字符输出出

6.vue3的一个响应式的原理吧！

7.reactive 的话，它是深层次的 watch 不是深层次的一个响应式还是？

8.reactive 何时绑定 的

9.computed是何时监控的

10.position