2019 VUE 常问面试题

心已赠人 2024-04-19 12:34 103阅读 0赞

# 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组件对象

*  **实现订阅/发布者模式？**

*  **什么是虚拟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: 挂载元素 elundefined数据data.....Mounted:挂载元素el DOM 数据data\{…\}
    3.  更新前/后: 模型数据发生变化时触发  
        BeforeUpdate：  
        Updated：
    4.  销毁前/后: destroy()方法被调用时，要销毁组件/实例时  
        beforeDestroy  
        Destroyed
 *  **v-show和v-if指令的共同点和不同点?**  
    答：v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏  
    v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果