【vue】面试题总结 - 指令，属性，事件

最新推荐文章于 2024-05-13 19:08:18 发布

loyd3

最新推荐文章于 2024-05-13 19:08:18 发布

阅读量305

点赞数

分类专栏： vue开发实践总结文章标签： vue

本文链接：https://blog.csdn.net/loyd3/article/details/118102670

版权

vue开发实践总结专栏收录该内容

35 篇文章 1 订阅

订阅专栏

资源来自：https://developer.aliyun.com/ask/289308?spm=a2c6h.13066354.0.0.767533b5ZcyIwH

你知道v-model的原理吗？说说看

原生input其实只是一个语法糖，

:bind="value"

与

@change="value = $event.target.value"

的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

vue2.0不再支持v-html中使用过滤器了怎么办？

使用过滤器 Vue.filter
在method中定义方法

htmlFilter(htmlString){
	return htmlString.replace(/+s/g,'')
}

在vue中 v-html="htmlFilter(htmlString)"即可

你知道vue中key的原理吗？

作用的话，便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom，需要注意的是，key要唯一，不然会出现很隐蔽性的更新问题。

在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

可以同名，但data会覆盖methods。并且本就不该同名，同名说明你命名不规范。
然后解释为什么会覆盖，因为Props、data、methods、computed、watch都是在initState函数中被初始化的。
初始化顺序就是我上面给出的顺序，本质上这些都是要挂载到this上面的，你如果重名的话，
后面出现的属性自然而然会覆盖之前挂载的属性了。如果你的eslint配置比较严格的话，同名是编译不通过的

vue中怎么重置data？

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。

Object.assign(this.$data, this.$options.data())

watch的属性用箭头函数定义结果会怎么样？

不应该使用箭头函数来定义 watch 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。
理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

你知道style加scoped属性的用途和原理吗？

用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式
这里给大家排个坑，这里虽然设置了scoped 如果我们使用bootstrap的话，因为bootstrap是设置的全局属性，可能会有冲突，

vue的属性名称与method的方法名称一样时会发生什么问题？

报错 “Method ‘xxx’ has already been defined as a data property”
键名优先级：props > data > methods

vue变量名如果以`_、$`开头的属性会发生什么问题？怎么访问到它们的值？

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

1、会先判断是否有iterator接口，如果有循环执行next()方法
2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致
3、保证对象的输出顺序可以把对象放在数组中，作为数组的元素

v-once的使用场景有哪些？

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

说说你对vue的表单修饰符.lazy的理解

v-model默认的触发条件是input事件,加了.lazy修饰符之后,v-model会在change事件触发的时候去监听

`<template></template>`有什么用？

当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰。

vue的is这个特性你有用过吗？主要用在哪些方面？

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题 <ul> <li is='my-component'></li></ul>

vue的:class和:style有几种表示方式？

:class 绑定变量绑定对象绑定一个数组绑定三元表达式
:style 绑定变量绑定对象绑定函数返回值绑定三元表达式

prop验证的type类型有哪几种？

8种：String、Number、Boolean、Array、Object、Date、Function、Symbol

prop是怎么做验证的？可以设置默认值吗？

单个类型就用Number等基础类型，多个类型用数组，必填的话设置require为true，默认值的话设置default，对象和数组设置默认用工厂函数，自定义验证函数validator。

说说你对v-clock和v-pre指令的理解

v-cloak指令只是在标签中加入一个v-cloak自定义属性，在HTML还编译完成之后该属性会被删除。
v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。

写出你知道的表单修饰符和事件修饰符

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim

写出你常用的指令有哪些？

@ : v-once v-pre v-clock v-for v-html v-text v-model

手写一个自定义指令及写出如何调用

全局自定义指令 Vue.directive('test',(el,binding,vnode)=>{ 业务逻辑 })
局部指令 directives:{ test(el,binding,vnode){ 业务逻辑 } } 调用，都是v-test

v-on可以绑定多个方法吗？

