Vue面试题1
| 序号 | 问题 | 答案 |
| 1 | 路由导航守卫都有哪些钩子函数？说明在什么场景下会触发这些钩子函数。 | 全局守卫 router.beforeEach：全局前置守卫，进入路由之前 router.afterEach：全局后置钩子，进入路由之后 路由组件内的守卫 beforeRouteEnter()：进入路由前 beforeRouteUpdate()：路由复用同一个组件时 beforeRouteLeave()：离开当前路由时 独享守卫 beforeEnter:进入路由之前 |
| 2 | 组件中is可以作什么？ | 1. 解决标签固定搭配问题 2. 实现动态组件 |
| 3 | v-model是什么？怎么使用？ vue中标签怎么绑定事件？ | 可以实现表单元素的双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件： |
| 4 | Vue中那些方式可以实现页面之间传参，且如何获取到值 | 1、search传参 2、动态路由 path:"/地址/变量名" 3、本地存储 setItem() getItem() |
| 5 | mutations和actions的区别 | mutations是同步的，直接修改state,仓库通过commit调用； actions可以处理异步，不能修改state,仓库通过dispatch调用 |
| 6 | vue中组件之间如何通信？ | 父传子，父组件通过自定义属性传值，子组件通过props接收； 子传父，通过触发自定义事件 非父子，可以通过EventBus vuex 本地存储 |
| 7 | vuex和本地存储有什么区别 | 1. vuex数据刷新就没有了，本地存储还在 2. vuex中的数据可以实时渲染，本地存储不行 |
| 8 | vuex有哪些模块，并说明它们的作用？ | 1. state：vuex的基本数据，用来存储变量 1) Action 提交的是 mutation，而不是直接变更状态。 2)Action 可以包含任意异步操作。 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 |
| 9 | 如何通过路由守卫实现拦截用户没有登录？ | router.beforeEach((to,from,next)=>{ if(to.path==="/login"){ next() return; } if(store.state.user){ next();} return; } next("/login") }) |
| 10 | 如何实现路由懒加载 | const Index = () => import('../components/index') |
| 11 | $route和$router的区别 | $route路由信息 $router用来做路由跳转 |
| 12 | Vue的路由实现：hash模式 和 history模式的区别 | 区别： hash模式： 1.采用的是window.onhashchange事件实现。 2.可以实现前进 后退 刷新。 3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。 它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中， 对后端完全没有影响，因此改变hash不会重新加载页面 history模式： 1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。 2.可以前进、后退，但是刷新有可能会出现404的报错 3.前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。 如果后端缺少对/book/id 的路由处理，将返回404错误。 |
| 13 | 怎么定义vue-router的动态路由？怎么获取传过来的动态参数 | path:"/foodId/:id" 获取：this.$route.params.id |
| 14 | 请写出vue-router中的组件，并说明它们的作用 | router-link router-view router-link是路由导航组件，会生成a标签，需要设置to属性； router-view是路由出口，会根据浏览器地址进行匹配路由规则，并将匹配到的路由规则对应的组件展示在router-view处 |
| 15 | vue中数组发生改变了，但是页面没有渲染，怎么办 | arr.splice() Vue.set() vm.$set() |
| 16 | 组件中的data为什么不是一个对象而是一个函数 | 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。 |
| 17 | vue中第一次页面加载会触发哪几个生命周期钩子函数 | 会触发下面这几个beforeCreate, created, beforeMount, mounted |
| 18 | vue.js的两个核心是什么 | 数据驱动、组件系统 |
| 19 | vue中 key 值的作用 | 在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM |
| 20 | v-show和v-if的区别？分别说明其使用场景 | v-show 和v-if都是true的时候显示，false的时候隐藏 但是：false的情况下，v-show是采用的display:none;,v-if采用惰性加载。 如果需要频繁切换显示隐藏需要使用v-show |
| 21 | Vue中常用的修饰符有哪些？并简要说明它们的作用 | Stop：阻止冒泡； prevent：阻止默认事件； once：只执行一次； capture：将事件流设为捕获方式； self：直对自身触发事件； enter：回车键； Up:上； down：下； left:左； right：右； |
| 22 | 过滤器的作用是什么？ 如何注册过滤器？ 如何使用过滤器 | 作用: 对数据进行一些加工处理，比如 数字保留几位小数 // 全局注册 // console.log(Vue.filter); // 定义：Vue.filter('过滤器名',过滤器函数) // 过滤器函数一定要有返回值 /* Vue.filter('过滤器名',functon(变量值,传入的参数){ // 过滤处理 return 处理后的结果 }) */ // 局部注册： /* new Vue({ el:"" ..., filters:{ 过滤器名:function(变量值，传入的参数=参数默认值){ // 过滤处理 return 处理后的结果 } } }) */ // 使用： {{ 变量 | 过滤器名 }} |
| 23 | Vue实例有哪些常见的配置选项，分别用来干嘛 | el 挂载的节点 data 数据 methods 事件方法 computed 计算属性 watch 监听器 components 局部组件 filters 过滤器 directives 自定义指令 生命周期钩子函数 |
| 24 | vue中数组发生改变了，但是页面没有渲染，怎么办 | arr.splice() Vue.set() vm.$set() |
| 25 | 组件中的data为什么不是一个对象而是一个函数? | 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。 |
| 26 | vue中第一次页面加载会触发哪几个生命周期钩子函数 | 会触发下面这几个beforeCreate, created, beforeMount, mounted |
| 27 | vue中watch和methods的区别有哪些 | watch .是观察的动作，自动执行 methods 是方法，主动调用 |
| 28 | vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果 | 条件渲染 (使用 v-if)； 条件展示 (使用 v-show)； 动态组件； 组件根节点 |
| 29 | vue中组件的作用是什么？如何定义和使用组件 | 组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。 定义组件有两种方式： (1)全局方式 直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。 (2)局部方式 三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件； |
| 30 | 什么是vue的计算属性 | 在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。 好处： ①使得数据处理结构清晰； ②依赖于数据，数据更新，处理结果自动更新； ③计算属性内部this指向vm实例； ④在template调用时，直接写计算属性名即可； ⑤常用的是getter方法，获取数据，也可以使用set方法改变数据； ⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。 |
| 31 | 简要说明你对MVVM的理解 | MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 |
| 32 | 请列出至少4个vue基本指令，并简要说明其作用 | 1.v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model） 2.v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index 3.v-show 显示内容 （同angular中的ng-show） 4.v-hide 隐藏内容（同angular中的ng-hide） 5.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） 6.v-else-if 必须和v-if连用 7.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 8.v-bind 动态绑定 作用： 及时对页面的数据进行更改 9.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面 v-text 解析文本 v-html 解析html标签 10.v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' |
| 33 | 父子组件、兄弟组件之间的数据传递 | 创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中） |
| 34 | 子组件向父组件通信 | 在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收 |
| 35 | 父组件向子组件通信 | 在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量 |
| 36 | vue中 key 值的作用 | 在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM |
| 37 | Watch和computed的区别 | Watch只能监听data中的数据变化，computed不需要，watch可以进行异步操作，computed不可以，computed不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算 |
| 38 | 对于Vue是一套渐进式框架的理解 | 渐进式代表的含义是：主张最少。 Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。 |
| 39 | 如何解决axios中post提交参数不解析的问题 | 关于post提交参数的问题 问题描述： post提交参数需要提交的数据形式需要为一个字符串 形如： a=b&c=d。我们平时开发习惯于传入对象，所以需要将对象进行处理。 切记：不可以直接提交对象 如何处理？ - 方法1： 通过for in 将对象转化为 字符串 - 方法2： URLSearchParams - 方法3： qs库 |
| 40 | axios的基础方法有哪些 | axios.get(请求地址，配置对象).then(res=>{ res就是相应的数据 }) axios.post(请求地址，请求数据，配置对象).then(res=>{ ... }) axios.create(配置对象) axios.all([请求1，请求2]).then(res=>{ res是一个数组。 数组的值就是每个请求返回的数据信息 }) axios({ 配置信息 }) |
| 41 | vuex的核心概念有哪些，分别表示什么含义 | state 共享的数据，类似于data getters 对state的数据进行处理， 类似computed mutations 对state数据进行修改 actions 触发mutations 对数据进行修改 module 分模块管理数据 |
| 42 | 路由同组件跳转，组件将不会更新，如何解决这个问题 | - 方法1： 利用watch监听$route的变化 - 方法2： 利用路由局部钩子 beforeRouteUpdate 只要路由更新就调用 |
| 43 | Vue中那些方式可以实现页面之间传参，且如何获取到值 | 1、search传参 2、动态路由 path:"/地址/变量名" 3、本地存储 setItem() getItem() |
| 44 | vue-router 基本使用步骤 | 第1步：引入vue.js 再引入vue-router.js、 vue-router需要引入在vue之后 第2步：设置路由组件 let 组件配置变量 ={ template:"#模板id", data(){ return{} } ... } 第3步：建立映射关系 let routes = [ { path:"/地址", component:组件配置变量 }, { path:"/地址/:id", // 动态路由 component:组件配置变量 }, { path:"/地址", components:{ default:组件配置变量 // 视图的名称:组件配置变量 // } }, { path:"/地址", // 访问地址的时候回去访问地址2 component:组件配置变量, redirect:"/地址2" }, { path:"/地址", component:组件配置变量A, children:[ { path:"地址2", // 访问 /地址/地址2 //就渲染 组件配置变量 会渲染在组件配置变量A模板里面router-view里面 component:组件配置变量 } ] } ] 第4步：实例化路由对象 let router = new VueRouter({ // routes:routes // routes 简写 routes， linkActiveClass:"active", mode:"hash/history" }) 第5步：挂载到Vue实例 new Vue({ el:"", data:{}, // router:router // 简写 router }) 第6步：书写router-view 第7步：使用router-link 进行跳转 // 酌情给分 |
| 45 | 请说明在Vue中组件之间如何进行数据传递 | 1.父子组件 在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量 2.子父组件 在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收 3.兄弟组件 创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中） |
| 46 | Vue中路由导航钩子函数都有哪些？简要说明它们的参数及作用。 | 全局导航钩子：router.beforeEach((to,from,next)=>{})//跳转前进行判断拦截 Router.afterEach((to,from,next)=>{}) 路由内导航：beforeEnter() 组件内导航：beforeRouteEnter(); beforeRouteUpdate(); beforeRouteLeave() To：目标位置；from：当前导航正要离开的路由；next():必须调用，向下执行 |
| 47 | 在Vue中使用axios时如何解决跨域问题 | 在config文件夹中的index.js中的Dev中填写 ProxyTable：{ ‘/api’:{ Target：’代理服务器的目标地址’， changeOrigin: true, PathRewrite: {“^/api”:” ”} } } |
| 48 | Vue中如何同时获取事件传入的参数和事件对象 | methods:{ show(x,ev){ // x就是参数 // ev就是事件对象 } } |
| 49 | 如何实现动态组件， 且实现组件的缓存 |
|
| 50 | 简单运用一下作用域插槽 | |
| 51 | 过滤器的作用是什么？ 如何注册过滤器？ 如何使用过滤器 | 作用: 对数据进行一些加工处理，比如 数字保留几位小数 // 全局注册 // console.log(Vue.filter); // 定义：Vue.filter('过滤器名',过滤器函数) // 过滤器函数一定要有返回值 /* Vue.filter('过滤器名',functon(变量值,传入的参数){ // 过滤处理 return 处理后的结果 }) */ // 局部注册： /* new Vue({ el:"" ..., filters:{ 过滤器名:function(变量值，传入的参数=参数默认值){ // 过滤处理 return 处理后的结果 } } }) */ // 使用： {{ 变量 | 过滤器名 }} // 使用： {{ 变量 | 过滤器名(参数1，参数2) }} // 使用： {{ 变量 | 过滤器名1 | 过滤器名2 | 过滤器名3 |... }} |
| 52 | Vue如何注册自定义指令？ 其中常用钩子有哪些？做什么 | 全局注册： Vue.directive('指令名',{ bind(el,binding){}, inserted(el,binding){ } ... }) 局部注册： directivs:{ '指令名':{ bind(el,binding){}, inserted(el,binding){ } ... } } el 就是使用的指令的节点，binding.value 就是指令绑定的值。 我们一般用来拓展对dom的操作，比如已进入页面让input获取焦点，input失去焦点进行数据校验 |
| 53 | Vue表单的核心指令是什么？ 表单修饰符有哪些？ 需要注意什么？ | 核心指令： v-model 修饰符： .numer .lazy .trim 注意： 单选功能的时候， 每个input都要有 value值； 多选功能的时候，绑定的是一个数组，每个input也必须要有value值 |
| 54 | Vue如何注册一个组件，需要有哪些注意点 | 全局注册 Vue.component('组件名',{配置对象}) 局部注册： components:{ 组件名:{ 配置对象 } } 注意点： 组件名注意驼峰命名小坑，不要取html有的标签名； data是一个函数，且必须返回一个对象 template 模板 只可以有一个根标签，且 可以简化，通过 选择器绑定body里面的template模板 |
| 55 | Vue实例有哪些常见的配置选项，分别用来干嘛 | el 挂载的节点 data 数据 methods 事件方法 computed 计算属性 watch 监听器 components 局部组件 filters 过滤器 directives 自定义指令 生命周期钩子函数 |
| 56 | ElementUI是什么？如何应用到vue项目中 | Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 安装：npm install element-ui --save 引入： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) new Vue({ el: '#app', router, render:h=>h(App) }) |
| 57 | ElementUI的表单组件怎么使用？它有哪些属性 | 先写el-form组件，里面写el-form-item用来放输入框，例如用户名和密码那些。 属性： 一、el-from属性有ref、rules、绑定:model 二、el-form-item属性有prop用来定义一个该输入框对应的验证规则 |
| 58 | ElementUI的表格组件怎么使用？它有哪些属性 | 用一个 属性： 一、el-table组件的data是用来获取数据； 二、每一行el-table-row的数据通过prop属性。 |
| 59 | 写出vue中is的使用场景 | 改变html标签的默认规则，比如ul里放li，dl里放dt等， 动态切换组件： |
| 60 | 谈谈你对生命周期的理解。以及每个阶段都是什么 | Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程， 称之为 Vue 的生命周期。生命周期有：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed |
| 61 | 组件中的data为什么不是一个对象而是一个函数 | 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。 |
| 62 | vue中第一次页面加载会触发哪几个生命周期钩子函数 | 会触发下面这几个beforeCreate, created, beforeMount, mounted |
| 63 | 请写出深度侦听的使用方法 | watch:{ myObj:{ handler(newValue, oldValue) { //执行操作 }, deep: true } |
| 64 | vue的优点是什么 | 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。 |
| 65 | mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？ | mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，更加便捷 |
| 66 | vue中在进入/离开的过渡中，有哪几个类名 | v-enter：定义进入过渡的开始状态； v-enter-active：定义进入过渡生效时的状态； v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态； v-leave: 定义离开过渡的开始状态。 v-leave-active：定义离开过渡生效时的状态； v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态 |
| 67 | vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果 | 条件渲染 (使用 v-if)； 条件展示 (使用 v-show)； 动态组件； 组件根节点 |
| 68 | 列出vue中与表单元素相关的修饰符，并简要说明其作用 | (1).lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。 使用 lazy 修饰符，从而转变为使用 change 事件进行同步 (2).number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。 (3).trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。 |
| 69 | 简要说明在vue中v-model指令的作用 | v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素 。它负责监听用户的输入事件以更新数据。 |
| 70 | vue中动态样式绑定(class)的方式都有哪些 | 对象方法： :class="{ 'active': isActive }" :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 :class="{ 'active': isActive, 'sort': isSort }" 第二种（放在data里面） :class="classObject" data() { return { classObject:{ active: true, sort:false } } } 数组方法 :class="[isActive,isSort]" data() { return{ isActive:'active', isSort:'sort' } } :class="[isActive?'active':'']" :class="[isActive==1?'active':'']" |
| 71 | 说明vue等单页面应用及其优缺点 | 优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。 |
| 72 | 如何让css只在当前组件起作用 | 在当前组件style标签中添加 scoped |
| 73 | vuex是什么？怎么使用？哪种功能场景使用它？ | 是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车 |
| 74 | 请列出使用axios时，get和post提交数据的方式 | 1,get可以直接把数据以?加&符号的方式直接拼接到url地址上 2.axios.get(url,data)、axios({method:'get',url:请求地址,params:{提交的数据}}) 3.axios.post(url,data)、axios({method:'post',url:'请求地址'},data:{提交的数据}) |
| 75 | axios是什么？怎么使用 | 请求后台资源的模块 使用npm install axios -s 来安装 在main.js入口文件中引用：import axios from {axios} 将axios挂载到vue实例上：vue.prototype.$axios = axios 在config文件夹中的index.js中的Dev中填写 ProxyTable：{ ‘/api’:{ Target：’代理服务器的目标地址’， changeOrigin: true, PathRewrite: {“^/api”:” ”} } } 在需要调用后台资源的组件中进行使用this.$axios({ Url: ‘/api/地址’, Method:’post’,//post请求必须设置 Params:{要传的参数}//post要将params设置为data }).then(res=>{}).catch(err=>{}) |
| 76 | 请说出vue.cli项目中src目录每个文件夹和文件的用法 | Assets: 里面存放静态文件，比如css,js,image图片等 Components：存放组件 Router：用来存放路由文件，里面包含一个inde.js路由文件 App.vue:为主组件页面，用来显示其他的组件 Main.js:为入口文件，用来引入所需的模块 |
| 77 | vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗 | 一、在components（专门放组件的文件）下创建一个vue文件 二、在需要使用自定义组件的地方的script标签内引入自定义组件 import 组件标签名from '@/components/组件名称' 在component中添加组件标签名 三、在template中使用组件标签名<组件标签名> 问题：组件名不可以重复，template只能存在一个根标签，组件名必须和引用的标签名相同 |
| 78 | vue-router有哪几种导航钩子，分别说明它们的作用 | 一、全局导航钩子：router.beforeEach((to,from,next)=>{})//跳转前进行判断拦截 Router.afterEach((to,from,next)=>{}) 二、路由内导航：beforeEnter() 三、组件内导航：beforeRouteEnter(); beforeRouteUpdate(); beforeRouteLeave() |
| 79 | vue-router是什么？它有哪些组件 | 是一个路由插件，有router-link、router-view组件 |
| 80 | 说一下Vue 的双向绑定数据的原理 | 采用数据劫持结合发布者-订阅者模式的方式Object.defineProperty（），通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。 |
| 81 | 非父子组件、兄弟组件之间的数据传递 | 创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中） |