当前位置: 首页 > Web前端 > vue.js

vue面试题_0

时间:2023-03-31 19:55:53 vue.js

1.生命周期vue2和vue3生命周期的区别vue2beforedestroy,destroy对应vue3beforeUnmount,unmounted不要在option属性或者回调上使用箭头函数,比如created:()=>console.log(this.a)或vm.$watch('a',newValue=>this.myMethod())。因为箭头函数没有this,所以this会作为变量向上层词法作用域查找,直到找到为止,这往往会导致UncaughtTypeError:Cannotreadpropertyofundefined或者UncaughtTypeError:this.myMethodis等错误不是一个功能。2.组件第一次渲染时,执行哪个生命周期beforecreate,created,beforemount,mounted,如果有keep-alive,添加activated3.组件缓存keep-alive当同一个组件再次进入时,组件会被缓存,只会执行一个life循环:activated用包裹组件四、v-if和v-showv-if的区别:dom节点的创建和删除,非常消耗性能v-show:display:block/none,控制显示和隐藏。不占用空间会导致重绘和回流,比v-if消耗的性能少。5、v-if和v-for的优先级:v-for的优先级高在源码中体现:functiongetElement6、什么是ref获取dom节点mounted(){console.log(this.$refs.abd);}this.$ref.childComponent.show()//调用子组件的show方法七、什么是nextTick获取更新的dom使用场景:(1)在nextTick中调用插件防止数据变化。dom更新后,插件还没有更新到最新的dom。(2)dom节点的数据发生变化后,需要获取dom内容,需要使用nextTick。8、scoped原理style只在本组件生效,原理:给节点添加一个自定义属性,然后根据属性选择器添加stylescss样式穿透:父元素/深层/子元素,如下:9.父子组件传值:自定义属性,props接收子组件传给父组件:$emit自定义事件,通过事件参数传值,兄弟组件:(1)vue2bus.jsimportVuefrom'vue';exportdefaultnewVueAcomponentimportbusfrom'./bus.js'bus.$emit("transfer","params")Bcomponentimportbusfrom'./bus.js'bus.$on("transfer",(data)=>{console.log(data)})(2)vue3installmittnpminstall--savemittmitt.jsimportmittfrom'mitt'exportdefaultnewmitt()一个组件importmittfrom'../common/bus'mitt.emit("transferValue",this.msg)B组件从'../common/bus'mitt.on("transferValue",(data)=>{this.msg=data})provide-inject组件之间的数据穿透A组件:provide(){return{webName:this.teacher}},B组件:inject:['webName']如果要provide传递的数据到change,接收组件的数据随之变化,有两种方式:(1),将基本数据类型更改为引用数据类型(2),使用computed属性import{computed}from'@vue/reactivity'provide(){return{webName:computed(()=>{this.teacher})}},main.jsapp.config.unwrapInjectedRef=true十、computed、watch、methodscomputed的区别:有缓存,计算变化某个属性的,如果某个值有变化,就会监听到并返回给methods:nocachewatch:只有监听到当前数据才会执行内部代码。11.搭建后台目录npminstallexpress-generator-g进入项目->express--view=ejsservercdservercnpminpmstart12.解决跨域请求问题Vue2配置module.exports{devServer:{proxy:'localhost:3000'}}vue.config.js中vite.config.js中的Vue3devServer.proxy选项要配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],server:{proxy:{'/home':'http://localhost:3001/',}}})十三、如何解决打包时出现空白页的问题。十四、路由1、路由模式历史,不带“#”,使用H5新增的pushState()方法有一个带“#”的hash,路由由路径中的hash值控制。默认是hash方式打包页面。空白页的问题可以通过将history改成hash来解决。(to,from,next)=>{constroute={name:'user'};returnroute})3.$route和$router的区别$route路由信息对象$router路由实例对象十五、props和data、谁的优先级高props=>methods=>data=>computed=>watch十六、vuex1、vuex有哪些属性2、vuex是单向数据流还是双向数据流3、mutations的区别andactions4、如果做持久化存储17.打包遇到困难,刷新后出现空白页,页面路径问题18.Slot(一)基本使用:子组件使用占用空间,父组件call使用子组件时,将里面的内容放在(2)作用域:使用父组件的作用域(3)槽的备份内容:子组件使用content(4)命名槽子组件:

header
main
footer
父组件/简写/slot:#社区帖子
厚泽人是一个提倡交友、分享、自由的技术交流社区Backup大家都在支持第十八、全局组件注册main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importCardfrom'./provide-inject/Card.vue'//注册全局组件constapp=createApp(App);app.component('Card',Card);app.mount('#app')不是在其他组件中需要导入注册,直接使用即可十九、动态组件Twenty,异步组件,使用函数导入组件二十一、mixin,提取组件公共逻辑common.jsexportdefault{data(){return{commonData:'Public数据'}},方法:{commonMethod(){console.log('publicmethod');}}}componetA.vue//在A组件中直接引用mixin文件,在mixins中注册,就可以直接使用mixin中的方法和变量minxin可以注册多个,如果有同名的方法或变量,后面注册的会覆盖前面二十个-二。自定义指令directives:{focus:{//插入指令的定义:function(el){alert(el.value)el.focus()}}},data(){return{}}二十三、为什么data必须是函数一个组件可能被多个组件调用,如果data是对象,修改组件的值即可,thisvalue在所有的调用者中都会改变,变量污染的本质是因为对象是引用类型。data成为函数的返回值,那么每次调用组件时,都会调用data函数,这样就不会影响到其他组件