You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等;而 vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。
如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员,那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易,或许这也是很多初学者选择vue的原因之一。
我们看到很多招聘上都写着掌握vue开发项目,那么面试都会问什么呢?别急,下面是我给大家整理了一份比较全面的Vue面试高频考题解析小册。
对于MVVM的理解
MVVM 是 Model-View-ViewModel 的缩写
Model: 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为
View: 用户操作界面。当ViewModel对Model进行更新的时候,会通过数据绑定更新到View
ViewModel: 业务逻辑层,View需要什么数据,ViewModel要提供这个数据;View有某些操作,ViewModel就要响应这些操作,所以可以说它是Model for View.
总结: MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。MVVM 在使用当中,利用双向绑定技术,使得 Model 变化时,ViewModel 会自动更新,而 ViewModel 变化时,View 也会自动变化。
开发中常用的指令有哪些
v-model
:一般用在表达输入,很轻松的实现表单控件和数据的双向绑定v-html
: 更新元素的 innerHTMLv-show
与v-if
: 条件渲染, 注意二者区别v-on : click
: 可以简写为@click,@绑定一个事件。如果事件触发了,就可以指定事件的处理函数v-for
:基于源数据多次渲染元素或模板块v-bind
: 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM请详细说下你对vue生命周期的理解
vue生命周期总共分为8个阶段: 创建前/后,载入前/后,更新前/后, 销毁前/后。
$el
和数据对象data
都是undefined
, 还未初始化data
数据初始化,el
还未初始化$el
和data
都初始化了, 相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。el
被新创建的vm.$el
替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html
内容替换el
属性指向的DOM
对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互Vue的双向数据绑定原理是什么
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体实现步骤,感兴趣的可以看看:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
Proxy 相比于 defineProperty 的优势
Object.defineProperty() 的问题主要有三个:
Proxy 在 ES2015 规范中被正式加入,它有以下几个特点:
除了上述两点之外,Proxy 还拥有以下优势:
vue-router 有哪几种导航守卫?
1.全局守卫
vue-router全局有三个守卫:
使用方法:
2.路由独享守卫
如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫:
3.路由组件内的守卫
this
,组件实例还没被创建this
this
Vue的路由实现:hash模式 和 history模式
hash模式:
在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如
http://www.xiaogangzai.com
,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。history模式:
history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如
http://www.xxx.com/items/id
。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”组件之间的传值通信
组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯
1. 父组件给子组件传值
使用
props
,父组件可以使用props
向子组件传递数据。父组件vue模板father.vue:
子组件vue模板child.vue:
2. 子组件向父组件通信
父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。
父组件vue模板father.vue:
子组件vue模板child.vue:
3. 非父子, 兄弟组件之间通信
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。
Bus.js可以是这样:
在需要通信的组件都引入Bus.js:
另一个组件也import Bus.js 在钩子函数中监听on事件
Vue与Angular以及React的区别?
Vue与AngularJS的区别
Vue与React的区别
vuex是什么?怎么使用?哪种功能场景使用它?
vuex的使用借助官方提供的一张图来说明:
Vuex有5种属性: 分别是 state、getter、mutation、action、module;
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性,主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
vuex 一般用于中大型 web 单页应用中对应用的状态进行管理,对于一些组件间关系较为简单的小型应用,使用 vuex 的必要性不是很大,因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信,vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。
使用Vuex解决非父子组件之间通信问题
vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的,此时的数据完全独立于组件,因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。
vuex 作为数据存储中心
vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用,可以将组件中用到的数据存储在 State 中,并在 Action 中封装数据读写的逻辑。这时候存在一个问题,一般什么样的数据会放在 State 中呢? 目前主要有两种数据会使用 vuex 进行管理:
1、组件之间全局共享的数据
2、通过后端异步请求的数据
比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态。
一般面试官问到这里vue基本知识就差不多了, 如果更深入的研究就是和你探讨关于vue的底层源码;或者是具体在项目中遇到的问题,下面列举几个项目中可能遇到的问题:
开发时,改变数组或者对象的数据,但是页面没有更新如何解决?
vue弹窗后如何禁止滚动条滚动?
如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
公众号技术栈路线
大家好,我是koala,公众号「程序员成长指北」作者,这篇文章是【JS必知必会系列】的高阶函数讲解。目前在做一个node后端工程师进阶路线,加入我们一起学习吧!
加入我们
The text was updated successfully, but these errors were encountered: