本文会持续更新，直到找到工作为止。将在工作时更新。文章中可能存在一些错误或不理解之处。请指出，我会及时更正。vue面试题生命周期函数什么是vue生命周期生命周期是指vue实例从创建到销毁的过程。vue生命周期的作用。生命周期不同阶段对应的不同钩子函数，可以实现组件数据管理和DOM渲染。beforeCreate、created、beforeMount、mountedcreated和mounted将在第一个页面加载时触发哪些钩子。已经初始化了，但是还没有附加到$elmounted，render已经执行，数据已经绑定，DOMvue在哪个周期获取创建的数据可以成功获取，因为此时已经创建了vue实例，Elementvueroutingmvvmframework还没有渲染它是什么，也就是model-view-viewModelvue-router是什么？有哪些组成部分？Vue-router是Vue官方发布的路由库。其组件包括：用于路由跳转，使用该组件进行路由跳转，页面会部分加??载而不是刷新页面子路由退出被该组件包裹的组件会保持被包含的组件状态，避免重新渲染。哪个组件是activa-class的属性？activa-class是的一个属性，用来标识激活路由的类如何定义vue-router的动态路由呢？如何获取传递的值？'路由器/：id'。获取路由参数：通过URL传递的参数('router/login?username=abc')，通过动态路由传递的this.$route.query参数({path:'router/news/:id'}'router/news/12'),this.$route.paramsvue-router有什么样的导航钩子？导航钩子主要分为三部分，全局钩子、路由钩子和组件钩子。全局钩子有3个全局预钩子(beforeEach)constrouter=newVueRouter({});router.beforeEach((to,from,next)=>{//todosomething})当导航触发时，全局beforeEachSet守卫将按创建顺序调用。守卫是异步解决的。这个时候导航就等着把守卫都解决了。每个守卫接受3个参数：to:route:即将进入的目标路由对象from:route:导航即将离开的路由next:功能：解析这个hook必须执行该方法。执行效果取决于next方法的调用参数。next()：执行管道中的下一个钩子。如果所有钩子都执行完，导航状态为确认（confirmed）next(false):中断当前导航，如果浏览器的URL发生改变（可能是手动或者通过浏览器的后退按钮），那么URL地址会被重置到与from路由对应的地址。next(error)：如果传递给next的参数是一个Error实例，导航将终止，错误将传递给router.onError()注册的回调next('/')或next({path:'/'}):跳转到不同的地址。当前导航被中断并开始新的导航。您可以将任意位置对象传递给next()，并允许在router-link或router.push中传递选项GlobalResolveHook在2.5.0+中，您可以使用router.beforeResolve注册一个全局守卫。这类似于router.beforeEach，除了在确认导航之前调用resolveguards，并且在解析所有组件内的guards和异步路由组件之后。globalpost-hookrouter.afterEach((to,from)=>{//todosomething})路由和路由器的区别Router是VueRouter的一个实例，一个全局的路由对象，包括路由跳转的方法，hook函数等待。route是一个路由信息对象。每条路由都会有一个route对象，它是一个本地对象，包括path、params、hash、query、fullPath、matched、name等路由信息。Vue-router使用两个选项响应路由参数更改watchwatch：{$route(to,from){//dotosomething}}组件中的导航挂钩beforeRouteUpdatebeforeRouteUpdate(to,from,next){//todosomething}vue-Router通过prop传递参与$route耦合，$route耦合constUser={template:'User{{$route.params.id}}
'}通过propconstUser={props:['id'],template:'User{{id}}
'};constrouter=newVueRouter({routers:[{path:'/user/:id',component:User,props:true}],})布尔模式：如果props设置为true，route.params将设置为组件道具。对象模式：如果props是一个对象，它将按原样设置为组件属性。当道具是静态的时候很有用。函数模式：你可以创建一个返回props的函数。通过这种方式，可以将参数转换为另一种类型，将静态值与基于路由的值结合等。vue-router的两种模式hash原理是onhashchange事件，可以在window对象上监听。History使用HTML5History接口中新增的pushState()和replaceState()方法vue-router实现了路由的懒加载constrouter=newVueRouter({routes:[{path:'/foo',component:import('./Foo.vue')},],})Vue常见问题Vue父组件给子组件传递数据通过prop给子组件传值prop就是可以在组件上注册一些自定义属性。当一个值被传递给一个prop属性时，它就成为组件实例的一个属性。Vue.component('blog-post',{props:['title'],template:'{{title}}
'});通过slots分发内容通过ref$ref可以直接访问标签this.$refs上设置的ref数据子组件实例。usernameInput子组件将事件传递给父组件并使用事件抛出一个值Vue.component('blog-post',{method:{sendValue:()=>{this.$emit('custom-event-name',value)},}})使用v-model要使用v-model，首先需要了解v-模型。等价于：其实v-modal就是v-bind:value和v-on:input的糖语法。当用在自定义组件上时，v-model会像这样：为了让它正常工作，我们需要在输入这个组件：Vue.component('custom-input',{props:['value'],template:``});将它的valuearrtribute绑定到一个名为value的prop上，当它的input事件被触发时，通过自定义的input事件把新的value抛给v-show和v-if的共同点和不同点这两个命令都可以隐藏元素或者组件，不同的是设置v-show="false"的元素（组件）仍然会被渲染，设置display=none即可。v-if="false"的元素（组件）将不会被渲染。如何让css只作用于当前组件？设置scoped后，父组件如何影响子组件的样式使用>>>ordeep.gHeader/deep/.name{}//or.gHeader>>>.name{}
