1、vue获取服务器数据的时候，执行函数放到哪个生命周期函数中
一般 created/beforeMount/mounted 皆可，
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作
（在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素，而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点）

2、assets和static文件夹的区别
静态资源处理：
vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="./logo.png">
和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。
在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

3、vue-router 路由的传参（接收参数）两种方式 query params
参考网址：https://segmentfault.com/a/1190000012735168
1.query方式传参和接收参数

//传参: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
  
//接收参数:
this.$route.query.id

2.params方式传参和接收参数

//传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  
//接收参数:
this.$route.params.id

注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
注意:

传参是this.$router,接收参数是this.$route,这里千万要看清了！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

4、vue路由跳转的3种方式
参考网址：https://www.cnblogs.com/anjx/p/11242387.html
1.路由标签跳转

<router-link :to="{path, params, query}"></router-link>
<router-link :to="{name, params, query}"></router-link>
<router-link :to="/index/page1"></router-link>
//注意：
//path--跳转路径( 例：path: '/index/page1' )
//name--跳转路由名称( 例：name: 'router name' )

2.函数操作（params方式传参）

// 对象写法
this.$router.push({
   name: 'router name',
   params: {
　　　　key: value
       ...
    } 
})
// 字符串写法
this.$router.push('/index/page1/params1/param2')
//相应的跳转页接收参数格式如下：this.$route.params

3.函数操作（query方式传参）

// 对象写法
this.$router.push({
   name: 'router name',
   query: {
　　　　key: value
       ...
    } 
})
// 字符串写法
this.$router.push('/index/page1?param1=param1&param2=param2')
//相应的跳转页接收参数格式如下：this.$route.query

5 、this. ￥router 和 this.￥route有何区别
￥router为VueRouter实例，想要导航到不同URL，则使用￥router.push方法
￥route为当前router跳转对象，里面可以获取name、path、query、params等
6、path和name的区别
path：是路径，还可以有二级路径比如 path: '/system/setting'，但是name就没有了，name就相当于给你的这个 path 起个6名字方便记住，也可以不设置 name。

 {
        path: '/PlayList',
        component: (resolve) => require(['@/views/PlayList/Index.vue'],resolve),
        hidden: true,
        name: '工具',
        children:[
            {
                path: '/Export',
                component: (resolve) => require(['@/views/PlayList/Export.vue'],resolve),
                hidden: true,
                name: '门店'
            }
]
}

7、vue里watch监听数据的变化可以使函数的形式也可以使对象的形式
1.函数形式：

new Vue({
    el:'#root',
    data:{
        cityName:'shanghai'
    },
    watch:{
        cityName(newName,oldName){
            
        }
    }
})

2.也可以是字符串形式的方法名

watch:{
        cityName:’nameChange‘
}

3.也可以写成对象的形式：
包含handler方法
immediate（immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handle）、
deep（当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。）

new Vue({
      el:'#root',
      data:{
          cityName:{id:1,name:'shanghai'}
      },
      watch:{
          cityName:{
              handler(newName,oldName){
                    
              },
              deep:true,
              immediate:true
          }
      }
})
//也可以给某个特定属性加监听器
 watch:{
          'cityName.name':{
              handler(newName,oldName){
                    
              },
              deep:true,
              immediate:true
          }
      }

8、computed和watch的区别？
Computed:
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或￥emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
Watch：
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

9、组件里的data为什么是函数形式
1.组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的

2.组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果

10、vue里怎样写自定义指令

Vue.directive('red',function(){
     return this.el.style.background='red'
})
//使用
<span v-red>vue 指令</span>

11、vue怎样写自定义过滤器

Vue.filter("",function(n,a,b){
   alert(a+','+b);
   return n<10?'0'+n:n
})

12、vue是单向数据流
Vue是单向数据流，数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传过来的数据

13、解释下路由守卫 （路由的安全 路由的拦截 这三个不知道是不是一回事）
当用户输入后台管理页面的登录地址的时候，让用户返回登录url，不让用户随意进入，也可以使用路由元信息定义路由的时候配置meta字段实现路由的守卫（在meta定义是否需要登录）
参考：https://www.cnblogs.com/elfpower/p/9230528.html
1.全局路由守卫

 router.beforeEach((to,from,next)=>{
    
})

2.路由独享的守卫

cont router=new VueRouter({
    routes:[
    {
        path:'/foo',
        component:Foo,
        beforeEnter:(to,from,next)=>{
        }
    }   
]
})

3.组件内的守卫

beforeRouterEnter/beforeRouterUpDate/beforeRouterLeave
 beforeRouterEnter(to,from,next){
}

14、怎样自定义组件
1.首先创建一个文件夹，来放我们的自定义组件 loading
2.在文件夹里创建一个组件：例如loading.vue
3.在创建一个index.js:
引入loading组件
配置这个组件
导出这个组件，好在main里接收

import LoadingComponent from './loading.vue'

const Loading={
    install:function(){
        Vue.component('Loading',LoadingComponent)
    }
}
export default Loading

4.在main.js里引入我们定义的组件并应用这个组件
5.使用这个组件

<Loading></Loading>

15、vue里请求多个字段会卡顿怎么解决

16、子组件主动获取父组件的数据和方法,父组件主动获取子组件的数据和方法
父组件主动获取子组件的数据和方法
1.调用子组件的时候定义一个ref

<headerChild ref="headerChild"></headerChild>

2.在父组件里面通过

this.$refs.headerChild.属性
this.$refs.headerChild.方法

子组件主动获取父组件的数据和方法
在子组件里面通过

this.$parent.属性
this.$parent.方法

17、vue的常用指令

