😄--前端面试整理--VueJs

1、Vue的指令都有哪些？

（1）v-bind 单向的绑定数据  缩写 : 
（2）v-model 双向的绑定数据
（3）v-on 绑定事件 缩写@
（4）v-html 原始的HTML标签的识别
（5）插值表达式  {{}}
（6）v-text  将所有的文本进行变换
（7）v-自定义指令
（8）v-show
（9）v-once 指令（只执行一次命令）
（10）v-for (for  ...  in 对象|数组|字符串|数字 )
（11）v-if
（12）v-else
（13）v-else-if

2、Vue的生命周期函数

（1）beforeCreate:function(){}
（2）Created:function(){}
（3）beforeMount:function(){}
（4）mounted:function(){}
（5）beforeUpdate:function(){}
（6）updated:function(){}
（7）activated  keep-alive组件激活时调用。
　　该钩子在服务器端渲染期间不被调用。
（8）deactivated  keep-alive组件停用时调用。
　　该钩子在服务端渲染期间不被调用。
 (9) beforeDestory:function(){}
 (10) destroyed:function(){}

3、除了生命周期函数还有哪些钩子函数

定义一个自定义指令对象，可以使用如下几个钩子函数
（1）bind:function(el){
      //只调用一次，指令第一次绑定到元素上的时候进行调用。
      //  可以进行初始化状态的设置
}
（2）inserted:function (el){
      //被绑定的元素插入到父节点的时候被调用（仅保证父节点存在，但不一定已被插入文档中）
}
（3）updated:function(el){
      //所在的组件VNode更新时调用，但是可能发生在其子VNode更新之前。
}
（4）componentUpdated:function(el){
      //指令所在的组件VNode和其子VNode全部更新后调用。
}

（5）unbind:function(el){
        //只调用一次，指令与元素解绑的时候调用
}

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
（6）钩子函数的参数
    el: 与指令所绑定的元素，可以用来直接操作DOM节点。
    binding：一个对象，包含许多可读属性，使用时需要查看文档

4、Vue组件是怎么进行销毁？

5、Vue-cli使用的过程中遇到过什么样的坑？

Vue1.0升级2.0有很多的坑，
（1）生命周期；（2）路由中引入静态js；（3）全局组件；全局变量；全局函数；
（4）v-for循环的可key与value值互换了位置，还有filter过滤器；
（5）遍历数组时，key值不能做model；
（6）父子通信等等

6、Vue中是怎样使用sass的？

（1）在webpack的配置中进行设置，在项目中webpack.base.conf.js中设置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}
（2）<style lang="scss">

7、谈谈对Vue的理解

Vue
（1）使用Vue适合开发小型的项目，并且可以熟练的应用HTML和CSS，
并且拥有强大的第三方库的支持。
（2）Vue也使用了React的Virtual Node、React和组件化的思想、
可以让我们集中精力去编写应用，而不是应用的性能。
（3）对于不是Angular和React经验的团队来说，Vue.js是一个很好的选择并且拥有中文社区。
Vue  数据双向绑定
（1）使用的是ES5提供的 object.defineProperty()方法，监控对数据的操作。从而可以自动触发数据同步。
（2）由于在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检查

Vue  什么时候使用
如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue 
如果你喜欢简单和”能用就行”的东西，请使用Vue 
如果你的应用需要尽可能的小和快，请使用Vue 

8、Vue是怎样是实现路由嵌套的呢？

（1）引入vue-router的文件
（2）使用router-link 组件进行导航，to 属性指定了链接
（3）配置路由的出口，路由配置的组件渲染的地方

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

（4） 如果使用模块化机制编程、导入Vue和VueRouter，要调用 Vue.use()
import Vue from 'vue'
import Router from 'vue-router'
//组件的引入，需要配置路由的组件
import goodslist from '@/components/goodslist' 
import goodsdetail from '@/components/goodsdetail' 

Vue.use(Router)
//实例化 路由对象
export default new Router({
routes: [
{
path: '/',
name: 'goodslist', 
component: goodslist
}, 
{
path: '/goodsdetail/:goodsid', 
name: 'goodsdetail', 
component: goodsdetail
} ]
})

9、解释一下mvvm模式，如何实现双向数据绑定？

