VUE3面试题个人总结

一、VUE3面试题个人总结

1、编译流程在Vue3中分为编译期和运行期两部分。编译期间，Vue-loader将单文件组件编译成符合原生JavaScript语法的模块。运行期间，内置模板引擎对模板进行编译，生成render()函数，并按先父组件后子组件顺序编译模板。

2、宏与语法糖在Vue3中是两种不同的概念，它们均使用形式类似函数调用，区别在于：宏不需要通过模块导入，且编译期被转换成原生JavaScript代码；语法糖则创建了新的语法，宏为现有语法赋予了新含义。

3、setup()函数是本质，defineProps()、defineEmits()、defineExpose()等宏是在编译期间将代码转换为setup()函数的语法糖。setup()函数内的代码通过getCurrentInstance()获取组件实例，用于存放组件状态。

4、单文件组件的初始化流程始于创建组件实例，接着通过父组件vnode初始化实例的props、attrs、slots成员。setup()函数执行后，模板编译为render()函数，然后创建vnode。如有子组件，则切换至子组件，重复上述步骤，直到所有组件初始化完成，最后将vnode同步到实际节点上。

5、createApp()与mount()函数分别执行平台相关与平台无关代码。createApp()创建渲染器并返回App实例，mount()则创建组件实例、vnode、完成依赖收集，并通过渲染器将vnode渲染为平台界面。

6、Pinia是Vue官方团队开发的新状态管理库，用于替代Vuex。相比Vuex，Pinia拥有更简洁的API，且被视为Vuex的替代品。

7、虚拟DOM是JavaScript描述的树形结构，用于缓存响应式数据变化，下次刷新周期一次性同步至实际DOM。diff算法通过就地复用策略高效同步虚拟DOM与DOM数据。

8、Vue3内部维护预队列、队列与后队列执行异步任务。所有异步任务通过flushJob微任务按优先级依次执行。异步刷新机制只更新vDOM，待下一个刷新周期同步DOM，通过job队列、Promise与diff算法实现。

9、nextTick()通过Promise实现，在下次刷新DOM后执行回调函数。当flushJob完成所有函数执行，nextTick()回调被推入微任务队列，开始执行。

10、Vue3组件内有3类Effect：computedEffect、watchEffect、renderEffect，用于数据与监听函数绑定。这些Effect在setup()期间创建，其中computedEffect、watchEffect在onBeforeMount之前，renderEffect在onBeforeMount与onMounted之间。

11、watch()、watchEffect()与computed()都用于数据与监听函数绑定。watchEffect()与computed()依赖收集与监听函数是同一函数，watch()监听函数默认不执行；computed()监听函数立即执行，watch()监听函数执行时机由用户指定。

12、响应式编程通过发布订阅模式、Effect对象与重写get函数实现。发布订阅模式绑定数据与监听函数，Effect对象封装监听函数与调度策略，get函数负责依赖收集与返回数据。

13、ref()与reactive()都是响应式变量封装工具。ref()支持任意类型，reactive()仅支持引用类型，reactive()通过Proxy实现，ref()通过类封装，重写get/set实现。ref()变量通过value函数访问。

14、ref()用于封装普通数据，实现响应式，ref(null)用于获取子组件实例。attrs与props用于模板属性形式传递数据，props需定义，attrs无需定义，props增加代码可读性，attrs传递更灵活、代码更简洁。

15、provide()与inject()在祖先组件提供数据，子孙组件获取，通过原型链实现。emit()通过发布订阅模式，子组件发送事件，父组件立即执行相应函数。

16、单向数据流约定父组件向子组件传递数据单向流动，避免数据冲突，确保数据流向清晰明确。组件注册分为局部与全局，局部注册限定组件使用范围。模板编译流程发生在setup()执行后、onBeforeMount前，解析AST生成渲染函数。

17、组件注册允许在Vue内使用自定义组件，分为局部与全局注册。指令v-show与v-if区别在于v-show组件不显示但存在，v-if组件不创建；v-on与v-bind分别用于事件绑定与变量绑定。

