dom vue 加载完 执行_前端面试题 -- Vue

最新推荐文章于 2023-11-27 10:48:25 发布
最新推荐文章于 2023-11-27 10:48:25 发布
阅读量246 收藏
点赞数
文章标签： dom vue 加载完 执行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29159613/article/details/112160439
版权
本文总结了Vue面试中常见的问题，包括Vue的双向绑定原理、单向数据流、路由处理、组件生命周期、v-if与v-show的区别、自定义指令和过滤器等，帮助开发者深入理解Vue的核心概念和技术细节。
摘要由CSDN通过智能技术生成

前言

毫无疑问，前端开发将会是2020年技术领域最火热的专业至一

在入门学习前端的过程中你遇到的任何技术，行业之间的问题，你都可以加入我的学习交流裙。

前面++++++545++++++

中间++++++667++++++

后面++++++817++++++

或者点击此处即可添加。

作为前端开发中现行最火的框架之一，Vue 在面试中出现的频率不断增加。基于此，总结了一些 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴

感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注

如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过

以下 ↓

1. 说一下Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter， getter，在数据变动时发布消息给订阅者，触发相应监听回调

2. 解释单向数据流和双向数据绑定

单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

3. Vue 如何去除url中的 #

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history

new Router({ mode: 'history', routes: [ ] })

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

4. 对 MVC、MVVM的理解

MVC

eae4d564236ac41c46356f715a406513.png

特点：

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后，要求 Model 改变状态
  3. Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的

MVVM

f74f428e3659e36cae77e2e52239e7b2.png

特点：

  1. 各部分之间的通信，都是双向的
  2. 采用双向绑定：View 的变动，自动反映在 ViewModel，反之亦然

具体请移步 这里

5. 介绍虚拟DOM

参考这里

6. vue生命周期的理解

vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程
  • beforeCreate() 在实例创建之间执行，数据未加载状态
  • created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
  • beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
  • mounted() 页面、数据渲染完成，真实dom挂载完成
  • beforeUpadate() 重新渲染之前触发
  • updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
  • beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行

7. 组件通信

父组件向子组件通信

子组件通过 props 属性，绑定父组件数据，实现双方通信

子组件向父组件通信

将父组件的事件在子组件中通过 $emit 触发

非父子组件、兄弟组件之间的数据传递

/*新建一个Vue实例作为中央事件总嫌*/let event = new Vue();/*监听事件*/event.$on('eventName', (val) => { //......do something});/*触发事件*/event.$emit('eventName', 'this is a message.')

Vuex 数据管理

8. vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能

参考 这里

9. v-if 和 v-show 区别

使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。 v-show 则是不管值为 true 还是 false ， html 元素都会存在，只是 CSS 中的 display 显示或隐藏

10. $route和$router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法 $route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

11. NextTick 是做什么的

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

具体可参考官方文档 深入响应式原理

12. Vue 组件 data 为什么必须是函数

因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

13. 计算属性computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染， method 调用总会执行该函数

14. 对比 jQuery ，Vue 有什么不同

jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

15. Vue 中怎么自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

局部注册

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }

参考 官方文档-自定义指令

16. Vue 中怎么自定义过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })<!-- 'abc' => 'cba' --><span v-text="message | reverse"></span>

过滤器也同样接受全局注册和局部注册

17. 对 keep-alive 的了解

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

<keep-alive> <component> <!-- 该组件将被缓存！ --> </component></keep-alive>

可以使用API提供的props，实现组件的动态缓存

具体参考 官方API

18. Vue 中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key， Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

具体参考 官方API

19. Vue 的核心是什么

数据驱动 组件系统

20. vue 等单页面应用的优缺点

优点：
  • 良好的交互体验
  • 良好的前后端工作分离模式
  • 减轻服务器压力
缺点：
  • SEO难度较高
  • 前进、后退管理
  • 初次加载耗时多

21. vue-router 使用params与query传参有什么区别

vue-router 可以通过 params 与 query 进行传参

// 传递this.$router.push({path: './xxx', params: {xx:xxx}})this.$router.push({path: './xxx', query: {xx:xxx}})// 接收this.$route.paramsthis.$route.query

  • params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
  • params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题
