2024年前端最新Vue3(24)，2024年最新分享一点面试小经验怎么说

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

return {

msg: ‘你好,Vue3！’

}

},

// 组件选项

components: {

‘lk-count’: Counter

}

});

// 挂载vue实例

app.mount(‘#app’);

当然我们可以定义多个局部组件,然后通过 components 可以将其挂载在app实例中：

若我们想要局部组件之间相互使用，不能像全局组件那样在注册时向模板template写入名称标签，比如在注册组件时通过components将其挂载在想使用的实例中,然后再如全局组件那样向模板template写入名称标签：

// 注册第二个局部组件

const Box = {

components: {

‘lk-count’: Counter,

},

template: `

盒子组件

`

}

1.4.3、总结

全局组件：在整个Vue实例中都可以被调用，若想要全局组件之间相互使用，只需将想使用全局组件的名称写入 template 中

局部组件：只能在当前组件中被使用，若想在其他组件中使用，必须使用 components 将其挂载在想使用的组件中，然后再如全局组件那样向模板template写入名称标签

我们之后其实对局部组件用的更多一些。

1.5、组件标签化

---

template 模块写法不够清晰，如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰

Vue 提供了两种方案来定义HTML模板内容

• 使用 < script > 标签

• 使用 < template > 标签

1.5.1、使用script标签

下面代码是我们之前注册局部组件的代码，我们可以看到 templates 里面有一个 button 按钮

我们使用 script 标签将其抽离

1.5.2、使用template标签🔥

我们使用 template 标签将其抽离

<button @click=“count++”>你点击了{{count}}次

1.6、组件数据存放

---

问题：组件可以访问Vue实例数据吗？

结论：组件不能直接访问Vue实例中的 data

组件是一个单独功能模块的封装：

• 这个模块有属于自己的 HTML 模板，也应该有属于自己的数据 data

组件自己的数据存放在哪呢？

• 组件对象也有一个 data 属性(也可以有 methods 属性)

• 只是这个 data 属性必须是一个函数

• 而且这个函数返回一个对象，对象内部保存着数据

// 注册一个局部组件

const Counter = {

data() {

return {

count: 0

}

},

template: `

<button @click=“count++”>你点击了{{count}}次

`,

methods: {}

}

为什么 data 在组件中必须是一个函数呢？

我这里来写一个简单介绍：我们设立两个对象，虽然都是空对象，但是两者不相等。

let obj1 = {};

let obj2 = {};

console.log(obj1 === obj2); // false

上述代码在内存中的示意图如下：

我们创建一个对象

let obj = {

name: ‘秦晓’

}

let p1 = obj;

let p2 = obj;

let p3 = obj;

console.log(p1,p2,p3);

console.log(p1 === p2); // true

let obj = {

name: ‘秦晓’

}

let p1 = obj;

let p2 = obj;

let p3 = obj;

// 我们修改p1的name

p1.name = ‘大林’;

console.log(p1,p2,p3);

console.log(p1 === p2);

从上述例子中就可以看出，如果我们在使用对象的时候，很容易造成值拷贝。现在我们来回答一下为什么 data 在组件中必须是一个函数呢？

• 首先，如果不算是一个函数，Vue 直接就会报错

• 其次，原因是在于 Vue 让每个组件对象都返回一个新的对象，因为如果是同一个对象，组件在多次使用后会相互影响

1.7、组件通信props

---

组件通信的常用方式有4种：

1. props

2. 自定义事件

3. 消息订阅与发布

4. vuex

在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的

但是，在开发中，往往一些数据确实需要从上层传递到下层

• 比如在一个页面中，我们从服务器请求到了很多的数据

• 其中的一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示

• 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件) 将数据传递给小组件(子组件)

组件中，使用选项 props 来声明需要从父级接收到的数据(properties)

props 的值有两种方式：

• 方式一：字符串数组，数组中的字符串就是传递时的名称

• 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

1.7.1、props传数组

我们先来看方式一：先看如下代码，我们使用局部组件展示数据

技能掌握

• Web
• Python
• Java

• 

  如果我们的数据是从服务器端返回的，那么我们就需要动态绑定数据，代码如下：

  {{brand}}
• {{item}}

