解决在Vue项目中修改Svg颜色不生效 原因是svg源代码中fill设置了固定颜色解决方案，将fill设置成currentColorfill="currentColor"

Vue常见面试题 vue-router导航守卫有哪些？全局前置钩子：beforeEach、beforeResolve、afterEach路由独享守卫：beforeEnter组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave为什么Vue3.0采用了Proxy，抛弃了Object.defineProperty？Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2是通过递归+遍历data对象来实现对数据的监控的。如果属性值也是对象那么就需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。V-for为什么要加key？如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/服用相同类型元素的算法。key是Vue中vnode的唯一标记，通过这个key，可以让diff操作可以更准确、更快速。如何从真实DOM到虚拟DOM？涉及到Vue中的模板编译原理，主要过程：将模板转换成ast树，ast用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）优化树将ast树生成代码为什么Vue采用异步渲染？Vue是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue会在本轮数据更新后，在异步更新视图。核心思想nextTick。为什么Vue组件中的data必须是一个函数？对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data也会被修改。而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，则不会出现这个问题。MVC和MVVM的区别？MVCmvc全名是Model View Controller，是模型-视图-控制器的缩写，一种软件设计典范Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）：是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，mvc的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话就是在Controller里面把Model的数据赋值给View。MVVMmvvm新增了vm类ViewModel层：做了两件事达到了数据的双向绑定，将模型转化成视图，即将后端传递额数据转化成所看到的页面。实现的方式是：数据绑定。将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。mvvm与mvc的最大区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作DOM元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？不会立即同步执行重新渲染。Vue实现响应式并不是数据发生变化后DOM立即变化，而是按一定的策略进行DOM的更新。Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。Vue的优点轻量级框架，只关注视图层，是一个构建数据的视图集合简单易学双向数据绑定组件化视图、数据、结构分离，使数据的更改更为简单虚拟DOM运行速度更快nextTick是什么？Vue实现响应式并不是在数据发生变化后立即更新DOM，使用nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用则可以在回调中获取更新后的DOM。Vue的生命周期beforeCreate：实例初始化之后，数据观测之前调用created：实例创建完成之后调用beforeMount：挂载之前调用mounted：挂载完成调用beforeUpdate：数据更新之前调用updated：数据更新之后调用beforeDestroy：实例销毁之前调用destroyed：实例销毁之后调用v-if和v-show的共同点和不同点？共同点：都能控制元素的显示和隐藏。不同点：v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过display:none来控制元素的显示和隐藏。如何让CSS只在当前组件中起作用？在组件中的style标签中加上scoped<keep-alive></keep-alive>的作用是什么？keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。Vue中常用的指令和它的用法v-model 双向数据绑定v-for 循环v-if v-show 显示与隐藏v-on 绑定事件v-once 只绑定一次vue-loader是什么？ 使用它的用途有哪些？vue文件的一个解析器，将template、js、style转换成js模块。用途：js可以写生es6，style样式可以scss或less，template可以加jade等。v-model的使用v-model用于表单数据的双向绑定，其实它就是一个语法糖，背后做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件。分别简述computed和watch的使用场景computed：当一个属性受多个属性影响的时候就需要用到computed。watch：当一条数据影响多条数据的时候就需要用watch。v-on可以监听多个方法吗？可以，用{}对象的写法。渐进式框架的理解主张最少，可以根据不同的需求选择不同的层级。v-if和v-for的优先级v-if和v-for一起使用时，v-for比v-if的优先级更高，这意味着v-if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。Vue常用修饰符.stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（标签的默认行为）.capture 与事件冒泡的方向相反，事件捕获由外到内.self 只会触发自己范围内的事件，不包含子元素.once 指挥触发一次Vue的两个核心点数据驱动，组件系统数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看作全部是由组件书构成的。SPA首屏加载慢如何解决？安装动态懒加载所需插件，使用动态懒加载。使用CDN资源。axios的特点有哪些？支持Promise API可以拦截请求和响应转换请求数据和响应数据取消请求自动换成json封装Vue组件的过程？建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。准备好组件的数据输入。即分析好逻辑，定好props里面的数据，类型。准备好组件的数据输出。即根据组件逻辑，做好要暴漏出来的方法。params和query的区别query在浏览器中显示参数，params不显示参数。query刷新页面之后不会丢失数据。params刷新页面会丢失数据。Vue初始化页面闪动的问题在Vue初始化之前，由于div是不归Vue管的，所有在代码还没有解析的情况下会容易出现花屏现象。解决方案：在css里加上 [v-cloak] { display:none }，如果没有彻底解决问题，则在根元素加上加上 style="display:none"Vue更新数组是触发视图更新的方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()什么是Vue生命周期？ 有什么作用？每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这个用户在不同阶段添加自己代码的机会，方便用户做一些逻辑处理。$route和$router的区别$router是VueRouter的实例，在script标签中想要导航到不同的URL，使用$router.push方法等。$route为当前router跳转对象，里面可以获取到当前路由的各种参数信息。VueX有哪几种属性？有5中，分别是state、getter、mutation、action、modulestate：基本数据，数据源存放地getters：从基本数据派生出来的数据mutations：提交更改数据的方法，同步更新action：像一个装饰器，包裹mutations，实现数据的异步更新modules：模块化VueX