原文作者：游荡de蝌蚪
原文出处：segmentfault
原文链接： https:// segmentfault.com/a/1190 000018634744
瑞恩的奇幻博物馆
关注
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
10-17
主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
dom加载完再执行 vue_Vue.js DOM加载后执行自定义事件的方法
weixin_39920397的博客
12-19 1608
Vue.js DOM加载后执行自定义事件的方法发布于 2020-7-12|复制链接分享一篇关于VUE DOM加载后执行自定义事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧最近想用vue做一个小东西，谁知道一开始就遇到了一个棘手的问题：首先我想在页面加载前通过ajax请求页面展示所需要的信息，于是我在created钩子函数里面请求了我想要的数据```javascriptc...
VUE DOM加载后执行自定义事件的方法
12-10
最近想用vue做一个小东西，谁知道一开始就遇到了一个棘手的问题： 首先我想在页面加载前通过ajax请求页面展示所需要的信息，于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data； }); } 这一步很顺利，接下来就是要将数据绑定到对
Vue3挂载完毕后，隐藏dom再重新加载组件的方法
前端程序媛_Ying博客
11-27 1196
组件原本是在PC端使用的，现在需要把组件再封装一次，供app调用，但是在app上会显示tag栏，有占位影响空间，所以需求去掉头部tag，只显示下方组件。实现方法，以前是直接引用的组件，现在改为动态引用组件，使用,挂载后，获取tag栏的dom，使用display：‘none’；隐藏，然后再动态导入组件。
DOM加载顺序
痞子先生的博客
05-18 325
DOM加载顺序 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。构造HTML DOM模型。加载图片等外部文件。页面加载完毕。 加载顺序实例： html xmlns="http://www.w3.org/1999/xhtml"> head runat="server"> title>Titletitle> style type="te
Vue经典面试题_227题(部分题没答案).pdf_前端面试题
09-01
Vue经典面试题_227题(部分题没答案).pdf_前端面试题 MVVM 模式 MVVM 模式是 Model-View-ViewModel 的缩写，代表一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 ...
vue面试题-前端程序员必备-前端框架-大厂面试准备.docx
02-17
以下是对Vue面试题中涉及的一些核心知识点的详细解释： 1. **Vue的优点**： - **轻量级**：Vue的核心库专注于视图层，大小小巧，减少了加载时间，提高了性能。 - **双向数据绑定**：Vue使用`v-model`指令实现了...
vue前端面试题-超级全的vue面试题-将近2w字！！！
02-11
Vue.js 是一款流行的前端JavaScript框架，它主要用于构建交互式的Web界面。Vue的核心特性包括MVVM数据绑定和可组合的组件系统，提供了一个简洁且灵活的API。Vue.js将重点放在MVVM模式的视图模型层，实现了双向数据...
vue面试-高质量vue面试题-高频vue面试题
最新发布
01-17
本文将围绕“Vue面试-高质量vue面试题-高频vue面试题”这一主题，深入探讨Vue.js的核心概念、关键特性、以及在实际开发中的应用。 一、Vue.js核心概念 1. 双向数据绑定：Vue通过`v-model`指令实现了视图与模型之间...
前端面试指南 - vue 篇面试题
05-08
【Vue.js 前端面试指南 - Vue 篇面试题】 在前端面试中，Vue.js 是一个重要的考察点，尤其是对于那些希望从事基于 Vue 的项目开发的求职者。了解 Vue 的基本概念、特性和实战经验是必备技能。以下是关于 Vue.js 的...
vueJs实现DOM加载完之后自动下拉到底部的实例代码
10-18
主要介绍了vueJs实现DOM加载完成之后自动下拉到底部的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 如果需要在DOM加载完成后获取DOM的动态属性,应该怎么做
qq_37898024的博客
05-23 2170
Vue中如果想要在DOM加载之后，获取DOM元素中的值应该怎么做？ 需求：在请求后台接口时，返回带有HTML标签的数据content 在前台中通过v-html指令进行绑定 <div v-html="content" id="con"></div> 其中content数据赋值在created()生命周期中定义，在updated()周期函数中获取到DOM元素的值 export default { name: 'TestResult', components: {
vue踩坑 页面未触发渲染
Beamon__的博客
12-28 4464
最近项目中数次遇到了 “页面没有按照预想渲染” 的现象，特推出以下两种解决思路： 1. $nextTic()方法 具体操作：在$nextTic()方法回调函数内进行data更新 this.$nextTick(() =&gt; { // ... }); 2. $forceUpdate()方法 具体操作：执行方法，即可使组件强制重新渲染 // ... this.$forceUp...
dom vue 加载完 执行_浅谈Vue.js 关于页面加载完成后执行一个方法的问题
weixin_39997957的博客
12-20 993
首先我们会想着在mounted或者created里面加入想要执行的方法，但是有的时候会遇到在你执行这个方法的时候，页面还并没有被渲染完成，所以就会出现这个方法在匹配页面标签报错的情况。解决思路：1.通过子页面调用父页面的方法，因为在子页面开始渲染的时候，你的父页面肯定是已经渲染好了的，前提这里的方法中是去找寻父页面的标签。2.直接在本页面监视一个参数，发现参数被初始化了，说明页面也已经加载完成，因...
vue 将字符串最后一个字符给替换_前端发展方向指南—Vue源码初始化
weixin_39788572的博客
11-20 212
Vue 的源码结构比较绕，同时使用了大量的面向对象的高级技巧。重写方法，扩展方法，多态等应用。从 Vue 实例的加载过程就可以看出来，这一节重点看看 Vue 的源码加载流程是什么。前言vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票vue源码阅读类的文章。在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一...
dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法？
weixin_39628945的博客
12-19 1047
最近在玩一个类似拼图的东东，业务场景就是在主图加载到页面的时候，计算主图相对页面容器的缩小放大系数，通过这个系数计算子图的左边及宽度问题：在mounted中调用计算主图的原始宽高时，提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素)，因此导致所有的计算都返回0在mounted中，使用一个定时器就是好的...
vue key重复_前端面试题——Vue
weixin_39942492的博客
11-20 296
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles)，然后现在也是找了一些在 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴。如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过。以下 ↓1. 说一下...
Vue.js笔记------事件
weixin_69270668的博客
10-23 4292
页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。
vue.js 页面DOM元素加载完以后，执行方法
热门推荐
qq_33871178的博客
01-23 1万+
在methods 中，使用 $nextTick 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值