可以例如 input 的聚焦失焦事件绑定各自的方法, 是不是可以这样理解

<input v-model="msg" type="text"
 v-on="{
input:a,
focus:b
}"/>

v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素

分别说说vue能监听到数组或对象变化的场景，还有哪些场景是监听不到的？无法监听时有什么解决方案？

无法监听时的方案：
数组：改变数组的值：this.$set()
改变数组长度：arr.splice()
对象：改变原有属性：Object.assign()
增加新属性：this.$set()
https://blog.csdn.net/qq_15509267/article/details/88086810

为什么data属性必须声明为返回一个初始数据对应的函数呢？

对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；
而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。

怎么在watch监听开始之后立即被调用？

  let vm=new Vue({
        el:"#first",
        data:{msg:'liuneng'},
        watch:{

            msg:{
                handler (newMsg,oldMsg){
                    console.log(newMsg);
                },
                immediate:true
            }
        }
    })

设置immediate属性为true

watch怎么深度监听对象变化

deep设置为true 就可以监听到对象的变化
let vm=new Vue({
el:"#first",
data:{msg:{name:‘北京’}},
watch:{

    msg:{
        handler (newMsg,oldMsg){
            console.log(newMsg);
        },
        immediate:true,
        deep:true
    }
}

})

watch和计算属性有什么区别？

1.一个是侦听属性，一个是计算属性
2.一个是为了应对复杂的逻辑计算，一个是对数据的变化作出反应
3.一个是只有当缓存改变时才执行，一个是只要从新渲染就会执行
4.一个有缓存，一个没有缓存

vue如何监听键盘事件？

@keyup. 方法

<template>
  <input ref="myInput" type="text" value="hello world" autofocus @keyup.enter="handleKey">
</template>

<script>
  export default {
    methods: {
      handleKey(e) {
        console.log(e)
      }
    }
  }
</script>

2. addEventListener

<script>
  export default {
    mounted() {
      document.addEventListener('keyup', this.handleKey)
    },
    beforeDestroy() {
      document.removeEventListener('keyup', this.handleKey)
    },
    methods: {
      handleKey(e) {
        console.log(e)
      }
    }
  }
</script>

说下`$attrs`和`$listeners`的使用场景

一般我对一些UI库进行二次封装用，比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候$attrs和$listners是个完美的解决方案。
简单的例子，对el-button二次封装

<template>
    <el-button v-on="$listeners" v-bind="$attrs" :loading="loading" @click="myClick">
        <slot></slot>
    </el-button>
</template>

<script>
export default {
    name: 'mButton',
    inheritAttrs: false,
    props: {
        debounce: {
            type: [Boolean, Number]
        }
    },
    data() {
        return {
            timer: 0,
            loading: false
        }
    },
    methods: {
        myClick() {
            if (!this.debounce) return
            this.loading = true
            clearTimeout(this.timer)
            this.timer = setTimeout(
                () => {
                    this.loading = false
                },
                typeof this.debounce === 'boolean' ? 500 : this.debounce
            )
        }
    }
}
</script>

在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。

在vue项目中如果methods的方法用箭头函数定义结果会怎么样？

因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例，所以 this 是undefind

怎么给vue定义全局的方法？

第一种：挂载到Vue的prototype上。把全局方法写到一个文件里面，然后for循环挂载到Vue的prototype上，缺点是调用这个方法的时候没有提示

 Object.keys(tools).forEach(key => {
      Vue.prototype[key] = tools[key]
 })

第二种：利用全局混入mixin，因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

Vue.mixin(mixin)
new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

还有一种：通过插件Vue.use(plugin)；

loyd3

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue】面试题总结 - 指令，属性，事件

你知道v-model的原理吗？说说看原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。自定义组件的时候的v-model默认监听change事件和绑定value 的prop。vue2.0不再支持v-html中使用过滤器了怎么办？使用过滤器 Vue.filter在method中定义方法htmlFilter(htmlString){return htmlString.replace(/+s/g,
复制链接

扫一扫