• 

  1.7.2、props传对象

  • 在前面，我们的 props 选项是使用一个数组

  • 除了数组之外，我们也可以使用对象，当需要对props 进行类型等验证时，就需要对象写法了

  1、类型限制

  我们可以在 props 里面限制父组件给子组件传递的数据类型

  {{cmovies}}}

  {{cmessage}}

  

  类型一般支持：String、Number、Boolean、Array、Object、Date、Function、Symbol、自定义类型

  2、默认值和必传值

  • type : 限制的类型

  • default : 如果没有传值,给一个默认值

  • 注意:类型是对象或者数组时, 默认值必须是一个函数

  • required : 必须的,即意味着这个值是必须要传递的,不传就报错

  {{cmovies}}}

  {{cmessage}}

  3、props驼峰标识

  当我们 props 里面的属性是驼峰写法的时,在传入值时需要进行 - 连接

  {{cInfo}}

  {{childMyMessage}}

  1.7.3、子级向父级传递

  props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件去。这个时候，我们需要使用自定义事件来完成

  自定义事件的流程：

  • 在子组件中，通过$emit() 来发射事件

  • 在父组件中，通过v-on 来监听子组件事件

  我们来看下方代码,我们在子组件中放置一个按钮,在父组件中对子组件进行注册：

  <button @click=“btnClick”>点我

  

  如果我们点击了子组件，希望让父组件知道，那么子组件就要发射事件到父组件：例如如下代码，我们使用子组件发射事件来触发父组件的 boxFunc 函数：

  <lk-box @box-click=“boxFunc”>

  <button @click=“btnClick”>点我

  

  那如果我们点击子组件按钮，同时还想要传递参数给父组件，代码如下：

  • 我们给$emit()事件传递参数

  • 在触发函数中接收参数

  <lk-box @box-click=“boxFunc”>

  <button @click=“btnClick”>点我

  

  如果我们想传递多个参数，我们可以以一个对象或者数组的形式传递，例如我们传递一个对象：

  Vue 面试题

  1.Vue 双向绑定原理
  2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
  3.你是如何理解 Vue 的响应式系统的?
  4.虚拟 DOM 实现原理
  5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
  6.Vue 中 key 值的作用？
  7.Vue 的生命周期
  8.Vue 组件间通信有哪些方式?
  9.watch、methods 和 computed 的区别?
  10.vue 中怎么重置 data?
  11.组件中写 name 选项有什么作用？
  12.vue-router 有哪些钩子函数?
  13.route 和 router 的区别是什么？
  14.说一下 Vue 和 React 的认识，做一个简单的对比
  15.Vue 的 nextTick 的原理是什么？
  16.Vuex 有哪几种属性?
  17.vue 首屏加载优化
  18.Vue 3.0 有没有过了解？
  19.vue-cli 替我们做了哪些工作？
  …
  

  算法

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

  1. 冒泡排序
  2. 选择排序
  3. 快速排序
  4. 二叉树查找: 最大值、最小值、固定值
  5. 二叉树遍历
  6. 二叉树的最大深度
  7. 给予链表中的任一节点，把它删除掉
  8. 链表倒叙
  9. 如何判断一个单链表有环
  10. 给定一个有序数组，找出两个数相加为一个目标数
      …
      

  由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

  /script>

  

  如果我们想传递多个参数，我们可以以一个对象或者数组的形式传递，例如我们传递一个对象：

  Vue 面试题

  1.Vue 双向绑定原理
  2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
  3.你是如何理解 Vue 的响应式系统的?
  4.虚拟 DOM 实现原理
  5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
  6.Vue 中 key 值的作用？
  7.Vue 的生命周期
  8.Vue 组件间通信有哪些方式?
  9.watch、methods 和 computed 的区别?
  10.vue 中怎么重置 data?
  11.组件中写 name 选项有什么作用？
  12.vue-router 有哪些钩子函数?
  13.route 和 router 的区别是什么？
  14.说一下 Vue 和 React 的认识，做一个简单的对比
  15.Vue 的 nextTick 的原理是什么？
  16.Vuex 有哪几种属性?
  17.vue 首屏加载优化
  18.Vue 3.0 有没有过了解？
  19.vue-cli 替我们做了哪些工作？
  …
  [外链图片转存中…(img-oMpZ73L6-1715591711314)]

  算法

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

  1. 冒泡排序
  2. 选择排序
  3. 快速排序
  4. 二叉树查找: 最大值、最小值、固定值
  5. 二叉树遍历
  6. 二叉树的最大深度
  7. 给予链表中的任一节点，把它删除掉
  8. 链表倒叙
  9. 如何判断一个单链表有环
  10. 给定一个有序数组，找出两个数相加为一个目标数
      …
      [外链图片转存中…(img-V2csbMW2-1715591711315)]

  由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666