阶段八-vue高频面试题

246 阅读7分钟

待补充: 1vue2和vue3的区别是什么 2为什么选用vue 3vue 跨域方式

一、vue中的v-show和v-if是做什么用的,两者区别是什么

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下, v-show 就简单得多一些,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

二:v-model是什么?怎么使用? vue中标签怎么绑定事件?

一、v-model的使用
    可以实现双向绑定。 在input或者select或者文本域配合value使用

二、vue中的标签如何绑定事件

v-on:click   简写  @click

绑定事件:<input @click=doLog() />

在移动端click有300ms延迟的问题,解决这个问题可以引入fastClick

1>下载
	npm install fastclick
2>引入
	import FastClick from 'fastclick'
	FastClick.attach(document.body);
            

三:vue-loader是什么?使用它的用途有哪些?

一、项目打包

        npm run build  ---> index.html 

        开发的时候操作的都是 xxx.vue文件

        loader : 加载器

二、用途 : js可以写es6,style样式可以scss或less、template可以加jade等

四: css样式局部化style怎么实现?原理是什么?

一、让css只在当前组件生效 

    <style scoped>
   scoped原理:局部化加入了scoped,vue通过postcss给每个dom元素添加一个以data-开头的随机自定义属性实现的

二、scss、stylus

scss : 

        1.下载
                npm install sass-loader node-sass --save
        2.
                <style lang='scss' scoped>	

        3. scss 样式穿透

                父元素 /deep/ 子元素

stylus:

        1. 下载
                npm install stylus stylus-loader --save

        2. 
                <style lang='stylus' scoped>	

        3. stulus 样式穿透

                父元素 >>> 子元素
                

五:NextTick 是做什么的

说明:$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,
    在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

场景:需要在视图更新之后,基于新的视图进行操作

使用swiper
axios请求数据, 数据(图片)

六:Vue 组件 data 为什么必须是函数

不用脚手架 vue.js
new Vue({
        el:"#app",
        template:xxx
        data : {

        }
})

脚手架 组件 data 为什么必须是函数? 
因为 JS 本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象,那么每一个实例的 data 属性都是独立的,不会相互影响了。

七:对 keep-alive 的了解

1.keep-alive是什么?

	内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染dom。

2.说明

	keep-alive 它不会在dom树中渲染

3.使用场景,几乎和渲染有关系


4.多2个生命周期

	activated
	deactivated

八:vue 中 key 的作用

总结:key的作用主要是为了高效的更新虚拟dom

    1. 如果节点类型不同,直接干掉前面所有的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点

    2. 如果节点类型相同,则会重新设置节点的属性,从而实现节点的更新

九:Vue的双向数据绑定原理是什么?

总结:vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

1.为什么会多出这两个方法呢?

    因为vue是通过Object.defineProperty()来实现数据劫持的。

2.Object.defineProperty()是用来做什么的?

   它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set。

    Object.defineProperty(对象,属性,{
        get(){},
        set(){}
    })

十:在Vue中使用插件的步骤

1. 下载

        npm install xx

2. 引入

        import xx from 'xx'
        Vue.use(xx);

3. 配置

        <xx
                v-model='0'
                selecteid='0'
        >
        </xx>

秒杀倒计时插件: 

十一:watch和computed差异

computed : 计算属性

	1. 计算属性是由data中的已知值,得到一个新的值
	2. 性能不好
	3. 别人变化影响我自己

watch : 监听数据的变化

	1. 监听data中的数据
	2. 我的变化影响别人

十二:你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?

根据vue-cli脚手架规范,一个js文件,一个CSS文件。

在打包之前,

	1.代理的url
	2.build

		assetsPublicPath: './' 

十三:vue组件之间如何传值通信

1. 父组件 传值  子组件

	父组件:
		<Header :msg='msg'></Header>
	子组件:
		props:['msg']
		props:{
			msg:数据类型
		}
2. 子组件 传值  父组件

        子组件:
                this.$emit("自定义事件名称",要传的数据);
        
        父组件:
                <Header @childInput='getVal'></Header>
                methods:{
                        getVal(msg){
                                //msg就是,子组件传递的数据
                        }
                }

3. 兄弟组件之间的传值

	通过一个中转(bus)

	A兄弟传值:
		import bus from '@/common/bus'
		bus.$emit("toFooter",this.msg);

	B兄弟接收:
		import bus from '@/common/bus'
		bus.$on('toFooter',(data)=>{
			//data是this.msg数据
		})  
                    

十四:vue-cli项目中src目录每个文件夹和文件的用法?

src
        assets  	| 静态资源 (图片、js、css)
        components  | 非路由组件
        views       | 路由组件
        router      | 路由配置
        store       | vuex(仓库)
        App.vue     | 挂载的第一个组件
        main.js     | 全局的文件                     
        
        

十五:axios是什么?怎么使用?vue跨域请求接口代理方式?

