vue相关面试题2:1.封装vue组件作用;2双向数据绑定原理;3.Router 是什么;4.导航钩子有哪些

简介: 它们有以下参数。●to::即将要进入的目标路由对象。●from:当前导航正要离开的路由。●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。

文章目录

请描述封装vue组件作用过程

Vue.js 的双向数据绑定原理是什么?

vue Router 是什么?它有哪些组件?

导航钩子有哪些?它们有哪些参数?

请描述封装vue组件作用过程

纽件可以提升整个项目的开发效率,能够把页面抽象成多个相对独立的模块

解决了传统项目开发中效率低、难维护、复用性等问题

使用 Vue.extend 方法创建 一个组件,使用 Vue.component 方法注册纽件,子组件需要数据

,可以在 props 中接收数据,

而子组件修改好数据后,若想把数据传递给父组件,可以采用 emit 方法


Vue.js 的双向数据绑定原理是什么?

Vue.js 采用 ES5 提供的属性特性功能 ,结合发布者-订阅者模式通过 Object.defineProperty为各个属性定义 get set 特性方 法,在数据发生改变时给阅读者发布消息,触发相应的监听回调

具体步骤如下。

(1)对需要观察的数据对象进行递归遍历,包括子属性对象的属性,设置set和get特性方法。当给这个对象的某个值赋值时,会触发绑定的set特性方法,于是就能监听到数据变化。

(2)用compile解析模板指令,将模板中的变量替换成数据。然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者。一旦数据有变动,就会收到通知,并更新视图。

(3) Watcher订阅者是Observer和Compile之间通信的桥梁,主要功能如下。

●在自身实例化时向属性订阅器(dep) 里面添加自己。

●自身必须有一个update()方法。

●在dep.notice()发布通知时,能调用自身的update()方法,并触发Compile 中绑定的回调函数。

(4) MVVM是数据绑定的入口,整合了Observer、 Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化通知视图更新的效果。

利用视图交互,变化更新数据model变更的双向绑定效果。


vue Router 是什么?它有哪些组件?

它是Vue.js的路由插件。组件包括router-ink和router-view.


导航钩子有哪些?它们有哪些参数?

导航钩子又称导航守卫,又分为全局钩子、单个路由独享钩子和组件级钩子。

全局钩子有beforeEach、beforeResolve ( Vue 2.5.0新增的). afterEach,

单个路由独享钩子有beforeEnter.

组件级钩子有beforeRouteEnter. beforeRouteUpdate( Vue 2.2新增的)、beforeRouteL eave。


它们有以下参数。

●to::即将要进入的目标路由对象。

●from:当前导航正要离开的路由。

●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。


目录
相关文章
|
23天前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
22天前
|
安全 Java 容器
【Java集合类面试二十七】、谈谈CopyOnWriteArrayList的原理
CopyOnWriteArrayList是一种线程安全的ArrayList,通过在写操作时复制新数组来保证线程安全,适用于读多写少的场景,但可能因内存占用和无法保证实时性而有性能问题。
|
23天前
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
7天前
|
消息中间件 Java 编译器
面试官:说说Lambda表达式底层原理?
面试官:说说Lambda表达式底层原理?
15 2
面试官:说说Lambda表达式底层原理?
|
2天前
|
缓存 JavaScript 前端开发
|
23天前
|
JavaScript 安全 前端开发
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
这篇文章介绍了Vue项目中解决跨域问题的方法,包括使用CORS设置HTTP头、通过Proxy代理服务器进行请求转发,以及在vue.config.js中配置代理对象的策略。
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
|
23天前
|
JavaScript 前端开发 编译器
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
这篇文章介绍了Vue 3相对于Vue 2的改进和新增特性,包括性能提升、体积减小、更易维护、更好的TypeScript支持、新的Composition API、新增的Teleport和createRenderer功能,以及Vue 3中的非兼容性变更和API的移除或重命名。
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
|
23天前
|
安全 Java
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
这篇文章讨论了封装在面向对象编程中的目的,强调封装可以隐藏类的实现细节,通过方法控制对数据的访问,保证数据完整性,并提高代码的可维护性。
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
|
23天前
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
|
22天前
|
Java
【Java集合类面试二十一】、请介绍TreeMap的底层原理
TreeMap基于红黑树实现,能够根据键的自然顺序或提供的Comparator排序,其基本操作的时间复杂度为O(log N)。