2019 VUE 常问面试题

Vue

  • Vue的双向数据绑定原理是什么?
    答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
    具体步骤:
    第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
    第二步: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变更的双向绑定效果。
  • 请详细说下你对vue生命周期的理解?
    答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
    1. 创建前/后: 在beforeCreated阶段,vue实例的挂载元素 $ el 和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el 还没有。
    2. 载入前/后:在beforeMount阶段,vue实例的 $el 和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
    3. 更新前/后:当data变化时,会触发beforeUpdate和updated方法。
      行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
  • 封装 vue 组件的过程?
  1. 首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
  2. 然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
  • 对mvc 的了解 ?
    答:模型-视图-控制器(Model-View-Controller)
    Model和View永远不能相互通信,只能通过Controller传递。
    Controller可以直接与Model对话(读写调用Model),Model通过Notification和KVO机制与Controller间接通信。
    Controller可以直接与View对话,通过outlet,直接操作View,outlet直接对应到View中的控件,View通过action向Controller报告事件的发生(如用户Touch我了)。Controller是View的直接数据源(数据很可能是Controller从Model中取得并经过加工了)。Controller是View的代理(delegate),以同步View与Controller。

  • 对mvvm的了解?
    答:Model -ViewModel - View
    什么是 MVVM:一个 MVC 的增强版,我们正式连接了视图和控制器,并将表示逻辑从 Controller 移出放到一个新的对象里,即 View Model。MVVM 听起来很复杂,但它本质上就是一个精心优化的 MVC 架构
    Model层是少不了的了,我们得有东西充当DTO(数据传输对象),当然,用字典也是可以的,编程么,要灵活一些。Model层是比较薄的一层,如果学过Java的小伙伴的话,对JavaBean应该不陌生吧。
    ViewModel层,就是View和Model层的粘合剂,他是一个放置用户输入验证逻辑,视图显示逻辑,发起网络请求和其他各种各样的代码的极好的地方。说白了,就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。
    View层,就是ViewController层,他的任务就是从ViewModel层获取数据,然后显示。

  • Vue首屏加载非常慢,如何解决?
    Vue首屏加载非常慢
    原因: 当打包应用时,将所有JavaScript代码打包在一个文件中,导致js代码非常庞大,严重影响页面加载速度。
    解决:

  1. 配置打包工具,将组件分别打包到不同的js代码块中
 	build/webpack.base.conf.js
   	output:{
     	path: config.build.assetsRoot,
	  	filename:[name].js’,
     	//新增
		chunkFilename:[name].js”,
		publicPath: process.env.NODE_ENV===”production”
  		?config.build.assetsPublicPath
  		:config.dev.assetsPublicPath
}
  1. 当路由请求到该组件时,才动态加载组件的内容
    路由字典中,路由配置和以前完全一样
    但是在引入组件对象时:
import Index from ‘@/views/Index.vue’
改为
const Index=()=>import(‘@/views/Index.vue’)//仅定义函数
                                     //暂未执行
                              //暂时不引入Index.vue
    当用户在vue中请求当前组件对应的路由地址时,由vue-router自动调用加载函数,
    动态请求Index.vue组件对象
  • 实现订阅/发布者模式?
		var ublisher = {};
		// 定义发布者
		publisher.list =[];
		// 缓存列表 存放订阅者回调函数
		// 增加订阅者
		publisher.listen =function(fn){
    			publisher.list.push(fn);
				// 订阅消息添加到缓存列表
		}
			// 发布消息
		publisher.trigger =function(){    
				for(vari = 0,fn; fn = this.list[i++];){
        			var that =this
    				fn.apply(null,arguments);
				}
		}
  • 什么是虚拟DOM树?
    答:什么是虚拟DOM树: 仅包含可能变化的节点和可能变化的属性的树结构
	<body>
   		<div id=”app”>
   	 		<img src=”logo.png”> alt  title id  ….
    			<h1>{{uname}}h1>id   class     title    name
    			<hr>
    			<h2>{{score}}h2>
  			div>
  	body>
 	<script>
   		{
 				el:”#app”,
 				children:[
   				{el:”h1”, innerText:uname},
   				{el:”h2”,innerText:score}
   			]
   		}
   script>

为什么: 内容少,便于快速遍历比较不同
如何发挥作用:
1. 当data中模型变量改变时,会通知虚拟DOM树
2. 虚拟DOM树先缓存本次的修改在元素对象上
3. 将一批修改生成新的DOM子树和原虚拟DOM树做对比。
4. 一旦发现不同的元素或内容,就只更新有修改的元素
5. 虚拟DOM树中,封装了传统DOM API: createElement() appendChild() .innerHTML,避免了程序 员编写大量重复的代码。

  • Vue 如何去除url中的 # ?
    答:vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 url 会自带 #。如果不想使用 #, 可以使用 vue-router 的另一种模式 history
			new Router({
 				 mode: 'history',
  				routes: [ ]
			})

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

  • Vue组件间如何通信?
    答案:组件通信
    父组件向子组件通信
    子组件通过 props 属性,绑定父组件数据,实现双方通信
    子组件向父组件通信
    将父组件的事件在子组件中通过 $emit 触发
    非父子组件、兄弟组件之间的数据传递