18、v-text、v-html与插值表达式区别在于插值表达式存在闪屏问题，v-text、v-html无此问题，插值表达式直接显示字符串，v-text与v-html则能渲染HTML标签。

19、v-for需添加key值以区分元素，避免无差别的元素复用。v-if优先级高于v-for，导致访问变量冲突，不能同时使用。v-model实现数据双向绑定，通过响应式数据与输入框事件实现。

20、hook是一种编程封装思想，通过闭包实现，Vue3借鉴React将这种思想命名为hook。

21、插件在Vue3中通过use()引入，执行install()函数实现全局功能。

22、异步组件首次加载不加载对应JavaScript文件，待需要显示时再加载，提升页面加载速度。

23、前端路由与路由懒加载分别在浏览器端与SPA中实现内容或页面的动态加载，提高页面加载效率。

二、JavaScript跨域总结与解决办法 什么是跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol+window.location.host，也可以理解为“Domains, protocols and ports must match”。

接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置，这里就不阐述了，有兴趣的可以看看yahoo的这篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》

1、document.domain+iframe的设置

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在和两个文件中分别加上document.domain=‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！代码如下：

var ifr= document.createElement('iframe');

ifr.src=';;

ifr.style.display='none';

document.body.appendChild(ifr);

var doc= ifr.contentDocument|| ifr.contentWindow.document;

alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);

这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。

1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。

2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility

这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

