【Vue(1)，熬夜整理2021最新Java高级笔试题

• 有了组件化的思想，我们在之后的开发中就要充分的利用它

• 尽可能的将页面拆分成一个个小的、可复用的组件

• 这样让我们的代码更加方便组织和管理，并且扩展性也更强

注册组件

---

组件的使用分成三个步骤：

• 创建组件构造器

• 注册组件

• 使用组件

---

上面注册组件的方式有些繁琐，Vue 提供了注册的语法糖：

• 主要是省去了调用 Vue.extend() 的步骤，而是可以直接使用一个对象来代替

语法糖注册全局组件和局部组件：

---

组件中 template 里的 HTML 代码是可以被分离出来的，Vue 提供了两种方案来定义 HTML 模块内容：

• 使用 <script> 标签

  

• 使用 <template> 标签

  

全局组件和局部组件

---

当我们通过调用 Vue.component() 注册组件时，组件的注册是全局的

• 这意味着该组件可以在任意 Vue 示例下使用

如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

父子组件

---

组件数据

---

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

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

  只是这个 data 属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据

  

data 为什么是一个函数呢?

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

• 其次，Vue 让每个组件对象都返回一个新的对象（利用函数的作用域使各个组件间互不影响），如果是同一个对象的，组件在多次使用后会相互影响

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719170222528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_1,color_FFFFFF,t_70)

父子组件的通信

---

如何进行父子组件间的通信呢？Vue 官方提到：

• 通过 props 向子组件传递数据

• 通过 事件 向父组件发送消息

  

父->子：props

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

props 的值有两种方式：

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

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

一个最简单的 props 传递：

---

当需要对 props 进行类型等验证时，就需要对象写法了

验证支持的数据类型：

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

  

• 当有自定义构造函数时，验证也支持自定义的类型

  

子->父：$emit()

props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中

自定义事件的流程：

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

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

父子组件的访问方式

---

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件

• 父组件访问子组件：使用 $children 或 $refs

• 子组件访问父组件：使用 $parent

$children

this.$children 是一个数组类型，它包含所有子组件对象

我们这里通过一个遍历，取出所有子组件的 message 状态。

$refs

$children 的缺陷：通过 $children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值，但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。

有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用 $refs

$refs 的使用：

• $refs 和 ref 指令通常是一起使用的

• 首先，我们通过 ref 给某一个子组件绑定一个特定的ID

• 其次，通过 this.$refs.ID 就可以访问到该组件了

  

$parents

通过 $parent 可以在子组件中直接访问父组件

注意事项：

• 尽管在 Vue 开发中允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这样做

• 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了

  如果将该子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题

• 另外，如果通过 $parent 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于调试和维护

  

非父子组件通信

---

非父子组件关系包括多个层级的组件，也包括兄弟组件的关系。

在 Vue1.x 的时候，可以通过 $dispatch 和 $broadcast 完成

• $dispatch 用于向上级派发事件

• $broadcast 用于向下级广播事件

• 但是在 Vue2.x 都被取消了

在 Vue2.x 中，有一种方案是通过中央事件总线，也就是一个中介来完成，但是这种方案和直接使用 Vuex 的状态管理方案还是逊色很多，并且 Vuex 提供了更多好用的功能，所以这里我们暂且不讨论这种方案，后续我们专门学习 Vuex 的状态管理。

插槽 slot

---

编译作用域

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

参考一个例子：

isShow 属性包含在组件中，也包含在 Vue 实例中，最终可以渲染出来，也就是使用的是 Vue 实例的属性。

我们在使用 <my-cpn v-show="isShow"></my-cpn> 的时候，整个组件的使用过程是相当于在父组件中出现的，那么他的作用域就是父组件，使用的属性也是属于父组件的属性。因此，isShow 使用的是 Vue 实例中的属性，而不是子组件的属性。

slot 相关知识点

slot 相关知识点变化较大，详情可参考官方文档

最后

为什么我不完全主张自学？
①平台上的大牛基本上都有很多年的工作经验了，你有没有想过之前行业的门槛是什么样的，现在行业门槛是什么样的？以前企业对于程序员能力要求没有这么高，甚至十多年前你只要会写个“Hello World”，你都可以入门这个行业，所以以前要入门是完全可以入门的。
②现在也有一些优秀的年轻大牛，他们或许也是自学成才，但是他们一定是具备优秀的学习能力，优秀的自我管理能力（时间管理，静心坚持等方面）以及善于发现问题并总结问题。
如果说你认为你的目标十分明确，能做到第②点所说的几个点，以目前的市场来看，你才真正的适合去自学。

除此之外，对于绝大部分人来说，报班一定是最好的一种快速成长的方式。但是有个问题，现在市场上的培训机构质量参差不齐，如果你没有找准一个好的培训班，完全是浪费精力，时间以及金钱，这个需要自己去甄别选择。

我个人建议线上比线下的性价比更高，线下培训价格基本上没2W是下不来的，线上教育现在比较成熟了，此次疫情期间，学生基本上都感受过线上的学习模式。相比线下而言，线上的优势以我的了解主要是以下几个方面：
①价格：线上的价格基本上是线下的一半；
②老师：相对而言线上教育的师资力量比线下更强大也更加丰富，资源更好协调；
③时间：学习时间相对而言更自由，不用裸辞学习，适合边学边工作，降低生活压力；
④课程：从课程内容来说，确实要比线下讲的更加深入。

应该学哪些技术才能达到企业的要求？（下图总结）

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

教育现在比较成熟了，此次疫情期间，学生基本上都感受过线上的学习模式。相比线下而言，线上的优势以我的了解主要是以下几个方面：
①价格：线上的价格基本上是线下的一半；
②老师：相对而言线上教育的师资力量比线下更强大也更加丰富，资源更好协调；
③时间：学习时间相对而言更自由，不用裸辞学习，适合边学边工作，降低生活压力；
④课程：从课程内容来说，确实要比线下讲的更加深入。

应该学哪些技术才能达到企业的要求？（下图总结）

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

[外链图片转存中…(img-rGfohRPH-1630575880072)]

[外链图片转存中…(img-7gaeARdH-1630575880075)]