//新建一个Vue实例作为中央事件总嫌
	let event = new Vue();
//监听事件
event.$on('eventName', (val) => {
    //......do something
});
//触发事件
event.$emit('eventName', 'this is a message.')
  • vuex作用?哪种功能场景使用它?
    答:是vue框架中状态管理。
    场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

  • 解释vuex最常用的二种属性?
    答:分别是 State、 Getter

    1. vuex的State特性
      A、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data
      B、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
      C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
    2. vuex的Getter特性
      A、getters 可以对State进行计算操作,它就是Store的计算属性
      B、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
      C、 如果一个状态只在一个组件内使用,是可以不用getters
  • 请列举出3个Vue中常用的生命周期钩子函数?

    1. created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $ el 属性目前还不可见
    2. mounted: el被新创建的 vm.$ el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    3. activated: keep-alive组件激活时调用
  • mint-ui是什么?怎么使用?至少说出三个组件?
    答:1. 基于 vue 的前端组件库。npm 安装,然后 import 样式和js,
    2. Vue.use(mintUI)全局引入。
    3. 在单个组件内部引入:import { Toast } from ‘mint-ui’
    组件1:Toast(‘登录成功’);
    组件2:mint-header
    组件3:mint-swiper

  • vue-loader是什么?使用它的用途有哪些?
    答:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
    用途:js可以写es6、style样式可以scss或less、template可以加jade等

  • axios的特点有哪些?

    1. Axios 是一个基于 promise 的 HTTP 库,支持promise所有的API
    2. 它可以拦截请求和响应
    3. 它可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据
    4. 安全性更高,客户端支持防御 XSRF
  • axios有哪些常用方法?

  1. axios.get(url[, config]) //get请求用于列表和信息查询
  2. axios.delete(url[, config]) //删除
  3. axios.post(url[, data[, config]]) //post请求用于信息的添加
  4. axios.put(url[, data[, config]]) //更新操作
  • Vuex的理解?
    答:Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
    核心概念:
    Store: 要使用Vuex,我们要创建一个实例 store ,我们称之为仓库,利用这个仓库 store 来对我们的状态进行管理
    State: Vuex 使用单一状态树,用一个对象State包含了整个应用层级的所有状态,你可以理解为这些状态就是一堆全局变量和数据
    Getter: 还记得Vue中的计算属性computed 吗?当我们需要在data的基础上再派生一些状态的时候,就会使用computed 来实现。同样,当我们需要从 state 中派生出一些状态的时候,就会使用到getters,你可以将 getters 理解state的计算属性。
    Mutation: Vuex相比传统的全局变量有两个优势,其中一个是Vuex中的状态不能随意修改,要修改必要按照Vuex提供的方式才能修改
    Action: Action 类似于 mutation,不同在于 Action 提交的是 mutation,而不是直接变更状态。
    Action 可以包含任意异步操作,通过 store.dispatch 方法触发

  • Vue和angular的区别?
    答: Vue: 上手容易 指令以 v-xxx html+json,然后再new Vue()实例化对象 个人维护项目
    适合移动端
    Angular: 上手难 指令以 ng-xxx 列表内容 所有属性和方法都挂载到$scope上
    由google维护 适合web端

  • vue 两种模式?
    答:vue-router里面除了要配置路由词典外 还要选择 模式 有 hash模式和history模式

  • vue的声明周期?
    答:总共8个阶段:

    1. 创建前/后: 创建模型数据和响应系统
      beforeCreated 挂在元素$ el:undefined 数据data:undefined
      Created 挂在元素$ el:undefined 数据data:{…}
    2. 载入前/后: 挂载 创建虚拟DOM 并生成真实DOM
      认为Vue实例/组件首次加载完成
      可以发送ajax请求
      也可以操作DOM元素
      beforeMount:挂载元素 e l u n d e f i n e d 数 据 d a t a . . . . . M o u n t e d : 挂 载 元 素 el undefined 数据data {.....} Mounted: 挂载元素 elundefineddata.....Mounted:el DOM 数据data{…}
    3. 更新前/后: 模型数据发生变化时触发
      BeforeUpdate:
      Updated:
    4. 销毁前/后: destroy()方法被调用时,要销毁组件/实例时
      beforeDestroy
      Destroyed
  • v-show和v-if指令的共同点和不同点?
    答:v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
    v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

你可能感兴趣的:(2019 VUE 常问面试题)