if(!this.readyState|| this.readyState==='loaded'|| this.readyState==='complete'){

js.onload= js.onreadystatechange= null;

这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： 中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：

先是a.com下的文件cs1.html文件：

var ifr= document.createElement('iframe');

ifr.style.display='none';

ifr.src=';;

document.body.appendChild(ifr);

var data= location.hash? location.hash.substring(1):'';

console.log('Now the data is'+data);

parent.location.hash='somedata';

// ie、chrome的安全机制无法修改parent.location.hash，

//所以要利用一个中间的cnblogs域下的代理iframe

var ifrproxy= document.createElement('iframe');

ifrproxy.style.display='none';

ifrproxy.src='注意该文件在"a.com"域下

document.body.appendChild(ifrproxy);

parent.parent.location.hash= self.location.hash.substring(1);

当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……

4、window.name实现的跨域数据传输

文章较长列在此处不便于阅读，详细请看window.name实现的跨域数据传输。

HTML5中最酷的新功能之一就是跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+,和 Safari 4.0+。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

otherWindow.postMessage(message, targetOrigin);

otherWindow:对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。

message:所要发送的数据，string类型。

targetOrigin:用于限制otherWindow，“*”表示不作限制

<script type="text/javascript">

var ifr= document.getElementById('ifr');

var targetOrigin='若写成';效果一样//若写成';就不会执行postMessage了

ifr.contentWindow.postMessage('I was there!', targetOrigin);

window.addEventListener('message', function(event){

//通过origin属性判断消息来源地址

if(event.origin==';){

alert(event.data);//弹出"I was there!"

alert(event.source);//对a.com、index.html中window对象的引用

//但由于同源策略，这里event.source不可以访问window对象

参考文章：《精通HTML5编程》第五章——跨文档消息机制、

这是从YUI3的IO组件中看到的办法，具体可见。

可以看在Adobe Developer Connection看到更多的跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。

三、javascript好难(javascript好难啊)

js感觉好难学

1、JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的动态脚本语言，内置支持类型。主要应用于WEB前端使用。

1、JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的动态脚本语言，内置支持类型。主要应用于WEB前端使用。

2、从语言本身的难度上来说，javaScript的难度要大大低于JAVA、C++等编译型的语言。但是很多学生都觉得JS难，这个问题在于javaScript这门语言比较灵活，他的好处就是灵活，但是这个灵活不理解的话，往往都会觉得难。

3、总的来说，javaScript属于易学难精的那种，他的入门还是比较简单的，就是后期高级别的难度比较大。

4、初学者不需要有畏难情绪，多看多学多练。一定要多动手写代码，多写几遍就能明白代码的含义了。

5、希望对你有帮助，祝你学有所得。

JavaScript是一种高级的、解释型、直译式脚本语言，是一种基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。学习javascript难吗？说实话，不容易学，没HTMl基础直接学JavaScript有点难度。HTML这门课程如果入门的话不是很难，刻苦点两三个月就能搞定。有HTML基础的话，只要继续刻苦一两个月左右JavaScript，才有效果，也视个人天赋而定。当然也少不了大量练习，要经常自己动手写特效。要求网上大部分特效，你都能改。然后自己能写一些简单的特效，就算入门了。但是想学到高深那就不容易了，JavaScript入门后再继续学可以说也是有些难度的。

Js给人那种感觉的原因多半是因为它如下的特点：

A：本身知识很抽象、晦涩难懂，如：闭包、内置对象、DOM。

B：本身内容很多，如函数库、对象库就一大堆。

C：混合多种编程思想。它里面不但牵涉面向过程编程思想，又有面向对象编程思想，同时，它的面向对象还和别的编程语言（如：C++，JAVA，PHP）不大一样。就好像又是新的一样，让你对曾经学的面向对象产生了怀疑......

D：辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后，变量、函数、对象你也都略知一二，但一到公司开发项目的时候，却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库，如：jquery，angular，boostrap，amaze，layui，ueditor等，而这些库又多如牛毛，同时还有自己的难点。让你都不知道该学哪个好，甚至都怀疑自己学的是不是js了，好像有多个版本的js一样，总是学不完......

那么，怎么才能在js领域内学的轻松甚至游刃有余呢？我总结了一些实战意义的js学习经验：

时刻都不能忘记，否则很容易犯“一叶障目不见泰山”的错误。不要学了很久就知道js是编程语言，就是写代码，而且特点就是乱七八糟就完了，那样是学不好js的。要时时抓住它的地位，确切的说是它在整个Web中的地位：它属于前端的核心，主要用来操控和重新调整DOM，通过修改DOM结构，从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习，并且形成条件反射。

这个只能是过来人给你提供参考了。我的学习路线如下：

A：js基础部分，如：定义变量、函数、数组、字符串等的处理，内置函数、内置对象等；

B：js面向过程编程思想，封装出各个函数，试着用这些去做一些常见的小功能，如：选项卡、自定义多选按钮、自定义播放器、3D幻灯片；

C：js面向对象编程思想，试着去封装一些你自己的对象，提供出有意义的接口出来；

D：学了上述的内容，然后学常用的库，这里必须学jquery；

E：学基于jquery之上的常见插件，如：bootstrap，Layer，富文本编辑器等；

F：综合应用上面的多种库写实际项目的模板，多写几套。

充分调动你所学的东西，从多角度去做某一功能，如：以前你是从面向过程角度做的，现在改为从面向对象的角度再来做，或者继续做成可以直接使用的插件，提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处：既综合应用了你的所学，又能有实际意义。

此时的你，不适合一来就看很复杂很炫的网页效果的源代码，也不适合一来就学jquery，angular，vue，bootstrap这些东西。这些内容包含了很多深奥的知识在里面，在没有任何基础的情况下直接学这些，会严重打击你的自信心。而此时你是弱小的，你需要的是培养信心，而不是反过来，否则结局很可能是“夭折”，离学有所成也就遥遥无期了。

这种总结不但包括源代码、显示效果截图，还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了，要多回顾、多改进、多精简。到做项目的时候，应该是看里面的一两句话就知道是讲什么了，而不要再去看长篇大论了。

这个可以让你越学越清晰，你可以按你喜欢的任何形式去做，只要自己印象深刻就行。

注意：知识导图也应该是经常修改、修正，让它更合理、更清晰。

学习编程知识，就来北京尚学堂，优秀的师资和多年的编程教育经验，会让你在学习的道路上快人一步。