flash上传空间网站,河南省建设厅网站资质平移办法,docker实际企业解决方案,大数据营销的应用领域1、说说你对 SPA 单页面的理解#xff0c;它的优缺点分别是什么#xff1f;SPA#xff08; single-page application #xff09;仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成#xff0c;SPA 不会因为用户的操作而进行页面的重新加载或跳转…1、说说你对 SPA 单页面的理解它的优缺点分别是什么SPA single-page application 仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成SPA 不会因为用户的操作而进行页面的重新加载或跳转取而代之的是利用路由机制实现 HTML 内容的变换UI 与用户的交互避免页面的重新加载。优点用户体验好、快内容的改变不需要重新加载整个页面避免了不必要的跳转和重复渲染基于上面一点SPA 相对对服务器压力小前后端职责分离架构清晰前端进行交互逻辑后端负责数据处理缺点初次加载耗时多为实现单页 Web 应用功能及显示效果需要在加载页面的时候将 JavaScript、CSS 统一加载部分页面按需加载前进后退路由管理由于单页应用在一个页面中显示所有的内容所以不能使用浏览器的前进后退功能所有的页面切换需要自己建立堆栈管理SEO 难度较大由于所有的内容都在一个页面中动态替换显示所以在 SEO 上其有着天然的弱势。2、怎样理解 Vue 的单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定父级 prop 的更新会向下流动到子组件中但是反过来则不行。这样会防止从子组件意外改变父级组件的状态从而导致你的应用的数据流向难以理解。额外的每次父级组件发生更新时子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了Vue 会在浏览器的控制台中发出警告。子组件想修改时只能通过 $emit 派发一个自定义事件父组件接收到后由父组件修改。有两种常见的试图改变一个 prop 的情形 :这个 prop 用来传递一个初始值这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下最好定义一个本地的 data 属性并将这个 prop 用作其初始值props: [list],data: function () { return { counter: this. list }}这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下最好使用这个 prop 的值来定义一个计算属性props: [size],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}3、直接给一个数组项赋值Vue 能检测到变化吗由于 JavaScript 的限制Vue 不能检测到以下数组的变动当你利用索引直接设置一个数组项时例如vm.items[indexOfItem] newValue当你修改数组的长度时例如vm.items.length newLength为了解决第一个问题Vue 提供了以下操作方法// Vue.setVue.set(vm.items, indexOfItem, newValue)// vm.$setVue.set的一个别名vm.$set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)为了解决第二个问题Vue 提供了以下操作方法// Array.prototype.splicevm.items.splice(newLength)4、Vue 的父组件和子组件生命周期钩子函数执行顺序Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分加载渲染过程父 beforeCreate - 父 created - 父 beforeMount - 子 beforeCreate - 子 created - 子 beforeMount - 子 mounted - 父 mounted子组件更新过程父 beforeUpdate - 子 beforeUpdate - 子 updated - 父 updated父组件更新过程父 beforeUpdate - 父 updated销毁过程父 beforeDestroy - 子 beforeDestroy - 子 destroyed - 父 destroyed5、在什么阶段才能访问操作DOM在钩子函数 mounted 被调用前Vue 已经将编译好的模板挂载到页面上所以在 mounted 中可以访问操作 DOM。vue 具体的生命周期示意图可以参见如下理解了整个生命周期各个阶段的操作关于生命周期相关的面试题就难不倒你了。6、父组件可以监听到子组件的生命周期吗比如有父组件 Parent 和子组件 Child如果父组件监听到子组件挂载 mounted 就做一些逻辑处理可以通过以下写法实现// Parent.vueChild mounteddoSomething/// Child.vuemounted() { this.$emit(mounted);}以上需要手动通过 $emit 触发父组件的事件更简单的方式可以在父组件引用子组件时通过 hook 来监听即可如下所示// Parent.vueChild hook:mounteddoSomething /ChilddoSomething() { console.log(父组件监听到 mounted 钩子函数 ...);},// Child.vuemounted(){ console.log(子组件触发 mounted 钩子函数 ...);}, // 以上输出顺序为// 子组件触发 mounted 钩子函数 ...// 父组件监听到 mounted 钩子函数 ... 复制代码当然 hook 方法不仅仅是可以监听 mounted其它的生命周期事件例如createdupdated 等都可以监听。7、谈谈你对 keep-alive 的了解keep-alive 是 Vue 内置的一个组件可以使被包含的组件保留状态避免重新渲染 其有以下特性一般结合路由和动态组件一起使用用于缓存组件提供 include 和 exclude 属性两者都支持字符串或正则表达式 include 表示只有名称匹配的组件会被缓存exclude 表示任何名称匹配的组件都不会被缓存 其中 exclude 的优先级比 include 高对应两个钩子函数 activated 和 deactivated 当组件被激活时触发钩子函数 activated当组件被移除时触发钩子函数 deactivated。8、组件中 data 为什么是一个函数为什么组件中的 data 必须是一个函数然后 return 一个对象而 new Vue 实例里data 可以直接是一个对象因为组件是用来复用的且 JS 里对象是引用关系如果组件中 data 是一个对象那么这样作用域没有隔离子组件中的 data 属性值会相互影响如果组件中 data 选项是一个函数那么每个实例可以维护一份被返回对象的独立的拷贝组件实例之间的 data 属性值不会互相影响而 new Vue 的实例是不会被复用的因此不存在引用对象的问题。9、Vue 组件间通信有哪几种方式Vue 组件间通信是面试常考的知识点之一这题有点类似于开放题你回答出越多方法当然越加分表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信父子组件通信、隔代组件通信、兄弟组件通信下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。1props / $emit 适用 父子组件通信这种方法是 Vue 组件的基础相信大部分同学耳闻能详所以此处就不举例展开介绍。2ref 与 $parent / $children 适用 父子组件通信ref如果在普通的 DOM 元素上使用引用指向的就是 DOM 元素如果用在子组件上引用就指向组件实例$parent / $children访问父 / 子实例3EventBus $emit / $on 适用于 父子、隔代、兄弟组件通信这种方法通过一个空的 Vue 实例作为中央事件总线事件中心用它来触发事件和监听事件从而实现任何组件间的通信包括父子、隔代、兄弟组件。4Vuex 适用于 父子、隔代、兄弟组件通信Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store仓库。“store” 基本上就是一个容器它包含着你的应用中大部分的状态 ( state )。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候若 store 中的状态发生变化那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。10、你使用过 Vuex 吗Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store仓库。“store” 基本上就是一个容器它包含着你的应用中大部分的状态 ( state )。1Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候若 store 中的状态发生变化那么相应的组件也会相应地得到高效更新。2改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。主要包括以下几个模块State定义了应用状态的数据结构可以在这里设置默认的初始状态。Getter允许组件从 Store 中获取数据mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。Mutation是唯一更改 store 中状态的方法且必须是同步函数。Action用于提交 mutation而不是直接变更状态可以包含任意异步操作。Module允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。11、vue-router 路由模式有几种ue-router 有 2 种路由模式hash、history其中2 种路由模式的说明如下hash: 使用 URL hash 值来作路由。支持所有浏览器包括不支持 HTML5 History Api 的浏览器history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式12、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗1hash 模式的实现原理早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站它的 location.hash 的值为 #searchhttps://www.word.com#searchhash 路由模式的实现主要是基于下面几个特性URL 中 hash 值只是客户端的一种状态也就是说当向服务器端发出请求时hash 部分不会被发送hash 值的改变都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换可以通过 a 标签并设置 href 属性当用户点击这个标签后URL 的 hash 值会发生改变或者使用 JavaScript 来对 loaction.hash 进行赋值改变 URL 的 hash 值我们可以使用 hashchange 事件来监听 hash 值的变化从而对页面进行跳转渲染。2history 模式的实现原理HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下操作浏览器的历史纪录。唯一不同的是前者是新增一个历史记录后者是直接替换当前的历史记录如下所示window.history.pushState(null, null, path);window.history.replaceState(null, null, path);history 路由模式的实现主要基于存在下面几个特性pushState 和 repalceState 两个 API 来操作实现 URL 的变化 我们可以使用 popstate 事件来监听 url 的变化从而对页面进行跳转渲染history.pushState() 或 history.replaceState() 不会触发 popstate 事件这时我们需要手动触发页面跳转渲染。13、虚拟 DOM 的优缺点优点保证性能下限 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作它的一些 DOM 操作的实现必须是普适的所以它的性能并不是最优的但是比起粗暴的 DOM 操作性能要好很多因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下依然可以提供还不错的性能即保证性能的下限无需手动操作 DOM 我们不再需要手动去操作 DOM只需要写好 View-Model 的代码逻辑框架会根据虚拟 DOM 和 数据双向绑定帮我们以可预期的方式更新视图极大提高我们的开发效率跨平台 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关相比之下虚拟 DOM 可以进行更方便地跨平台操作例如服务器渲染、weex 开发等等。缺点:无法进行极致优化 虽然虚拟 DOM 合理的优化足以应对绝大部分应用的性能需求但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。14、你有对 Vue 项目进行哪些优化1代码层面的优化v-if 和 v-show 区分使用场景computed 和 watch 区分使用场景v-for 遍历必须为 item 添加 key且避免同时使用 v-if长列表性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无限列表性能服务端渲染 SSR or 预渲染2Webpack 层面的优化Webpack 对图片进行压缩减少 ES6 转为 ES5 的冗余代码提取公共代码模板预编译提取组件的 CSS优化 SourceMap构建结果输出分析Vue 项目的编译优化3基础的 Web 技术的优化开启 gzip 压缩浏览器缓存CDN 的使用使用 Chrome Performance 查找性能瓶颈15、对于即将到来的 vue3.0 特性你有什么了解的吗Vue 3.0 正走在发布的路上Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大因此 Vue 3.0 增加以下这些新特性1监测机制的改变3.0 将带来基于代理 Proxy 的 observer 实现提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制只能监测属性不能监测对象检测属性的添加和删除检测数组索引和长度的变更支持 Map、Set、WeakMap 和 WeakSet。新的 observer 还提供了以下特性用于创建 observable 的公开 API。这为中小规模场景提供了简单轻量级的跨组件状态管理解决方案。默认采用惰性观察。在 2.x 中不管反应式数据有多大都会在启动时被观察到。如果你的数据集很大这可能会在应用启动时带来明显的开销。在 3.x 中只观察用于渲染应用程序最初可见部分的数据。更精确的变更通知。在 2.x 中通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher 收到变更通知。在 3.x 中只有依赖于特定属性的 watcher 才会收到通知。不可变的 observable我们可以创建值的“不可变”版本即使是嵌套属性除非系统在内部暂时将其“解禁”。这个机制可用于冻结 prop 传递或 Vuex 状态树以外的变化。更好的调试功能我们可以使用新的 renderTracked 和 renderTriggered 钩子精确地跟踪组件在什么时候以及为什么重新渲染。2模板模板方面没有大的变更只改了作用域插槽2.x 的机制导致作用域插槽变了父组件会重新渲染而 3.0 把作用域插槽改成了函数的方式这样只会影响子组件的重新渲染提升了渲染的性能。同时对于 render 函数的方面vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。3对象式的组件声明方式vue2.x 中的组件是通过声明的方式传入一系列 option和 TypeScript 的结合需要通过一些装饰器的方式来做虽然能实现功能但是比较麻烦。3.0 修改了组件的声明方式改成了类式的写法这样使得和 TypeScript 的结合变得很容易。此外vue 的源码也改用了 TypeScript 来写。其实当代码的功能复杂之后必须有一个静态类型系统来做一些辅助管理。现在 vue3.0 也全面改用 TypeScript 来重写了更是使得对外暴露的 api 更容易结合 TypeScript。静态类型系统对于复杂代码的维护确实很有必要。4其它方面的更改vue3.0 的改变是全面的上面只涉及到主要的 3 个方面还有一些其他的更改支持自定义渲染器从而使得 weex 可以通过自定义渲染器的方式来扩展而不是直接 fork 源码来改的方式。支持 Fragment多个根节点和 Protal在 dom 其他部分渲染组建内容组件针对一些特殊的场景做了处理。基于 treeshaking 优化提供了更多的内置功能。16、 Vue实现数据双向绑定的原理Object.definePropertyvue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式通过Object.defineProperty来劫持各个属性的settergetter在数据变动时发布消息给订阅者触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时Vue 将遍历它的属性用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter但是在内部它们让 Vue 追踪依赖在属性被访问和修改时通知变化。vue的数据双向绑定 将MVVM作为数据绑定的入口整合ObserverCompile和Watcher三者通过Observer来监听自己的model的数据变化通过Compile来解析编译模板指令vue中是用来解析 {{}}最终利用watcher搭起observer和Compile之间的通信桥梁达到数据变化 —视图更新视图交互变化input—数据model变更双向绑定效果。17、Vue与Angular以及React的区别1.与AngularJS的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。不同点AngularJS的学习成本高比如增加了Dependency Injection特性而Vue.js本身提供的API都比较简单、直观在性能上AngularJS依赖对数据做脏检查所以Watcher越多越慢Vue.js使用基于依赖追踪的观察并且使用异步队列更新所有的数据都是独立触发的。2.与React的区别相同点React采用特殊的JSX语法Vue.js在组件开发中也推崇编写.vue特殊文件格式对文件内容都有一些约定两者都需要编译后使用中心思想相同一切都是组件组件实例之间可以嵌套都提供合理的钩子函数可以让开发者定制化地去处理需求都不内置列数AJAXRoute等功能到核心包而是以插件的方式加载在组件开发中都支持mixins的特性。不同点React采用的Virtual DOM会对渲染出来的结果做脏检查Vue.js在模板中提供了指令过滤器等可以非常方便快捷地操作Virtual DOM。18、vuex是什么怎么使用哪种功能场景使用它只用来读取的状态集中放在store中 改变状态的方式是提交mutations这是个同步的事物 异步逻辑应该封装在action中。在main.js引入store注入。新建了一个目录store….. export 。场景有单页应用中组件之间的状态、音乐播放、登录状态、加入购物车stateVuex 使用单一状态树,即每个应用将仅仅包含一个store 实例但单一状态树和模块化并不冲突。存放的数据状态不可以直接修改里面的数据。mutationsmutations定义的方法动态修改Vuex 的 store 中的状态或数据。getters类似vue的计算属性主要用来过滤一些数据。actionactions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。modules项目特别复杂的时候可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰方便管理。20.css只在当前组件起作用答在style标签中写入scoped即可 例如style scoped/style21.$router和router的区别答是路由信息对象包括等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法钩子函数等。22.vue.js的两个核心是什么答数据驱动、组件系统23.v-on 可以绑定多个方法吗答可以24.vue中 key 值的作用答当 Vue.js 用 v-for 正在更新已渲染过的元素列表时它默认用“就地复用”策略。如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序 而是简单复用此处每个元素并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。25.什么是vue的计算属性答在模板中放入太多的逻辑会让模板过重且难以维护在需要对数据进行复杂处理且可能多次使用的情况下尽量采取计算属性的方式。好处①使得数据处理结构清晰②依赖于数据数据更新处理结果自动更新③计算属性内部this指向vm实例④在template调用时直接写计算属性名即可⑤常用的是getter方法获取数据也可以使用set方法改变数据⑥相较于methods不管依赖的数据变不变methods都会重新计算但是依赖数据不变的时候computed从缓存中获取不会重新计算。26.怎么定义 vue-router 的动态路由? 怎么获取传过来的值答在 router 目录下的 index.js 文件中对 path 属性加上 /:id使用 router 对象的 params.id 获取。27.vue优点答轻量级框架只关注视图层是一个构建数据的视图集合大小只有几十kb简单易学国人开发中文文档不存在语言障碍 易于理解和学习双向数据绑定保留了angular的特点在数据操作方面更为简单组件化保留了react的优点实现了html的封装和重用在构建单页面应用方面有着独特的优势视图数据结构分离使数据的更改更为简单不需要进行逻辑代码的修改只需要操作数据就能完成相关操作虚拟DOMdom操作是非常耗费性能的 不再使用原生的dom操作节点极大解放dom操作但具体操作的还是dom不过是换了另一种方式运行速度更快:相比较与react而言同样是操作虚拟dom就性能而言vue存在很大的优势。28.如何获取dom?答refdomName 用法this.$refs.domName29. vue-loader是什么使用它的用途有哪些答vue文件的一个加载器将template/js/style转换成js模块。用途js可以写es6、style样式可以scss或less、template可以加jade等30.axios及安装?答请求后台资源的模块。npm install axios --save装好js中使用import进来然后.get或.post。返回在.then函数中如果成功失败则是在.catch函数中。31.请说出vue.cli项目中src目录每个文件夹和文件的用法答assets文件夹是放静态资源components是放组件router是定义路由相关的配置; app.vue是一个应用主组件main.js是入口文件。32.$nextTick的使用答当你修改了data的值然后马上获取这个dom元素的值是不能获取到更新后的值你需要使用$nextTick这个回调让修改后的data值渲染更新到dom元素之后在获取才能成功。33.assets和static的区别答相同点assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片字体图标样式文件等都可以放在这两个文件下这是相同点不相同点assets中存放的静态资源文件在项目打包时也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传所谓打包简单点可以理解为压缩体积代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程而是直接进入打包好的目录直接上传至服务器。因为避免了压缩直接进行上传在打包时会提高一定的效率但是static中的资源文件由于没有进行压缩等操作所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。建议将项目中template需要的样式文件js文件等都可以放置在assets中走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中因为这些引入的第三方文件已经经过处理我们不再需要处理直接上传。34.vue和jQuery的区别答jQuery是使用选择器$选取DOM对象对其进行赋值、取值、事件绑定等操作其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象而数据和界面是在一起的。比如需要获取label标签的内容$(lable).val();,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象可以说数据和View是分离的他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。35. 引进组件的步骤答: 在template中引入组件在script的第一行用import引入路径用component中写上组件名称。36.Vue-router跳转和location.href有什么区别答使用location.href/url来跳转简单方便但是刷新了页面使用history.pushState(/url)无刷新页面静态跳转引进router然后使用router.push(/url)来跳转使用了diff算法实现了按需加载减少了dom的消耗。其实使用router跳转和使用history.pushState()没什么差别的因为vue-router就是用了history.pushState()尤其是在history模式下。37. vue slot答简单来说假如父组件需要在子组件内放一些DOM那么这些DOM是显示、不显示、在哪个地方显示、如何显示就是slot分发负责的活。38.axios的特点有哪些答从浏览器中创建XMLHttpRequestsnode.js创建http请求支持Promise API拦截请求和响应转换请求数据和响应数据取消请求自动换成json。axios中的发送字段的参数是data跟params两个两者的区别在于params是跟请求地址一起发送的data的作为一个请求体进行发送params一般适用于get请求data一般适用于post put 请求。39.你们vue项目是打包了一个js文件一个css文件还是有多个文件答根据vue-cli脚手架规范一个js文件一个CSS文件。40.Vue里面router-link在电脑上有用在安卓上没反应怎么解决答Vue路由在Android机上有问题babel问题安装babel polypill插件解决41.Vue2中注册在router-link上事件无效解决方法答 使用click.native。原因router-link会阻止click事件.native指直接监听一个原生事件。42.params和query的区别答用法query要用path来引入params要用name来引入接收参数都是类似的分别是this.$route.query.name和this.$route.params.name。url地址显示query更加类似于我们ajax中get传参params则类似于post说的再简单一点前者在浏览器地址栏中显示参数后者则不显示注意点query刷新不会丢失query里面的数据params刷新 会 丢失 params里面的数据。43.vue初始化页面闪动问题答使用vue开发时在vue初始化之前由于div是不归vue管的所以我们写的代码在还没有解析的情况下会容易出现花屏现象看到类似于{{message}}的字样虽然一般情况下这个时间很短暂但是我们还是有必要让解决这个问题的。首先在css里加上[v-cloak] {display: none;}。如果没有彻底解决问题则在根元素加上styledisplay: none; :style{display: block}44.vue更新数组时触发视图更新的方法答:push()pop()shift()unshift()splice() sort()reverse()45.watch和computed的区别以及使用场景 区别 watch中的函数是不需要调用的 computed内部的函数调用的时候不需要加() watch 属性监听 监听属性的变化 computed:计算属性 通过属性计算而得来的属性 watch需要在数据变化时执行异步或开销较大的操作时使用 computed 属性的结果会被缓存除非依赖的响应式属性变化才会重新计算。 主要当作属性来使用。 使用场景 computed 当一个属性受多个属性影响的时候就需要用到computed 最典型的例子 购物车商品结算的时候 watch 当一条数据影响多条数据的时候就需要用watch 搜索数据46 导航守卫 1.全局守卫 全局前置守卫 router.beforeEach((to, from, next) { // ... }) 全局后置守卫 router.afterEach((to, from) { // ... }) 2.路由独享守卫 const router new VueRouter({ routes: [ { path: /foo, component: Foo, beforeEnter: (to, from, next) { // ... } } ] }) 3.组件内的守卫 const Foo { template: ..., beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能获取组件实例 this // 因为当守卫执行前组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变但是该组件被复用时调用 // 举例来说对于一个带有动态参数的路径 /foo/:id在 /foo/1 和 /foo/2 之间跳转的时候 // 由于会渲染同样的 Foo 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 this }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 this } }47 路由滚动行为 const router new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } })48.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{})49.如何解决跨域问题 答案在config文件夹中的index.js中的Dev中填写 ProxyTable{ ‘/api’:{ Target’代理服务器的目标地址’ changeOrigin: true, PathRewrite: {“^/api”:” ”} } }50.axios面试题1、axios的特点有哪些答一、Axios 是一个基于 promise 的 HTTP 库支持promise所有的API二、它可以拦截请求和响应三、它可以转换请求数据和响应数据并对响应回来的内容自动转换成 JSON类型的数据四、安全性更高客户端支持防御 XSRF2、axios有哪些常用方法答一、axios.get(url[, config]) //get请求用于列表和信息查询二、axios.delete(url[, config]) //删除三、axios.post(url[, data[, config]]) //post请求用于信息的添加四、axios.put(url[, data[, config]]) //更新操作3、说下你了解的axios相关配置属性答url是用于请求的服务器URLmethod是创建请求时使用的方法,默认是getbaseURL将自动加在url前面除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URLtransformRequest允许在向服务器发送前修改请求数据只能用在PUT,POST和PATCH这几个请求方法headers是即将被发送的自定义请求头headers:{X-Requested-With:XMLHttpRequest},params是即将与请求一起发送的URL参数必须是一个无格式对象(plainobject)或URLSearchParams对象params:{ID:12345},auth表示应该使用HTTP基础验证并提供凭据这将设置一个Authorization头覆写掉现有的任意使用headers设置的自定义Authorization头auth:{username:janedoe,password:s00pers3cret},proxy定义代理服务器的主机名称和端口auth表示HTTP基础验证应当用于连接代理并提供凭据这将会设置一个Proxy-Authorization头覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。proxy:{host:127.0.0.1,port:9000,auth::{username:mikeymike,password:rapunz3l}},4、请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token统一做了处理如果以后要改也非常容易。axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么例如加入token ....... return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });5、响应拦截器响应拦截器的作用是在接收到响应后进行一些操作例如在服务器返回登录状态失效需要重新登录的时候跳转到登录页axios.interceptors.response.use(function (response) { // 在接收响应做些什么例如跳转到登录页 ...... return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
