Vue面试（3）-- vue高级特性，前端面试必刷的200道真题

• {{item}}

  <button @click=“addItem”>添加一项

  (在DOM元素定义ref=”ul1”,之后可以使用this.$refs.ul1拿到DOM元素)

  不使用$nextTick的效果： 点击一次输出3，点击第二次输出6

  为了使点击之后可以立刻得到渲染结果：使用$nextTick

  3. slot插槽

  ---

  ****组件插槽的作用：****父组件向子组件传递内容（模板的内容）

  ****插槽的位置：****位于子组件的模板中

  （1） 基本使用

  vue 高级特性

  {{website.title}}

  SlotDemo.vue

  显示默认内容，即父组件没设置内容时

  （效果：链接会以标签形式显示并且显示title内容）

  （2）作用域插槽

  {{website.subTitle}} 

  （如果不传入值{{website.subTitle}}}，则会显示子组件的默认subtitle）

  使用：子组件中作用域的data让父组件可以获取到

  {{slotProps.slotData.title}}

  效果：页面显示子组件内容wangEditor

  （思路：在slot中定义动态属性slotData，然后把他定义到website上，website中含有title和subtitle。然后在index中使用ScopedSlotDemo中定义v-slot=”slotProps”.之后可以使用slot Props.slot DaTa拿到ScopedSlotDemo组件中website的内容，从而可以拿到website的title）

  （3）具名插槽

  有名字的插槽—根据内容进行匹配–没有名称会默认匹配

  父组件往子组件传递内容的时候需要对应好名字

  4. 动态组件异步组件

  ---

  （1）动态组件

  用法: ：is=********”component-name”

  需要根据数据、动态渲染的场景。即组件类型并不确定。（一般情况下组件类型是确定的）

  举例使用场景：新闻详情页。（组件位置不确定或者种类不确定。即不知道要渲染甚么样的组件，只知道数据。需要根据数据确定组件的类型，这时就需要用到动态组件）

  vue 高级特性

  （根据获取到的组件（text，image）进行渲染）

  （2）异步组件

  Import函数

  按需加载、异步加载大组件

  （什么时候用就什么时候加载，如果不使用永远都不会加载，适合于组件比较大比较复杂，这样会优化性能）

  使用语句import SlotDemo from ‘./SlotDemo’ 是同步加载

  <button @click=“showFormDemo = true”>show form demo

  // 然后在components里面写

  components: {

  FormDemo: () => import(‘…/BaseUse/FormDemo’),

  }

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  css

  1，盒模型
  2，如何实现一个最大的正方形
  3，一行水平居中，多行居左
  4，水平垂直居中
  5，两栏布局，左边固定，右边自适应，左右不重叠
  6，如何实现左右等高布局
  7，画三角形
  8，link @import导入css
  9，BFC理解

  

  js

  1，判断 js 类型的方式
  2，ES5 和 ES6 分别几种方式声明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  

  定，右边自适应，左右不重叠
  6，如何实现左右等高布局
  7，画三角形
  8，link @import导入css
  9，BFC理解

  [外链图片转存中…(img-BURvFUcw-1710852378795)]

  js

  1，判断 js 类型的方式
  2，ES5 和 ES6 分别几种方式声明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  [外链图片转存中…(img-s6bEgsUA-1710852378795)]

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】