vue 面试题

最新推荐文章于 2024-07-19 10:16:01 发布

戒不掉的伤怀

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量273

点赞数 4

分类专栏：工作类文章标签： vue.js javascript

本文链接：https://blog.csdn.net/u013141712/article/details/115670481

版权

工作类专栏收录该内容

42 篇文章 2 订阅

订阅专栏

1，vue使用的是什么模式？请具体介绍一下这种模式 mvvm

model (模型层)     axios data vuex(state)

view (视图层)      template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

2，v-if和v-show有什么区别

v-if控制的是dom的销毁和创建
v-show只是控制dom的css中 display属性
触发的生命周期 v-if 显示：创建  挂载 隐藏：销毁
v-show显示隐藏不触发生命周期钩子函数

3，vue中常用的指令有哪些

V-text：主要用来更新textContent，可以等同于JS的text属性
V-html：双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
V-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
V-if：可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
V-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
V-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
V-on：主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。@
V-bind：用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
v-for：用v-for指令根据遍历数组来进行渲染
V-model：这个指令用于在表单上创建双向数据绑定
V-slot 插槽
V-pre：主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
V-cloak：这个指令是用来保持在元素上直到关联实例结束时进行编译。
V-once：v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

4，计算属性和实例方法有什么区别？

计算属性有缓存，实例方法没有缓存
计算属性调用时 total 不可以传参 实例方法调用时 total（）可以传参
computed/methods

5，事件你知道那些事件修饰符

答：.stop阻止事件冒泡
    .once只执行一次，一次性事件
	.self阻止事件冒泡和事件捕获
    .captrue事件捕获阶段触发
	.prevent阻止浏览器默认行为
	.native 触发原生事件

6，父子组件怎样实现通讯？

   答：父传子：props

            父组件：<mydiv :list='list'> </mydiv>
	        子组件：props[‘list’]

	  子传父：$emit

            子组件：this.$emit(‘子组件事件名’，参数)//打电话
            父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

7,vue有哪些插槽，如何使用

默认插槽：能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽：具有name属性的插槽 可以结合template标签的slot属性，定向给插槽传递内容
作用域插槽：插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
		  原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
		  slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。

8,vue中生命周期钩子函数有哪些，请写出语法

答： 创建前beforeCreate       创建后created（请求axios,但是没有dom可以操作）
	挂载前beforeMount        挂载后mounted（也可以请求axios）
	更新前beforeUpdate       更新后updated 
	销毁前beforeDestroy      销毁后destroyed 
	注：默认加载组件时候，会执行哪几个

9，vue实现双向数据绑定的原理是什么？

答：当一个vue实例创建后vue会便利data选项的属性，用object.defineProperty将他转化为getter或者setter，并且内部追踪相关依赖，在属性访问和修改时通知变化
每一个组件实例化都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时会通知watcher重新计算，从而使得它相关的组件的以更新
举例说明：
<body>
    <p id='p1'></p>
    <input type='text' id='input1' name='input1'>
</body>
<script>
    var p1 = document.getElementById('p1');
    var inpu1 = document.getElementById('input1');
    var obj = {
        name:'数据'
    }
    p1.innerHTML=obj.name
    inpu1.value=obj.name
    Object.defineProperty(obj,'name',{
        set:function(newdata){
            p1.innerHTML=newdata
            console.log('设置name')
        },
        get:function(newdata){
            console.log('获取name')
        }
    })
    input1.onchange=function(){
        obj.name=inpu1.value
    }
</script>

10，Vue项目性能优化?

代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
路由懒加载
Webpack打包压缩代码

11，什么情况会使用到vuex vuex有哪些核心的属性？

state => 基本数据 
getters => 从基本数据派生的数据 （Getter相当于vue中的computed计算属性）
mutations => 提交更改数据的方法，同步！ （commit）
actions => 像一个装饰器，包裹mutations，使之可以异步。 （dispath）
modules => 模块化Vuex

如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

戒不掉的伤怀

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 面试题

1，vue使用的是什么模式？请具体介绍一下这种模式 mvvmmodel (模型层) axios data vuex(state)view (视图层) template < template>< /template>viewmodel（传递者）是双向绑定实现的机制2，v-if和v-show有什么区别v-if控制的是dom的销毁和创建v-show只是控制dom的css中 display属性触发的生命周期 v-if 显示：创建挂载隐藏：销
复制链接

扫一扫