1.css只在当前组件起作用
在style标签中写入scoped即可 例如:
2.v-if 和 v-show 区别
v-if按照条件是否渲染,操作是DOM
v-show是display的block或none;操作是css样式。
3.route和router的区别
route是路由信息对象,包括path,fullpath,parmas,query,name,hash,等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
4.vue.js的两个核心是什么?
数据驱动、组件系统
5.vue几种常用的指令
v-for 、 v-if 、v-bind、v-on、v-show、v-else、v-else-if
v-html v-text v-once v-model v-pre v-cloak
6.vue常用的修饰符?
prevent 阻止默认行为 stop 阻止事件冒泡
self 当事件发生在该元素本身而不是子元素时候触发
capture 事件侦听 事件发生是才会调用
once 只会触发一次(事件修饰符)
表单修饰符:v-model.number v-model.trim v-model.lazy
按键修饰符:@keyup.left /right /middle/shift
7.v-on 可以绑定多个方法吗?
可以
8.vue中 key 值的作用?
Key值可以管理可复用的元素。Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,vue将不会移动DOM元素匹配数据项的顺序,而是简单的复用此处的每个元素,并且确保它在特定的索引下显示已被渲染过的每个元素。.key 的作用主要是为了高效的更新虚拟DOM。
9.什么是vue的计算属性?
在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采用计算属性的方式。
好处:1、使得数据处理结构清晰,
2、依赖于数据,数据更新,处理结果自动更新。
3、计算属性中this指向vm实例。
4、在template调用是直接写计算属性即可
5、常用的get方法获取数据,也可以使用set方法设置数据。
6、相较于methods,不管依赖的数据变不变,methods都会重新计算,但依赖的数据不变的时候,computed从缓存中获取,不会重新计算。
10.vue单页面应用及其优缺点
单页面的优点:
1、用户体验好,快,内容的改变不需要加载整个页面,基于一点单页面对服务器的压力较小
2、前后端分离
3、页面效果会比较炫酷(比如切换页面内容的专场动画)
单页面的缺点:
1、不利于SEO(搜索引擎优化)
2、导航不可用。如果一定要导航需要自行实现前进后退(由于单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
3、初次加载耗时多。
4、页面的复杂度提高的很多。
补充:单页面应用(SPA),通俗一点说就是只有一个主页面的应用,浏览器一开始加载所有必要的html,js,css。所有的页面内容都包含在这个主页面中。但在写的时候,还是要分开写(页面片段),然后在交互的时候有路由程序动态载入,单页面的页面跳转,仅刷新局部资源,多应用于pc端。
多页面的应用:多页面MPA,就是只一个应用中多个页面,页面跳转时是整页刷新。
11、怎么定义 vue-router 的动态路由? 怎么获取传过来的值
在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取。
12、vue初始化页面闪动问题
使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们还是有必要让解决这个问题的。
首先:在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题,则在根元素加上style="display: none;" :style="{display: 'block'}"
13、如何获取dom(组件、类、函数)?
ref="domName" 用法:this.$refs.domName
14、$nextTick的应用和实现的原理
应用:在修改数据之后立即使用这个 方法,可以获取更新后的DOM的值。
Vue 中nextTick: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
Vue.nextTick:在dom更新后执行,一般用于dom操作
Vue.$nextTick:一直到真实的dom渲染结束后执行
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
原理:nextTick vue中数据变化之后到DOM更新是一个异步的过程,运用的js的运行机制也就是事件循环,同步任务在主线程的执行,形成一个执行栈,主线程之外还有一个任务队列,只要异步任务有了一个结果,就会在任务队列中放置一个事件,一旦执行栈的同步任务执行完就会读取任务队列,主线程执行过程就是一个tick,所有的异步结果都通过任务队列来调度,
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替
15、vue组件中data为什么必须是一个函数?
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
16、v-if和v-for的优先级
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。
17、assets和static的区别
相同点:assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点
不相同点:assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议:将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。
18、vue和jQuery的区别
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。
vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
19、delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
20、Vue-router跳转和location.href有什么区别
location.href='/url'来跳转,简单方便,但是刷新了页面;
Vue-router是基于history的封装。使用history.pushState('/url'),无刷新页面,静态跳转;
21、vue slot
简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。
22、你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?
根据vue-cli脚手架规范,一个js文件,一个css文件。
23、Vue里面router-link在pc端上有用,在安卓上没反应怎么解决?
vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。
24、vue中在router-link上绑定事件无效解决方法(标签中添加@click 或者@mouseover 无效的 情况)
使用@click.native。原因:router-link会阻止click事件,.native指直接监听一个原生事件。
(自定义的组件,触发原生的事件需要native修饰符
)
25、routerLink在IE和Firefox中不起作用(路由不跳转)的问题
方法一:只用a标签,不适用button标签;方法二:使用button标签和Router.navigate方法
26、vue-router 是什么?它有哪些组件
vue-router是vue.js的官方路由管理器。router-link、router-view
27、active-class 是哪个组件的属性?(用于选中样式的切换)
vue-router模块的router-link组件。
"/home" tag='li' active-class='类名'> router-link>
28、vue-router 有哪几种导航钩子?
有三种导航钩子函数。(全局前置守卫(beforeEach),全局解析守卫(beforeResolve),全局后置守卫(afterEach),路由独享守卫(beforeEnter),组件内的守卫(beforeRouteEnter,beforeRouteUpdate ,beforeRouteLeave))
一:是全局导航钩子(全局守卫)
1、router.beforeEach(to,from,next)作用:跳转前进行判断拦截。
守卫的业务 if(to.path==’/login’)判断是不是登陆了。
next(false)/next(true)/next(“login”)
2、全局解析守卫(beforeResolve)
3、router.afterEach(to,from) 全局后置守卫
二:组件内的钩子(组件内的守卫)
beforeRouteEnter(to,from,next){//不能获取组件的实例this,当前的守卫执行前,组件实例还没有创建}beforeRouterUpdate(to,from,next){//动态路由foo/:id 在foo/1和foo/2之间跳转渲染的是同一组件foo,//这个钩子会在这种情况下被调用。可访问组件实例this}beforeRouterLeave(to,from,next){//可访问组件实例this}
三:路由独享组件钩子函数
在路由配置上直接定义beforeEnter守卫
{path:”/user”,compoment:User,beforeEnter:(to,from,next)=>{ //业务 }}
29、vuex有哪几种属性?
Vuex是专门为vue.js 应用程序开发的状态管理模式。Vuex使用单一的状态数,每个应用仅包含一个store应用。五种属性:State Getter Mutation Action Module。
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据(状态)
mutations => 提交更改数据的方法,mutation必须是同步函数。同步执行。
可以使用this.$store.commit()提交mutation或者使用mapMutations辅助函数将组建中的methods映射为store.commit()调用
actions =>action提交的是mutation而不是直接变更状态,异步执行。
在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
modules => 模块化Vuex。允许将store分割成模块每个模块拥有自己的
state,mutations,action ,getter ,甚至可以嵌套子模块。
30、vue中的vuex该什么时候用?vuex的应用场景?
1、如果数据还有其他的组件复用,建议放在vuex中
2、如果需要跨多级组件传递数据,建议放在vuex中
3、需要持久化的数据,比如登录后的用户的信息,建议放在vuex
4、跟当前业务组件强关联的数据,可以放在组件内的data中。
31、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
如果请求的数据是不是被其他组件共用,仅仅在请求的组件中使用,没有必要放在vuex的state里,如果被其他的组件复用,请将请求放在action里,方便复用。
32、keep-alive 缓存组件的理解
keep-alive是一个抽象的组件,它自身不会渲染一个dom元素,也不会出现在父组件链中,使用keep-alive包裹动态组件,会缓存下活动的组件实例,而不是销毁他们。用于保存组件的渲染状态。
keep-alive组件体用两个钩子 activated 和 deactivated
在动态组件中的应用:
Include 定义白名单 exclude 定义黑名单 max定义缓存的上限。
用LRU算法置换缓存:最近访问的将来被访问的机会就大,最近没有访问的意味着将来访问的机会就下。每次从内存中找出最久未使用的数据用于置换新的数据。
33、什么是MVVM?
MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象(桥梁)。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
34、MVVM和MVC区别?MVVM主要
MVVM和MVC都是一种设计思想。MVC是基于后端的开发思想,MVVM是基于前端开发的思想。
主要就是MVC中的Controller演变成ViewModel,,MVVM主要通过数据来显示视图层而不是操作节点,解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度慢,影响用户体验问题。主要用于数据操作比较多的场景。
35、请说下封装vue组件的过程?
首先,组件可以提升整个项目的开发效率能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低,难维护,复用性等问题。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在道具中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用发射方法。
36、聊聊你对Vue.js的模板编译的理解
简而言之,就是先转化成AST树,再得到的渲染函数返回VNODE(Vue公司的虚拟DOM节点)
详情步骤:首先,通过编译器把模板编译成AST语法树(抽象语法树即源代码的抽象语法结构的树状表现形式),编译是createCompiler的返回值,createCompiler是用于创建编译器的。负责合并选项。然后,AST会经过生成(将AST语法树转化成渲染功能字符串的过程)得到渲染函数,渲染的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名,子节点,文本等等)。
37、vue 的优点是什么?
低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
38、vue生命周期的理解?
总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后:在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在
39、组件之间的传值?
父组件与子组件传值:(父组件属性绑定,子组件props接收数据)
子组件向父组件传递数据:(子组件$emit,父组件自定义事件事件绑定)
子组件this.$emit('event', params)
父组件
40、说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏)、
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(实现双向绑定)
v-on (事件绑定)
41、简单说一下Vue2.x响应式数据原理(双向绑定的原理)
Vue数据双向绑定是通过数据劫持结合发布者-订阅者模式方式来实现的,语法主要有{{}}和v-model。首先用递归方法遍历所有的属性值,再用Object.defineProperty()给属性绑定getter和setter方法添加一个observe(val)监听器对数据进行劫持监听;然后创建一个订阅器来在getter里收集订阅者并创建和绑定watcher,如果数据变化,订阅者就会执行自己对应的更新函数;watcher就是在自身实例化的时候往订阅器里添加自己,自身必须有一个update的数据,是监听器和模板渲染的通信桥梁;最后创建解析模板指令compile,替换数据,初始化视图。最终observer来监听自己的model数据变化通过compile解析编译模板指令,利用watcher搭起observer和compile之间的通信桥梁,达到数据变化->视图更新双向绑定效果。
42、那你知道Vue3.x响应式数据原理吗?
Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层,那么Vue3又是怎样处理这个问题的呢?
判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理, 这样就实现了深度观测。
监测数组的时候可能触发多次get/set,那么如何防止触发多次呢?
我们可以判断key是否为当前被代理对象target自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行trigger。
43、vue2.x中如何监测数组变化
使用了函数劫持的方式,重写了数组的方法,Vue将data中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组api时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化
44、你的接口请求一般放在哪个生命周期中?
接口请求一般放在mounted中,但需要注意的是服务端渲染时不支持mounted,需要放到created中。
45、computed和watch
computed本质是一个具备缓存的watcher,依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理。
watch没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开deep:true选项。这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听,如果没有写到组件中,不要忘记使用unWatch手动注销哦。
46.Vue2.x和Vue3.x渲染器的diff算法分别说一下
简单来说,diff算法有以下过程
l 同级比较,再比较子节点
l 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点,将旧的子节点移除)
l 比较都有子节点的情况(核心diff)
l 递归比较子节点
正常Diff两个树的时间复杂度是O(n^3),但实际情况下我们很少会进行跨层级的移动DOM,所以Vue将Diff进行了优化,从O(n^3) -> O(n),只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅。
Vue3.x借鉴了ivi算法和 inferno算法
在创建VNode时就确定其类型,以及在mount/patch的过程中采用位运算来判断一个VNode的类型,在这个基础之上再配合核心的Diff算法,使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)
该算法中还运用了动态规划的思想求解最长递归子序列。
47.虚拟DOM的作用
由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。vue2的Virtual DOM借鉴了开源库snabbdom的实现。virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。virtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。
48、vue中组件生命周期调用顺序说一下
组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子,销毁完成的顺序是先子后父。
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
49、SSR了解吗?
Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO
SSR也就是服务端渲染,也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点,比如我们的开发条件会受到限制,服务器端渲染只支持beforeCreate和created两个钩子,当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。
50、你都做过哪些Vue的性能优化?
编码阶段
l 尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
l v-if和v-for不能连用
l 如果需要使用v-for给每项元素绑定事件时使用事件代理
l SPA 页面采用keep-alive缓存组件
l 在更多的情况下,使用v-if替代v-show
l key保证唯一
l 使用路由懒加载、异步组件
l 防抖、节流
l 第三方模块按需导入
l 长列表滚动到可视区域动态加载
l 图片懒加载
l 使用CDN资源,减少服务器的压力。将公用的js库通过script标签外部引入。
SEO优化
l 预渲染
l 服务端渲染SSR
打包优化
l 压缩代码
l Tree Shaking/Scope Hoisting
l 使用cdn加载第三方模块
l 多线程打包happypack
l splitChunks抽离公共文件
l sourceMap优化
用户体验
l 骨架屏:加一个首屏loading图,提升用户体验;
l PWA(全称Progress Web App)即渐进式的web应用。
l 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
51、hash路由和history路由实现原理说一下
location.hash的值实际就是URL中#后面的东西。
history实际采用了HTML5中提供的API来实现,主要有history.pushState()和history.replaceState()。
52、编程时跳转方法的参数可以是一个字符串,或者一个描述的地址的对象。
router.push(‘home’);
router.push({path:’home’})
router.push({name:’user’,parmas:{userId:’ 123’ }})命名的路由(动态路由)
router.push({path:’goods’},query:{plan:’private’}})带查询参数
router.push({name:’user’,params:{userId}})
router.push ({path:’/user/${userId}})
下面的情况不生效:
router.push({path:’user’,params:{userId}})
53、非响应式情况 情况总是要发生
01、对数组使用了 非变异 (non-mutating method) 方法(返回的了新数组) 修改
02、数组的长度时 修改数组索引上的值(根索引) 给对象添加了不存在的属性
解决
Vue.set(数组, index, value)
vm|this.$set(对象, key, value)
this.$forceUpdate() 强制刷新
吃亏后的经验
不要修改数组的根键,不要修改数组的长度,数据一开始都要声明在data选项内部,不要对数组使用非变异的api
Vue.set(vm.items, indexOfItem, newValue)
let a = [
{name:'张三',age:'20',sex:1},
{name:'李四',age:'21',sex:0},
{name:'王五',age:'22',sex:1},
]
Vue.set(a,1,a[1]);//就可以改了这时候 a 是源数据, 1 是键, a[1]是修改后的数据(里面的三个参数)
Vue.forceUpdate();//也可以用这个方法手动触发视图更改 强制更新
54、vue cli3 和 vue cli 2 的区别
\\3.0安装:vue create 3.0project 2.0安装:vue init webpack 2.0project
\\vuex是3.0新加的 ,还有一个重要的3.0安装目录时,自动下载node-model
\\3.0启动项目:npm run serve 2.0启动:npm run dev
\\3.0中有一些目录build、config没有了, 在根目录下创建一个vue.config.js
具体的配置文档:
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '',
ws: true,
changeOrigin: true
},
'/foo': {
target: ''
}
}, // 配置多个代理
}
}
55、指令周期有什么?自定义指令了解过吗?怎么用的注意什么
bind:只调用一次, 指令第一次绑定到元素时调用。 可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点调用(仅保证父节点存在,但不一定已被插入文档中)(注意钩子函数的用法)
update:模板更新调用
componentUpdated:指令所在组件的vNode及其子Vnode全部更新后调用
unbind:指令与元素解绑时,只调用一次