1、vuejs与angularjs以及react的区别?
1、axios的特点有哪些?
答:
一、Axios 是一个基于 promise 的 HTTP 库,支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高,客户端支持防御 XSRF
2、axios有哪些常用方法?
答:
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作
1、active-class是哪个组件的属性?嵌套路由怎么定义?
答:vue-router模块的router-link组件。
嵌套路由,就是多层嵌套,添加子路由,children[{path:'',component:...},{}]
2、vue-router有哪几种导航钩子?vue-router原理?
答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),router.afterEach(route => {// 点击导航后调用})
作用:跳转前进行判断拦截。第二种:组件内的钩子;路由组件内直接定义,beforeRouteEnter (to, from, next) ,beforeRouteUpdate,beforeRouteLeave,这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。 数据获取方式,生命周期 钩子create或beforeRouteEnter守卫中获取数据,路由获取方式,在为后面的视图获取数据时,用户会停留在当前的界面,因此建议在数据获取期间,加一些提示第三种:单独路由独享组件,路由配置上直接定义beforeEnter 守卫
原理:, hash模式和history模式,
hash模式背后的原理是onhashchange事件,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来, 网易云音乐,百度网盘就采用了hash路由,
看起来就是这个样子: http://music.163.com/#/friend;https://pan.baidu.com/disk/home#list/vmode=list, 前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由, history api可以分为两大部分,切换历史状态和修改历史状态,通过history api,我们丢掉了丑陋的#,但是它也有个毛病: 不怕前进,不怕后退,就怕刷新,xxx.com/id=5 这时请求的便是xxx.com/id=5, 如后端没有配置对应id=XXX的路由处理,则会返回404错误。
答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),router.afterEach(route => {// 点击导航后调用})
作用:跳转前进行判断拦截。
第二种:组件内的钩子;路由组件内直接定义,beforeRouteEnter (to, from, next) ,beforeRouteUpdate,beforeRouteLeave,
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
数据获取方式,生命周期 钩子create或beforeRouteEnter守卫中获取数据,路由获取方式,在为后面的视图获取数据时,
用户会停留在当前的界面,因此建议在数据获取期间,加一些提示
第三种:单独路由独享组件,路由配置上直接定义beforeEnter 守卫
原理:,
hash模式和history模式,
hash模式背后的原理是onhashchange事件,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,
网易云音乐,百度网盘就采用了hash路由,
看起来就是这个样子: http://music.163.com/#/friend;https://pan.baidu.com/disk/home#list/vmode=list,
前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由,
history api可以分为两大部分,切换历史状态和修改历史状态,通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕刷新,xxx.com/id=5 这时请求的便是xxx.com/id=5,
如后端没有配置对应id=XXX的路由处理,则会返回404错误。
3、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?vue-router有哪些组建?
答:对path属性加上/:id。 使用router对象的params.id。 router-view,router-link
4、scss是什么?安装使用的步骤是?有哪几大特性?与less区别?
答:预处理css;
步骤:1.用npm 下三个loader(sass-loader、css-loader、node-sass)。
2.配置webpack.
3.style标签上记得加lang=”scss”
特性:可以使用变量;可以嵌套;运算;mixin,@mixin box-sizing ($sizing),定义一些代码片段,可传参数,方便日后根据需求调用
区别:在于实现方式 less是基于JavaScript的在客户端处理,也可以在服务端 ,sass是基于ruby语言写的,在服务器处理。
5、axios是什么?怎么使用?描述使用它实现登录功能的流程?
答:请求后台资源的模块。支持 Promise API。
使用:
安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,
所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。
为了解决这个问题,我们在引入 axios 之后,通过修改原型链,
//main.js
import axios from 'axios'
Vue.prototype.$http = axios
然后就能直接在组件的 methods 中使用 $http命令:this.$http.get('url').then().catch()
如果想解决跨域问题,需要在webpack中配置,proxyTable
登录功能流程:
路由拦截:定义路由的时候,meta添加一个自定义字段requireAuth,判断该路由的访问是否需要登录;
定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断,判断to.meta.requireAuth,
通过vuex state获取当前的token是否存在,当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。
以上只是简单的路由拦截,还有一种情况便是:
当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。
这时候需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。用 axios 的拦截器统一处理所有http请求和响应。
一般做法是,单独建立一个http的js文件处理axios,再到main.js中引入.
axios.interceptors.request.use(),axios.interceptors.response.use()
ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
6、什么是RESTful API?怎么使用?
答:是一个api的标准,无状态请求。通过统一的接口来对资源执行各种操作。GET/POST/PUT/DELETE等http方法
7、vuex是什么?怎么使用?
答:vue框架中状态管理。在main.js引入store,注入。new vue()里面.
新建了一个目录store,….. export 。
8、mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答:一个model+view+viewModel框架,数据模型model,viewModel连接两个,
m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是用来实现双向绑定
双向绑定:一个变了另外一个跟着变了,例如:视图一个绑定了模型的节点有变化,模型对应的值会跟着变
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。场景:数据操作比较多的场景,更加便捷
MVC:逻辑都是在controller里面写的,如果业务复杂起来,再加上其他乱七八糟的验证,controller就会变得很大,越来越难以维护
9、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
答:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发,指令第一次绑定到元素时调用。)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding
10、导航钩子有哪些?它们有哪些参数?
答:导航钩子指的就是vue-router钩子,参考问题:2。确保要调用 next 方法,否则钩子就不会被 resolved。to: Route: 即将要进入的目标 路由对象。
from: Route: 当前导航正要离开的路由
11、Vue的双向数据绑定原理是什么?
答:
脏值检查(angular.js) 在指定的事件触发时进入脏值检测.
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:利用Obeject.defineProperty()来监听属性变动。对需要observe的数据对象进行递归遍历,包括子属性对象的属性,
都加上 setter和getter,一旦给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化,
监听到变化之后通知订阅者。
另:Object.defineProperty( )是用来做什么的?它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举。
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,
添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,
通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,
达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果
12、请详细说下你对vue生命周期的理解?
答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
13、vue-loader是什么?使用它的用途有哪些?
答:解析.vue文件的一个加载器,使template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
14、请说下封装 vue 组件的过程?
答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。父组件传子组件数据,子组件在props中接受定义,一般会在props中定义默认值。而子组件用emit,把数据传递给父组件。写好之后,在main.js中引入,并使用Vue.use(...),然后再项目任意处就可以用啦。
答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。父组件传子组件数据,子组件在props中接受定义,
一般会在props中定义默认值。而子组件用emit,把数据传递给父组件。写好之后,在main.js中引入,并使用Vue.use(...),
然后再项目任意处就可以用啦。
15、请说出vue.cli项目中src目录每个文件夹和文件的用法?
答:assets:放静态资源;components是放组件;view视图;app.vue主组件;main.js入口文件;router:路由
答:assets:放静态资源;components是放组件;view视图;app.vue主组件;main.js入口文件;router:路由
16、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
答:第一步:在components目录建组件(smithButton.vue),script一定要export default {}
第二步:在需要的地方导入组件;
第三步:注入到vue的子组件的components属性上,components:{smithButton}
第四步:在template视图view中使用
17、聊聊你对Vue.js的template编译的理解?
答:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)
详情步骤:
首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。
然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)
18、请说下具体使用vue的理解?
答:
1、使用vue不必担心布局更改和类名重复导致的js重写,因为它是靠数据驱动双向绑定。
2、组件化开发,让项目的可拓展性、移植性更好,代码重用性更高,就好像农民工建房子,拿起自己的工具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用,局部组件更新界面,让用户体验更快速省时。
4、js的代码无形的规范,团队合作开发代码可阅读性更高。
19、你觉得哪些项目适合vue框架?
答:1、数据信息量比较多的,反之类似企业网站就无需此框架了。
2、手机web和app应用多端共用一套界面的项目,因为使用vue.cli+webpack后的前端目录,非常有利于项目的跨平台部署。
20、PC端项目你会在哪些场景使用Vue框架?
答:上万级数据需要瀑布流更新和搜索的时候,因为数据庞大的时候,用原生的dom操作js和html都会有列表的html布局,迭代很困难。
再一个dom节点的大面积添加会影响性能。
那么vue为什么解决这些问题呢?
第一:只需用v-for在view层一个地方遍历数据即可,无需复制一段html代码在js和html两个地方。
第二:vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。
21、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
答:
一、如果请求来的数据不要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,
在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。
22、不用Vuex会带来什么问题?
答:
一、可维护性会下降,你要想修改数据,你得维护三个地方
二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的
三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。
23、第一次页面加载会触发哪几个钩子?每个周期具体适合哪些场景?
答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
答:生命周期钩子的一些使用方法:
beforecreate : 可以在这加个loading事件,
在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom