https://mp.weixin.qq.com/s/VmAtENr4A0-sOkAXeuMdeg
1. vue优点
轻量级框架,只关注视图层,是一个构建视图的集合
简单易学: 国人开发,易于学习理解
双向数据绑定: 保留了angular的特点,操作数据更加简单
组件化: 保留了react的特点,实现了html的封装和重用,在构建单页面应用方面有着独特优势
虚拟dom: dom操作时非常耗性能的,不再使用原生的dom操作节点,极大解放dom操作,
运行速度快
2.vue父组件向子组件传递数据
通过props传递
3.子组件向父组件传递事件
$emit方法
4.v-if和v-show的共同点和不同点
共同点:都能实现元素的显示和隐藏
不同点:实现本质方法不同, v-show是通过控制css中的display设置为none,控制隐藏,只会编译一次
v-if是动态的向dom树内添加或者删除DOM元素,若初始值未false,就不会编译了,而且v-if不停的销毁和创建比较消耗性能
总结:如果要频繁的切换某个节点,使用v-show. 如果不需要频繁切换某节点使用v-if
5.如何让css只在当前组件中起作用
在组件中的style前面加上scoped
6.如何获取dom
ref="domName" 用法 this.$refs.domName
7.说出几种vue的指令和它的用法
v-module双向数据绑定
v-for 循环
v-if v-show 显示隐藏
v-on事件绑定
8.vue-loader是什么,使用它的用途有哪些
vue文件的一个加载器 将template/js/style转换为js模块
用途: js可以写es6 style样式可以scss或less template可以加jade等
9.为什么要使用key
需要使用key来给每个节点做一个唯一标识,diff算法就可以准确的识别此节点,作用主要是为了高效的更新虚拟dom
10.axios及安装
请求后台资源的模块 npm install axios --save装好 js中使用import进来,然后.get或者.post. 返回值在.then函数中如果成功, 失败是在.catch函数中
11.v-model使用
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作
v-bind绑定一个value属性 v-on指令给当前元素绑定input事件
12.请说出vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源, components是放组件 router是定义路由相关的配置 app.vue是一个应用主组件 main.js是入口文件
13.分别简述computed和watch的使用场景
computed: 当一个属性受多个属性影响的时候就需要用到computed, 例子: 购物车结算的时候
watch: 当一条数据影响多条数据的时候就需要使用watch 例子: 搜索数据
14.$nextTick的使用
当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功
15.vue组件中data为什么必须是一个函数
因为javascript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象
组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,他们只会负责各自维护的数据,不会造成混乱
16.vue中双向数据绑定是如何实现的
vue双向数据绑定时通过 数据劫持 结合发布订阅模式的方式实现的, 也就是说数据和视图同步,数据发生改变,视图跟着变化, 视图变化,数据也随之改变
核心: 关于vue双向数据绑定,其核心是object.defineProperty()方法
17.单页面应用和多页面应用的区别及优缺点
单页面应用(SPA) 通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必需的html,js,css.所有的页面内容都包含在这个所谓的主页面中
但在写的时候,还是会分开写,然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源,多应用于pc端
多页面就是指一个应用中有多个页面,页面跳转时整页刷新
单页面优点: 用户体验好,快,页面的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小,前后端分离,页面效果会比较炫酷,
单页面缺点: 不利于seo,导航不可用 初次加载耗时多 页面复杂度提高很多
18.v-if和v-for的优先级
当v-if与v-for一起使用时 v-for具有比v-if更高的优先级
19.assets和static的区别
相同点: assets和static两个都是存放静态资源文件,项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下
不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化
而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
static中放置的静态资源文件就不会走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器,因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点.在服务器中就会占据更大的空间
建议: 将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程,减少体积
而项目中引入的第三方资源库文件如iconfonnt.css等文件可以放置在static中,因为这些引入的第三方文件已经进行过处理 不需要我们继续处理,直接上传
20.vue的两个核心
数据驱动 组件系统
数据驱动: viewmodel 保证数据和视图的一致性
组件系统: 应用类ui可以看作全部是由组件树构成的
21. vue和jquery的区别
jquery是使用选择器$选取dom对象 对其进行赋值,取值,事件绑定等操作,其实和原生的html的区别只在于可以更方便的选取和操作dom对象,而数据和对象是在一起的
vue则是通过vue对象将数据和view完全分离开了, 对数据的操作不再需要引用相应的dom对象,可以说数据和view是分离的,他们通过vue对象这个vm实现相互的绑定,这就是mvvm
22.你们的项目是打包了一个js文件,一个css文件,还是有多个文件
根据vue-cli脚手架搭建,一个js文件一个css文件
23. vue里面router-link在电脑上有用,在安卓上没有反应怎么解决
vue路由在安卓机上有问题 balel问题 安装babel polypill插件解决
24. axios有哪些特点
从浏览器中创建XMLHttpRequests
node.jschuan创建http请求
支持promise api
拦截请求和响应
转换请求数据和响应数据
取消请求
自动换成json
25. 请说下封装vue组件的过程
建立组件的模板,先把架子打起来,写写样式,考虑组件的基本逻辑
准备好组件的数据输入,即分析好逻辑,定好props里面的数据,类型
准备好组件的数据输出 即根据组件逻辑,做好要暴露出来的方法
封装完毕了 直接调用即可
生命周期模块
1. 什么是vue生命周期,有什么作用
每个vue实例在被创建时都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到dom,并在数据变化时更新dom等
同时在这个过程中也会运行一些叫做生命周期钩子的函数,给用户在不同阶段添加自己代码的机会
2. 第一次页面加载会触发哪几个钩子
beforeCreate created before-Mount mounted
3. 简述每个周期适合用在哪些场景
beforeCreate 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他东西都还没有创建. 在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化,不能在这个阶段使用data中的数据和methods中的方法
create data和methods都已经被初始化好了
beforeMount 执行到这个钩子的时候,在内存中已经编译好了模板,但是还没有挂载到页面中,此时页面还是旧的
mounted 执行到这个钩子的时候 就表示vue实例已经初始化完成了.此时组件脱离了创建阶段,进入到了运行阶段,如果我们想要通过插件操作页面上的dom节点,最早可以在这个阶段进行
beforeUpdate 当执行这个钩子时,页面中的显示的数据还是旧的, data中的数据是更新后的, 页面还没有和最新的数据保持同步
updated 页面显示的数据和data中的数据已经保持同步了 都是最新的
beforeDestory vue实例从运行阶段进入到了销毁阶段,这个时候所有的data和methods 指令 过滤器都处于可用状态,还没有真正被销毁
destroyed 这个时候所有的data和methods 指令 过滤器都是出于不可用状态,组件已经被销毁了
4.created和mounted的区别
created在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
mounted 在模板渲染成html后调用,通常是初始化页面完成后,在对html和dom节点进行一些必要的操作
5.vue获取数据在哪个周期函数
一般created beforeMount mounted 皆可
6.请详细说下你对vue生命周期的理解
总共分为8个阶段创建前/后,载入前/后.更新前/后,销毁前/后
创建前/后 在beforeCreate阶段,vue实例的挂载元素$el和数据对象data都为undefined 还未初始化,在created阶段,vue实例的数据对象data有了 $el还没有
载入前/后 在beforeMount阶段,vue实例的挂载元素$el和data都初始化了,但挂载在虚拟dom上, 在mounted阶段,vue实例挂载完成
更新前/后 当data变化时,会触发beforeUpdate和updated方法
销毁前/后 在执行destory方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
vue路由面试篇
1. mvvm框架是什么
vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层,在vue中,使用了双向绑定,就是view的变化能实时让model发生改变,而model的改变也能实时更新到view
2. vue-router是什么, 它有哪些组件
vue是用来写路由的一个插件 router-link router-view
3. active-class是哪个组件的属性
vue-router模块的router-link组件,children数组来定义子路由
4. 怎么定义vue-router的动态路由 怎么获取传过来的值
在router目录下的index.js文件中,对path属性加上/:id
5. vue-router 有哪几种导航钩子
第一种 全局导航钩子 router.beforeEach(to, form, next) 作用: 跳转前进行判断拦截
第二种 组件内的钩子
第三种 单独路由独享组件
vuex常见面试题
1. vuex是什么 怎么使用 哪种功能场景使用它
vue框架中状态管理, 在main.js引入store 注入
新建一个目录 store.js
2. vuex有哪几种属性
有五种 分别是state getter mutation action module
state 基本数据 数据源存放地
getters 从基本数据派生出来的数据
mutation 提交更改数据的方法
actions 包裹mutation 使之可以异步
modules 模块化vuex
3. vue.js 中ajax请求代码应该写在组件的methods中还是vuex的actions中
如果请求来的数据不是要被其他组件公用 仅仅在请求的组件内使用 就不需要放入vuex的state里
日过被其他地方复用 将请求放在action里,方便复用
原文：https://www.cnblogs.com/icelolo/p/13156812.html