最后
== 就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。 只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。
并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。 开源分享：docs.qq.com/doc/DSmRnRG…
hello Vue3.1 为什么要用使用分离写法？
我们知道组件的展示内容是在属性template定义好的，然后会发现div的内容都直接在对象里面写，如果简单的内容还是可以的，但是实际的开发，肯定是比较复杂是功能，如果直接写在对象里就有点不好维护，也不好理解代码。如果把这个template对应的div放出来，那我们组件对象就好维护很好
3.2 怎么分离元素
有一个元素标签template就可以办到分离写法，在定义好，定义好id，然后在对象里用’#id’就可以了
Vue.component("component3",{
template: '#component3'
});
4.1 什么是全局组件？
全局组件：只要是用Vue.component 来创建的组件都是全局注册的 。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用。
比如你实例了两个new Vue()，这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
下面代码说明，我创建了全局组件，在两个实例app和app1都可以使用
4.2 什么是局部组件？
局部组件： 在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套。
用下面的代码说明：在实例中只用component2组件，不能使用component1，因为component1没有在实例上注册
demo：
hello vue5.1 什么是父子组件？
其实就是组件里通过components再嵌套注册组件，嵌套注册组件的就是子组件，被嵌套就是父组件。
如图，红色区域就是父组件，嵌套在里面的蓝色区域就是子组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZCwS4kA-1612834014930)(vue笔记2_files/2.jpg)]
注意：全局组件不存在父组件和子组件的，因为全局组件在实例里的任何地方都可以使用
5.2 父子组件体现在代码上的结构
看下面例子的代码
Vue实例就是一个最大的父组件，component1注册在实例上，那component1就是Vue实例的子组件。
component2注册在component1组件上，那component2就是component1组件的子组件。
6.1 组件可以直接访问Vue实例的数据吗？比如直接用{{}}
答案是不能。
组件是一个单独功能模块的封装（相当于一个小的Vue实例），就是这个模块有属于自己的HTML模板，也有自己属性数据data。
我们看看下面的代码，我们在子组件直接用{{mes}}来使用父组件的data属性的值mes
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MDeB1Lb-1612834014933)(vue笔记2_files/3.jpg)]
6.2 组件数据存放
组件对象也有一个data属性，但是data属性必须是一个函数，然后这个返回的对象，对象内部保证这数据
6.3 Vue组件中的data为什么是函数？
为什么组件的data是一个函数,官网说： 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
我们都是知道，对象一旦创建就会指定一个地址，每个人去用这个对象的时候，都是修改对象的属性值，地址是不是改变了，然后回想一下，组件的使用很多时候都是要复用的，你复用的时候，都会想着每个组件的数据都是单独维护的，不要相互影响。如果对象都是只是创建一次，那就会出问题了，现在有一个组件使用了两次，data内存地址都是一个，那一个组件修改了data，另一个组件的值也会跟着改变，这个是我们最不想看到的情况。那data是一个函数的话就不一样了，函数每次返回的对象都是一个新对象，这样就保持了每个组件的对象都不想相互影响
一句话：就是为了保证每个组件的data对象都是相互独立
之前我们说，组件不能直接使用Vue实例的数据，但是实际开发过程，组件使用Vue实例的数据很正常
7.1 组件要怎样才能使用父组件的数据呢？
通过 Prop 向子组件传递数据
7.2 Prop 使用
1）props属性的值为数组
定义
在组件对象里使用props属性，然后直接定义数组，数组的对应的值就是获取的传参的对象。
const component1 = {
template: "#component1",
props: ['propsMessage','propsmessage1'],
}
使用
在使用组件的时候，我只要把这些定义好数组的值，当成是组件的属性值就可以直接传递参数了。（使用v-bind可以使用父组件的data数据）
2）props属性的值为对象
对象的用处：允许配置高级选项，如类型检测、自定义验证和设置默认值。
你可以基于对象的语法使用以下选项：
| 对象属性值 | 说明 |
| :-: | --: |
| type | 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。 |
| default：any | 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 |
| required：Boolean | 定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 |
| validator：Function | 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出 |
定义
和组数差不多，props属性是最大的一层对象，属性值是传递参数对象，然后可以对传递参数进行各种个性化设置
示例：
1） 怎样子组件向父组件传递数据
子组件给父组件传递数据的时候，就要使用自定义事件来实现
自定义事件的流程：
-
在子组件中，通过
$emit来触发事件 -
在父组件，通过
v-on来监听子组件事件
读者福利
========
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
