面试准备的小问题

lovely you

已于 2024-04-15 11:00:09 修改

阅读量176

点赞数

分类专栏：面试文章标签： javascript 前端开发语言

于 2023-11-07 17:01:21 首次发布

本文链接：https://blog.csdn.net/lovelyYou123/article/details/134270590

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.深拷贝和浅拷贝

设想一个场景，需要把pinia里的json对象a赋值给变量b,b=a；这时对b进行遍历，遍历完后发现变量a的值也跟着变化了。原因是对b的赋值是浅拷贝，地址还是指向变量a，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。所以这时就要用到深拷贝，深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”。用法也很简单只需要b=json.parse(json.stringfy(a))

2.监听pinia里变量的方法和区别

监听可以用订阅$subscribe,也可以用监听watch。区别是当用$patch改变pinia里的数据时，无论值改没改变，$subscribe都能监听到。而watch只能是当值改变以后才能监听到

3.异步如何转同步

当一个api是异步的时候，我们需要先得到异步的结果再往下执行代码。这时promise 就发挥了作用。可以定义一个函数

a(){

return new Promise((resolve,reject)=>{

//api
//成功以后把结果抛出去resolve(res)

})

}

然后在原代码的函数前加上async,在函数a()前加上await

async b(){

await a()
//.........


}

Promise.reject(err)

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

4.闭包，防抖和节流

闭包：当内部函数引用外部函数的内部变量，那么这个内部函数和外部函数的内部变量就形成一个闭包。

防抖适用场景，输入框，避免输入一个字就发送一次请求。节流使用场景，避免点击按钮一次就执行一次请求。解决办法，加上定时器setTimeout。还需要一个变量记录状态，如果正在请求就给个状态true，请求结束就把状态改成false。以此来节流

5.原型和原型链

每个函数都有prototype属性，叫原型，其值是一个对象，叫原型对象

每个对象都有_proto_属性，指向这个对象的原型对象，而原型对象也是一个对象，也有_proto_属性，指向原型对象的原型对象，这样一层一层的往上找的链式结构叫原型链，找不到属性方法就返回null

6.data为什么是函数而不是一个对象

每个组件都是vue的实例，组件共享data属性，组件复用的时候，如果是对象，改变其中一个会影响其它。

7.vue3 中 isRef, unref, toRef, toRefs, toRaw

isRef 判断是不是ref

unref 返回原数据，不是ref就返回其值，只针对ref

toRef, toRefs, toRaw 只针对reactive

8.插槽

默认插槽

//组件child
<div>
<slot></slot>
</div

//父组件
<div>
<child>哈哈哈</child>
</div

具名插槽

//子组件child
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

//父组件child

<child>
  <template #header></template> //v-slot:header = #header

  <template #default>
  <p>A paragraph for the main content.</p>
</template>
//隐式的默认插槽 可以直接写  <p>A paragraph for the main content.</p>

  <template #footer></template>
</child>

作用域插槽：使得父组件可以访问子组件的数据

//子组件child
<div>
  <header>
    <slot name="header" :text='greetingMessage' ></slot>
  </header>
  <main>
    <slot :count='1' text='你好'></slot>
  </main>
  <footer>
    <slot name="footer" :count='1' text='你好'></slot>
  </footer>
</div>

<script>
data() {
  return {
    greetingMessage:'你好'
  }
},
</script>


//父组件
<child>
  <template #header="headerProps">
    {{ headerProps}}
  </template>

  <template #default="defaultProps">
    {{ defaultProps.text}}
  </template>

  <template #footer="{count,text}">
    {{ count}}
  </template>

</child>