Angular 
在不同的mvvm的框架中，实现双向数据绑定的技术有所不同。
（1）AngularJs采用的是“脏值检查机制”；
（2）当数据发生变更之后，对于所有的数据和视图的绑定关系进行一次检测，识别是否数据发生了变化。
（3）所以以上的过程可能会循环多次，一直到不再有数据变化发生之后，将变更的数据发送给视图，更新页面的显示。
（4）如果手动对view model的数据进行变更，为确保变更同步给视图，需要手动的触发“脏值检查”

Vue
（1）使用的是ES5提供的 object.defineProperty()方法，监控对数据的操作。从而可以自动触发数据同步。
（2）由于在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检查

10、做一个项目的时候，怎么选择框架呢？

（1）影响团队技术选型的因素有很多，比如技术组成、新技术、新框架、语言及发布等。
（2）为了更好的考量不同的因素，需要列出重要的象限，
如开发效率、团队喜好、依次来决定哪个框架更加适合当前的团队和项目。
（3）上线的时间影响框架的选择，不要盲目的更换现有的框架

10.1 为什么选择Vue、Angular、React三者框架的选择呢？

Vue
（1）使用Vue适合开发小型的项目，并且可以熟练的应用HTML和CSS，
并且拥有强大的第三方库的支持。
（2）Vue也使用了React的Virtual Node、React和组件化的思想、
可以让我们集中精力去编写应用，而不是应用的性能。
（3）对于不是Angular和React经验的团队来说，Vue.js是一个很好的选择并且拥有中文社区。

AngularJS
（1）当我们在制作一个应用，它对性能要求不是很高的时候，那么我们应该选择开发速度更快的技术栈AngularJS。
（2）对于复杂的前端应用来说，基于 Angular.js应用的运行效率，仍然有大量地改进空间。
（3）Angular2需要学习新的语言，需慎重选择。

React
（1）选择React有两个原因，
一、通过Virtual DOM提高运行效率；
二、通过组件化提高开发效 率。
大型项目首选。
三、另外选择React还有_个原因是：React Native、React VR等等，可以让 React运行在不同的平台之上。
四、我们还能通过React轻松编写出原生应用，还有VR应用。
五、令人遗憾的是React只是一个View层，它是为了优化DOM的操作而诞生的。
为了完成一 个完整的应用，我们还需要路由库、执行单向流库、web AP丨调用库、测试库、依赖管理库 等等，为了完整搭建出一个完整的React项目，我们还需要做大量的额外工作。

11、Vue单页面的应用在移动端的时候，有什么问题？

12、页面打开的时候，怎么样input框自动聚焦？

解决的方法：自定义指令
在需要自动聚焦的元素上绑定命令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

15、Vue中使用过什么组件插件吗？

（1）手动引入文件
alias: {
    'vue$': 'vue/dist/vue.common.js',
    'src': resolve('src'),
    'assets': resolve('src/assets'),
    'components': resolve('src/components'),
    // 2. 定义别名和插件位置
    "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') 
}
（2）通过npm 安装依赖引入
修改webpack配置文件
...
var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      // 2. 定义别名和插件位置
      'jquery': 'jquery' 
    }
  },
  plugins: [
    // 3. 配置全局使用 jquery
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
}

16、vue封装的组件如何调用接口呢？举例说明如何在父组件中调用接口？

父组件给子组件进行传值

子组件给父组件传值

36、比较Vue和React

一、React和Vue的相似之处
（1）使用了Virtual DOM
（2）提供了响应式（Reactive）和组件化（Composable）的视图组件；
（3）将注意力集中保持在核心库中，伴随于此，有配套的路由和负责管理全局状态的库

二、性能
针对现实情况的测试中，Vue 的性能是优于React的。

三、生态圈
Vue.js: ES6+Webpack+unit/e2e+Vue+vue-router+单文件组件+vuex+elementUI 
React: ES6+Webpack+Enzyme+React+react-router+redux

四、什么时候选择Vue.js
Vue
如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue 
如果你喜欢简单和”能用就行”的东西，请使用Vue 
如果你的应用需要尽可能的小和快，请使用Vue 
React
如果你计划构建一个大型应用程序，请使用React 
如果你想要一个同时适用于Web端和原生App的框架，请选择React 
如果你想要最大的生态圈，请使用React