v-model 绑定到表单的input框
V-for  循环
v-show、v-if 隐藏显示
v-else-if  v-else 配合v-if使用
V-bind  绑定变量  :msg
V-on  绑定事件  @clickbox
V-text 读取文本
v-html 读取html
v-class  绑定类名 :class={red:false}
v-style 绑定样式
V-once  只执行一次  <div v-once>{{msg}}</div>
V-clock  防闪烁 <div  v-cloak > {{msg}} </div>

18、vue里为什么用key
1.可以区分开两个元素，两个元素是独立的---不要复用他们：
例如：登录注册在切换的时候将不会清除用户已经输入的内容。因为两个模板使用了相同的元素 <input>不会被替换掉，仅仅是替换他们的placeholder，这样不符合需求。我们可以给他们加一个key值 来解决这个问题

2.v-for中的key：
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

19、vue里为什么避免v-if和v-for用在一起
v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
解决：使用计算属性来过滤下

Eg：
<ul>
    <li  
       v-for="user in users"
       v-if="user.isActive"
       :key="user.id">
        {{user.name}}
      </li>
</ul>
//以上情况，即使100个user种之需要使用一个数据，也回循环整个数据
//正确
computed:{
     activeUsers:function(){
       return this.users.filter(function(user){
       return user.isActive
          })
     }
}
<ul>
    <li v-for="user in activeUsers" :key="user.id"> 
             {{user.name}}
    </li>
</ul>

20、vue怎样缓存路由（既路由的懒加载、异步组件实现按需加载）
修改router文件里的配置
正常情况下我们路由里边的配置是这样写的

image.png

实现异步加载我们只需把component：改成函数的形式导入组件
或者是这样写：component:resolve=>require([‘@pages/home/Home’],resolve)

image.png

proxyTable:{
    '/api':{
        target:'http://localhost:7001',//后端接口地址
        changeOrigin:true,//是否允许跨域
        pathRewrite:{
            '^/api':'/api' //重写
        }
    }
}

2>、再用axios请求数据

22 、src目录下都有哪些文件
assets 存放静态目录
Components 组件
App.vue 主组件
main.js 入口文件

23、vue里出现路由跳转了页面的数据并没有更新问题
原因：是使用了keep-alive把组件包裹起来了，keep-alive在组件切换过程中将状态保留在内容中，防止重复渲染DOM
解决：在activated这个钩子函数里调用数据，而不是mounted这个钩子里；
或者用keep-alive里的include（匹配的组件会被缓存）和exclude（匹配的组件不会被缓存）

24、怎样注册一个组件

25、Axios的请求拦截和响应拦截

//请求拦截
axios.interceptors.request.use((config)=>{
    //发送请求前加载 loading
    return  config
})

//响应拦截
axios.intercepors.response.use((response)=>{
     //数据请求回来后关闭loading
return response
},(error)=>{

return promise.reject(error)
}
})

26、如果有一个vue的单页面的首页，数据特别多，页面特别复杂，让你去做这个页面，从优化性能的方面 怎样去入手？

27、说一下你做过的项目，都碰到过哪些技术难点？

28、使用vue-router 设置每个页面的title
可以再meta里设置title （ 在配置路由的时候给每个路由添加一个自定义 的meta对象，在meta对象中设置一些状态惊醒操作，用他来做登陆校验再合适不过了）

{
      path:'/course/myCourse',
      component:myCourse,
      name:'我的课桌',
      meta:{
    title:'我的课桌'    
       }       
}

29、Vue.set(target,key,value) 响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

30、action和mutation的区别

1.流程顺序
"响应试图--> 修改state"拆分成两部分，试图触发Action,Action再触发Mutation
2.角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
3.限制
角色不同，二者有不同的限制
Mutation:必须同步执行
Action:可以异步，但不能直接操作 State

31、vuex是什么？怎么使用？哪种功能场景使用它
vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要：
使用：
创建一个store.js文件，引入vue 、vuex； 使用vuex
定义state、mutations、getters、actions 对象，创建store仓库 把这几个对象导出去
在main.js文件里引入store文件，并注册到 vue实例里

场景：用户登录后可以获取到用户的token 解析token 然后存储到vuex里 可以让登录后的每个组件都可以获取到用户的信息

32、vuex有哪几种属性
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

33、v-el的作用 ：
获取到dom对象；2.0已经废弃了，使用ref

34、vue中引入插件 例如jquery 。。。
1>、安装 npm install jquery --save
2>、在main.js里全局引入；就可以使用了

35、如何定义vue-router 的动态路由以及如何获取传过来的动态参数

定义动态路由：使用path属性过程中，使用动态路径参数，以冒号开头

{
Path:”/user/:id”
}

获取动态路由的参数：

 this.$route.params.id

36 、vue如果封装组件和组件的优点
优点：
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
封装：
新建组件.vue文件内 写好template script style
准备好组件的数据输入 props
准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法
使用的时候直接引入，注册 就可以使用

37、 vue-router有哪几种导航钩子？
Vue-router的导航钩子，主要用来作用是拦截导航，让他们完成跳转或取消
有三种方式：
1.全局的：（前置守卫、后置钩子）

//注册一个全局前置守卫：
const router = new VueRouter({...});
router.beforeEach((to,from,next)=>{
    //do someting
})

2.单个路由独享的

const router=new VueRouter({
    routes:[
    {
        path:'/file',
        component:File,
        beforeEnter:(to,from,next)=>{
        //do  someting
        }
    }   
    ]
})

3.组件内的导航钩子（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

const  File={
    template:`<div>This is file</div>`
    beforeRouterEnter(to,from,next){
        //do someting
        //再渲染改组件的对应路由被confirm前调用
    },
    beforeRouteUpdate(to,from,next){
        //do someting
        //在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to,from,next){
        //do someting
        //导航离开该组件的对应路由时被调用
    },  
}