1. axios是什么?怎么使用

	a> 下载
		npm install axios --save

	b> 引入(main.js)

		import axios from 'axios';
		Vue.prototype.axios = axios;

	c> 请求方式,以及传递参数

		axios.get('/api/login?userName=???&userPwd=???')

		axios.post('/api/login',{
			userName:??,
			userPwd:???
		})

2. 设置代理,请求接口(跨域)

        config/index.js

            proxyTable: {
                '/api':{
                target:"http://localhost:8080/",
                changeOrigin:true,
                pathRewrite:{
                    '^/api':'static/mock'
                }
                }
            },

        修改了webpack的配置,一定要重启一下服务           
        

十六:(待重写)实现登录功能的流程

  后台:nodejs+express+mysql

         cnpm intall express-generator@4 -g
         express --view=ejs server

  前台:vue-cli+axios


完成一个简单的登录功能         
        

十七:vue页面的生命周期?

beforeCreate
created

beforeMount
mounted

beforeUpdate
updated

beforeDestroy
destroyed


-----使用了 keep-alive 就会多2个生命周期:
        activated
        deactivated

二、生命周期的理解

总共分为:8个阶段

创建前/后:

        beforeCreate :vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

        created : vue实例的数据对象data有了,但是$el还是没有

载入前/后

        beforeMount : vue实例的$el和data都初始化了,但还是挂载之前为虚拟dom节点,data.msg还未替换。

        mounted :  vue实例挂载完成,data.msg成功渲染的


更新前/后

        当data变化时,会触发:beforeUpdate、updated

销毁前/后

        当销毁的时候,会触发:	beforeDestroy、destroyed


三、DOM 渲染在哪个周期中就已经完成 : mounted         
        
        

十八:单页面应用的优缺点

单页面的优点:

    1. 用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
    2. 前后端分离
    3. 页面效果会比较炫酷(比如切换页面内容时的转场动画)

单页面的缺点:

    1. 不利于seo
    2. 导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
    3. 初次加载时耗时多
    4. 页面复杂度提高很多      

十九:vue路由的两种模式,hash与history的区别

1.直观区别:

    hash模式url带#号,history模式不带#号。

2.深层区别:
     hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。
     如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,
     是个正常的url适合推广宣传功能也有区别,比如我们在开发app的时候有分享页面,
     那么这个分享出去的页面就是用vue或是react做的
   
     咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,
     所以要将#号去除那么就要使用history模式
     但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,
     会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,
     重定向到你的首页路由上就ok啦。

十九:路由的跳转方式

1. router-link 的 to

2. this.$router.xxx
    
	push()	  : history添加一个记录
	replave() : history不会记录上
	go() ==>正整数  或者  负数 
            

二十:routeroute 和 router 的区别

$router为vueRouter的实例,相当于一个全局路由对象,里面含有很多属性和子对象

$route相当于当前正在跳转的路由对象

二十二:怎么定义vue-router的动态路由

1.在router目录下的index.js文件中,对path属性加上/:id

2.怎么获取传过来的动态参数?

使用router对象的params.id
    

二十三:vue-router有哪几种导航钩子

  三种:

    一、全局导航钩子 (2个)

        beforeEach((to,from,next)=>{

        })

        afterEach((to,from)=>{

        })

    二、路由配置中的导航钩子

        beforeEnter((to,from,next)=>{

        })

    三、组件的钩子函数	

        beforeRouteEnter
        beforeRouteUpate
        beforeRouteLeave

*******
to : 即将要进入的目标路由对象
from :当前导航正要离开的路由
next() : 如果一切正常,则调用这个方法进入下一个钩子
next(false) : 去掉导航
next('/login') : 跳转到对应的路由
next(error)	:执行一个error实例

二十四:(待补充)为什么通过vuex的mutation修改state中的参数就不会报错,而直接更改state中的参数就会报错

   一、vuex配置的写法不同


1. 直接修改state数据:

	this.$store.state.变量 = 值

	问题:
		a>state修改不能追踪,调试不方便
		b>加入严格模式报错

2. mutations

二十五: 使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的实例,

    store 是如何实现注入的?

    store是怎么注入的?
Vue.use(Vuex) 方法执行的是 install 方法,它实现了 Vue 实例对象的 init 方法封装和注入,使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

二十六:vuex原理和属性的使用

    一、vuex原理

1. vuex其实是一个vue的插件,高度依赖vue.js
2. vue插件都需要一个install方法,
   install方法调用了applyMixin,该方法主要是在所有组件中的beforeCreate中注入了this.$store对象。
3. vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对象 Property set get 方法的代理劫持。

二、State、 Getter、Mutation 、Action、 Module

二十七:jQuery ,Vue 有什么不同

 答:jquery主要是玩dom操作的“神器“,强大的选择器,封装了好多好用的dom操作方法和如何获取ajax方法 例如:$.ajax()非常好用
    vue:主要用于数据驱动和组件化,很少操作dom,当然vue可能通过ref来选择一个dom或组件