最近加入了一家新公司，总体来说还是不错的。前段时间看了很多关于vue的知识点，理解和整理，然后加深了印象。也希望能帮助到有需要的同学。如果您理解有误，请指正。一、对Vue作为渐进式框架的理解答：Vue是渐进式的，没有强声明，是一个轻量级的视图。它只做了它应该做的，没有做任何多余的事情。2、vue.js的两大核心是什么？答：数据驱动，组件化。3、vue中模板编译原理答：模板指的是模板。如果我们传递一个模板，我们会将模板转换为渲染函数，然后通过渲染函数返回虚拟DOM，然后将虚拟DOM变成真实的DOM。4.响应式数据原理答：响应式就是当数据发生变化时，视图也可以同步更新。核心是Object.defineProperty。Vue初始化时，Object.defineProperty会依次为data的属性添加get、set方法，收集依赖。如果数据发生变化，会通知相关的依赖做相应的更新。.5、vue生命周期钩子函数有哪些？(vue2.0)答：①创建时的生命周期函数：beforeCreate()：此时实例刚刚在内存中创建，数据和方法还没有初始化。created()：此时实例已经在内存中创建，数据和方法也已经初始化。模板尚未编译。beforeMount()：此时模板已经编译成功，还没有挂载到页面上。mounted()：此时编译好的模板已经挂载到指定位置。②运行时的生命周期函数：beforeUpdate()：此时data数据发生变化后，DOM树还没有重新渲染，data的数据是最新的，但是页面上显示的还是旧数据.updated()：此时data中的数据与页面渲染一致。③销毁时的生命周期函数：beforeDestroy()：此时实例的方法和指令仍然可以使用，在实例销毁前被调用。destroyed()：此时vue实例上的所有指令、绑定、监视器都会被销毁，所有的子实例也会被销毁。6、vue的生命周期钩子是如何实现的？答：Vue的生命周期钩子其实就是一个回调函数。当我们传入一个钩子函数时，Vue会在内部为我们调用它，并将生命周期钩子转换成一个数组。调用时，会再次遍历数组。婴儿被命名-类似于发布-订阅模型。7、vue的双向绑定原理是什么？答：Vue数据双向绑定是通过数据劫持结合发布订阅者模式实现的。实施步骤：①．实现一个监听器Observer，用来劫持和监听所有的属性，如果有变化通知订阅者。②.实现一个SubscriberWatcher，它可以接收属性变化通知并执行相应的函数来更新视图。③.实现一个解析器Compile，可以扫描并解析每个节点的相关指令，并根据初始化模板数据初始化相应的订阅者。8、Vue为什么要操作虚拟DOM？答：虚拟DOM使用一个对象来描述真实的DOM。真实DOM上的属性很多，操作起来很不方便。为了减少DOM操作，我们在更新的时候先记录下需要更新的DOM，然后更新这些需要更新的DOM，最后根据diff算法进行比较。是的，更新DOM。（Vue中的diff算法是层次比较，不考虑跨层次比较）VirtualDOM不依赖于真实的平台环境，可以实现跨平台。9.v-if和v-show有什么区别？答：这两条指令是判断DOM节点是否显示。区别在于：①．实现方式：v-if是根据后续数据的真假值，直接从Dom树中删除或重建元素节点。v-show只是修改元素的display属性值，元素一直在Dom树上。②.编译过程：v-if切换有部分编译/卸载过程，在这个过程中内部事件监听器和子组件被适当销毁和重建；v-show只是基于css切换；③.编译条件：v-if是惰性的，如果初始条件为假，则什么都不做；仅在条件第一次为真时才开始本地编译；v-show在任何条件下（无论第一个条件是否为真）编译，然后缓存，DOM元素始终保留；④.性能消耗：v-if切换消耗较大，不适合频繁切换；v-show初始渲染消耗较高，适合频繁切换；10．vue中常用的修饰符答：Vue修饰符主要有：①事件修饰符。stop：与原生JavaScript中的event.stopPropagation()一致，防止事件冒泡。prevent：与原生JavaScript中的event.preventDefault()一致，阻止默认事件。捕获：与事件冒泡的方向相反，事件捕获是从外到内。self：只触发自己范围内的事件，不包括子元素。once：只触发一次。②Keymodifier.delete(捕获“delete”和“backspace”键)用法同事件修饰符，挂载在v-on::v-on:keyup.xxx='yyy'③系统修饰符.ctrl.alt.shift.meta这些修饰符可以实现按下相应键触发鼠标或键盘事件的监听器。11、v-on可以监控多个方法吗？答：可以点我12、vue.mixin的使用场景和原理是什么？答：vue.mixin可以添加公共方法。当组件初始化调用时，mergeOptions方法会针对不同的属性进行merge合并。Vue.mixin也有很多缺点，比如依赖问题、命名问题、数据不能共享、数据源等问题。13、Vue中键值的作用答：键的作用主要是高效更新虚拟DOM。在vue中，在使用同标签名元素的transition开关时，还要用到key属性，这是为了让vue区分它们，否则vue只会替换其内部属性而不会触发transition效果。14、为什么Vue组件中的数据必须是函数？答：在newVue()中，数据可以作为一个对象来操作，但是在组件中，数据只能以函数的形式存在，不能直接给它赋值对象。当data选项为函数时，每个实例都可以维护一份独立的返回对象副本，这样每个实例中的数据就不会相互影响，是独立的。15、v-for和v-if的优先级答：v-for的优先级高于v-if。16、nextTick的实现原理是什么？答：nextTick中的回调函数是在下一次DOM更新结束后执行的，延迟回调防止多次更新。NextTick是一个异步方法（promise）。17.说出vue中至少4条指令及其用法答案：①v-if（判断是否隐藏）②v-for（遍历）③v-bind（属性绑定）⑤v-model（双向数据绑定集合）)18.vue中子组件调用父组件的方法答：①在子组件中通过this.$parent.event直接调用父组件的方法。②在子组件中，使用$emit向父组件触发事件，父组件只是监听这个事件。③父组件将方法传入子组件，在子组件中直接调用该方法。19、vue中父组件调用子组件的方法答：父组件使用ref属性来操作子组件的方法。Parent:Child:test(){console.log('Hello')}}在父组件中调用test，使用this.$refs.childMethod.test()20.vue组件之间传值答案：（1）父子组件传值：①父组件调用子组件时，动态绑定属性②子组件定义props接收动态绑定的属性props：['dataList']③子组件获取之间的属性和方法theparentandthechild：在子组件中使用this.$parent.propertyname/this.$parent.methodname。④子组件传值给父组件：a．在父组件调用子组件绑定属性ref时使用ref属性，在父组件中使用this.$refs.parent.property/this.$refs.parent.methodb。使用$emit方法子组件调用this.$emit('方法名',passvalue)父组件通过子组件绑定的'方法名'获取传值（二）vue页面级之间传值components①使用vue-router传递跳转链接带参数传递参数。②使用本地缓存localStorge。③使用vuex数据管理传值。21.说说Vue的动态组件。答：多个组件通过同一个挂载点切换组件。如果值为whichcomponent的名字，那么页面上会显示哪个component。22.keep-alive内置组件的作用答：keep-alive是vue的内置组件，这个组件的作用是缓存不活跃的组件。当组件切换时，默认会被销毁。如果有需求，某个组件切换后没有销毁，而是保存了之前的状态，那么可以使用keep-alive来实现。23、vue中如何检测数组变化答：Vue重写了数组原型上的方法，改变了一些数组方法，比如push,shift,pop,splice,unshift,sort,reverse，它们都有一个特点就是你可以改变数组的原始值。当我们使用这些方法来操作数组时，原来的方法会被劫持，我们可以在函数内部添加自己的函数。如果要跟随新数组的索引，需要使用vue.$set方法来实现。24.vue.set方法答案：Vue不允许在创建的实例上动态添加新的根级响应属性。$set可以触发更新。当一个对象添加一个不存在的属性时，会触发该对象所依赖的watcher。更新，当改变数组索引时，我们调用数组的splice方法来更新数组。操作数组示例：this.$set(arr,index,val)操作对象示例：this.$set(obj,key,val)25.nextTick的实现原理是什么答：nextTick中的回调函数是nextDOM更新完成后执行，延迟回调，防止多次更新。NextTick是一个异步方法（promise）。26.递归组件的用法答：在exportdefault中，有一个属性是name。此属性对于递归组件非常重要。递归组件只能用name选项做事。递归的组件必须有结束条件，否则组件会被循环引用，最终会出现“maxstacksizeexceeded”错误，即堆栈溢出。然后，我们可以使用v-if="false"作为递归组件的结束条件。当v-if为false时，组件将不再被渲染。27.如何定义vue-router的动态路由？如何获取传递的值？A：创建动态路由，使用path属性，使用动态路径参数，以冒号开头：{path:'/test/:id'name:'Test'components:Test}访问test目录下的所有文件，并且在test上的所有属性都将映射到Test组件。在读取/test下的路由时，会将参数放入this.$route.params中。通过this.$route.params.id可以动态获取参数。28.vue-router有哪几种路由守卫？答：路由守卫是全局守卫：beforeEach后置守卫：afterEach全局解析守卫：beforeResolve路由独占守卫：beforeEnter29，beforeEach原理回答：使用router.beforeEach()做一些入口页面限制。比如你登录了，不登录就不能进入页面，只有登录后才能有权限查看某些页面。也就是路由拦截。原理：当一个navigation被触发时，globalfrontguards按照创建的顺序被调用。守卫是异步执行的。此时导航处于等待状态，直到所有守卫解决。每个守卫方法接收三个参数：to:Route:即将进入路由对象的目标from:Route:当前导航离开的路由next:Function:必须调用此方法来解析此钩子。执行取决于下一个方法的调用参数。next()：继续执行队列中的下一个钩子。如果所有的钩子都被执行??，则导航的状态被确认（confirmed）。next(false):中断当前导航。如果浏览器的URL发生变化（可能是用户手动或浏览器的后退按钮），URL地址将被重置为与from路由对应的地址。next('/')或next({path:'/'})：跳转到不同的地址。当前导航被中断并开始新的导航。next(error):(2.4.0+)如果传递给next的参数是一个Error实例，导航将被终止，错误将被传递给注册到router.onError()的回调。30.$route和$router有什么区别？答：$router是VueRouter的一个实例，是一个全局的路由对象，包括路由跳转方法、钩子函数等。$route是路由信息对象跳转到的路由对象。每条路由都会有一个route对象，它是一个本地对象，包含了path、params、hash、query、fullPath、matched、name等路由信息参数。31.vue-router响应路由参数变化答：①使用watch监听②使用组件中的beforeRouteUpdate(to,from,next)导航钩子函数，to表示跳转到的路由对象，from表示哪个route跳转自，next是执行nexthook函数32.vue-router传递参考答案：①使用Params：只能使用name属性，不能使用path，参数不会显示在路径上，还有browser强制刷新参数会被清除②使用查询：参数会显示在路径上，刷新不会被清除。名称可以使用path路径。33、不使用Vuex会导致什么问题？答：①可维护性下降，修改数据需要维护的好地方②可读性下降，组件中数据来源不明确③增加耦合，Vue中使用Component的初衷是为了降低耦合，如果一个大量的上传和分发，反而会增加耦合。34.vuex有哪些属性？答案：State、Getter、Mutation、Action、Module。35.vuex的State特性是什么？答：Vuex就像一个仓库，仓库里有很多对象。state是存放数据源的地方，对应Vue对象中的数据。状态中存储的数据是响应式的。Vue组件从商店中读取数据。如果store中的数据发生变化，则依赖于该数据的组件也将被更新。它通过mapState将全局状态和getters映射到当前组件的计算属性。36.vuex的Getter特性是什么？答：Getters可以对State进行计算操作，State是Store的计算属性。是的，getter可以跨多个组件重用。如果一个状态只在一个组件getters37中使用，那么vuex的Mutation特性是什么？答：Action和mutation类似，不同的是Action提交mutation，而不是直接改变state。Action可以包含任何异步操作38.Vue.js中的ajax请求代码应该写在组件的methods中还是vuex的actions中？答：①如果请求的数据不需要被其他组件复用，只在请求的组件中使用，则不需要放入vuex的state中。②如果在别处复用，可以把request放到action中，包装成promise返回，在调用的地方用asyncawait处理返回的数据
