vue面试题

一、vue父子组件之间的传值：

简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。

二、vue生命周期函数：

1.  beforeCreate
2.  created
3.  beforeMount
4.  mounted
5.  beforeUpdate
6.  updated
7.  beforeDestroy
8.  destroyed

ajax操作是在monted生命周期中完成的。

 三、vue自定义指令：

1.创建局部指令

var app = new Vue({

    el: '#app',

    data: {    
    },

    // 创建指令(可以多个)

    directives: {

        // 指令名称

        dir1: {

            inserted(el) {

                // 指令中第一个参数是当前使用指令的DOM

                console.log(el);

                console.log(arguments);

                // 对DOM进行操作

                el.style.width = '200px';

                el.style.height = '200px';

                el.style.background = '#000';

            }

        }

    }
})

　　

// 2 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

3.指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

四、vue动态路由传值：

1.

//   直接调用$router.push 实现携带参数的跳转
     this.$router.push({
          path: `/describe/${id}`,

需要对应路由配置如下：

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
//获取参数方法
this.$route.params.id　

2.

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
 })

路由配置：

//这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示
  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
//获取参数
this.$route.params.id

3.

//query传递的参数会显示在url后面?id=？
  this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应路由配置：

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
//获取参数
this.$route.query.id
注意：在子组件中 获取参数的时候是$route.params 而不是$router 这很重要~~~

五、axios和ajax的区别：

1.区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，

axios实现了对ajax的封装。 axios是ajax ajax不止axios。

Ajax：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

axios：
用于浏览器和node.js的基于Promise的HTTP客户端
1. 从浏览器制作XMLHttpRequests
2. 让HTTP从node.js的请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换为JSON数据
8. 客户端支持防止XSRF

2.优缺点： ajax： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，

已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务

axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。