前端面试VUE面试常问(内含个人和)

我为什么选择vue：个人感觉编码方式和html差别不大，上手很块，对新手友好 

vue与react的比较

React是库，Vue则是完整的框架
相同点： 

• 都是数据驱动视图
• 都遵循组件化思想，遵循基于可重用组件的方法(提供component方法)
• 都使用virtual DOM
• 都可以放进一个HTML文件中或成为更复杂的Webpack设置模块
• 都有独立但通用的路由器和状态管理库

不同点：

vue的原理

vue 是一套用于构建用户界面的渐进式框架。它的核心库只关注视图，采用的mvvm设计模式，中心思想是数据驱动视图。

MVVM模式

在MVVM架构下，View和Model之间没有直接联系，而是通过ViewModel进行交互。

• Model：代表数据模型，负责数据存储；Model层在Vue中是data、computed、methods等中的数据
• View：代表UI组件，负责页面展示；View层在Vue中是绑定dom对象的HTML
• View Model：监听模型数据的改变和控制视图行为。负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 ； View Model层在Vue中是实例的vm对

将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。 

① 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据。
② 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
③ MVVM模式本身实现了双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

Vue组件化编程

• 模块：向外提供特定功能的 js 程序，一般就是一个 js 文件

js 文件很多很复杂，模块可以复用 js，简化 js 的编写，提高 js 运行效率

• 组件：用来实现局部(特定)功能效果的代码集合(html/css/js/image.....)

一个界面的功能很复杂，组件可以复用编码，简化项目编码，提高运行效率

• 模块化：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
• 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

Vue中使用组件的三大步骤：
1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

① 定义一个组件：

使用 Vue.extend(配置对象) 创建，其中配置对象和new Vue(配置对象)时传入的那个几乎一样，但也有点区别；区别如下：
el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数：避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构

② 注册组件
局部注册：靠 new Vue({components:{'组件名':组件}})
全局注册：靠 Vue.component('组件名',组件)

③ 编写组件标签：
<school></school>

Vue的生命周期

 vue生命周期个人理解总结：
生成vue实例->事件和生命周期钩子初始化->初始化data和计算属性等->判断有无模板，el等，来决定是否需要转化成render函数->调用render函数创建虚拟dom节点->将VNode节点返回给mount函数渲染成真实DOM节点->将真实DOM挂载到根节点，完成后dom树已经渲染到页面->实时监控数据变化，随时更新dom->vue实例销毁

vue的虚拟节点和真实节点

Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树，以VNode节点模拟真实DOM，可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作，在这过程中都不需要操作真实DOM，只需要操作JavaScript对象后只对差异修改，相对于整块的innerHTML的粗暴式修改，大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位，再将这些小单位的视图进行更新。这样做减少了很多不需要的DOM操作，大大提高了性能。

Vm和Vc

非单文件组件：一个文件中包含有n个组件，可以定义多个组件
单文件组件：一个文件中只包含1个组件
vm：vue的实例对象，vm的隐式原型属性指向Vue的原型对象
vc：vueComponent的实例对象 
vc中，组件其实是一个名为VueComponent的构造函数，每写一个组件Vue会通过Vue.extend生成一个全新的VueComponent。Vue解析时会帮我们创建school组件的实例对象，我们只需要写<school></school>，即Vue帮我们执行的：new VueComponent(options)。
vc有的vm都有，但是vc是没有 el 的
vm可以绑定el决定为哪个容器服务，vc不行，vc只能被vm管理
 vm的data可定义成对象形式或函数形式，而vc 的data只能写成函数形式

vue相关语法细问
el

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译。

template

作用：模板占位符，帮助开发者包裹元素。
一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略
1. 在<template>元素上使用v-if条件渲染分组
可以把一个<template>元素当作不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
</template>
2. 条件渲染——用key管理可复用的元素
3. 列表渲染——v for on a

el、template、render属性优先性

• 当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树
• 当Vue选项对象中没有render渲染函数时
  • Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树
  • 当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，且在前两者均不存在时，其outerHTML才会用于编译与渲染。

v-if和v-show

v-if：不展示的DOM元素直接被移除，适用于切换频率较低的场景

v-show：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)，适用于切换频率较高的场景

v-model

v-model是一个语法糖，是:value(v-bind:value)和@input(v-on:input)的简写

1.  
   <input v-model="value" />
2.  
   //v-on将当前input元素绑定的value赋给了data中value这个变量
3.  
   <input v-on:input="value = $event.target.value" v-bind:value="value" />
4.  
    
5.  
   <script>
6.  
     ...
7.  
     data(){
8.  
       return {
9.  
         value: ''
10.  
        }
11.  
      }
12.  
    </script>

v-model具体绑定哪些属性：

• <input>的text和textarea元素，使用value属性和input事件
• <checkbox>和<radio>这样的复选/单选类的元素，使用的是checked属性和change事件
• <select>元素，使用value属性和change事件

vue-router

用于单页应用，单页应用基于路由和组件，路由用于设定访问路径，并将路径和组件映射起来。本质上是建立url和页面之间的映射关系！

原理：通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到视图上

url改变->触发事件监听->改变vue-router中的current变量->监视current变量的监视者->根据router对象匹配相应路由，获取新的组件->render

vue默认hash模式：使用url的hash值作为路由，用来指导浏览器动作，对服务器端完全无用

<router-link>：类似于超链接，是vue提供的在本站跳转页面使用

• to属性：设置的路径会在路由表中进行匹配，然后加载对应组件，同时路径会显示在地址栏中
• tag属性：类型string，默认值"a"，还可以写成"li"等
• 点击包裹在<a></a>中的东西会进行router链接跳转

computed和watch

计算属性：要用的属性不存在，要通过已有的属性计算得来

侦听属性：当被监视的属性变化时，回调函数自动调用，进行相关操作。一些数据需要随着其它数据变动而变动时可以使用watch

这篇好文章是转载于：学新通技术网