vue2面试题5|[2024-11-08]

关于API

问题1:$set

面试官:你有没有遇到过,数据更新但是试图没有更新的问题? ==> $set

使用:

this.$set(target, key, 修改后的值)

问题2:$nextTick

$nextTick返回的参数[函数],是一个异步的。功能:获取更新后的dom

源码|原理:

$nextTick( callback ){

        return Promise.resolve().then(() => {

                callback();

        })

}

注意:若是想在created等获取dom,只需要将其进行异步执行就可以了

问题3:$refs

用于获取dom的

问题4:$el

$el 获取当前组件的根节点

问题5:$data

$data 获取当前组件data数据

问题6:$children

$children 获取到当前组件的所有子组件的

返回值为一个数组,下标从0开始

问题7:$parent

$parent 找到当前组件的父组件,如果找不到就返回自身

问题8:$root

找到根组件

问题9:data定义数据

数据定义在data的return内和return外的区别:

1.return外:单纯修改这个数据是不可以修改的,因为没有被get/set

2.return内:是可以修改的

注意:在方法中先修改return内的值,紧接着修改return外的值,这样return外的值也能修改

问题10:computed计算属性

computed计算属性的结果值,可以修改吗?

        可以的,需要通过get/set写法

data(){
        return {
                str: 'abc'
        }
}
computed: {
        changeStr:{
                get(){
                        return this.str
                },
                set(val){
                        this.str = val
                }
        }
}
methods:{
        btn(){
                this.changeStr = 'xxxx'
        }
}

当组件v-model绑定的值是computed来的,那么可以修改吗?

        可以的,需要通过get/set写法

问题11:watch

watch是用于监听数据的改变的。

对于简单数据 (例如:str= 'abc')就可以使用一般的监听:

watch:{
    str(newValue, oldValue){
        console.log(newValue, oldValue)
    }
}

但是上面的方式,已进入页面页面不会触发watch,如果想一进入就触发需要采用下面的方式:【重点就是immediate:true】

watch:{
    str:{
        handler(newValue, oldValue){
            console.log(newValue, oldValue)
        },
        immediate:true
    }
}

对于引用数据类型,对象(例如-- obj:{a:1}),如果要进行监听,使用第一种是不能实现的,只能用下面这种,深层监视:

watch:{
    obj:{
        handler(newValue, oldValue){
            console.log(newValue, oldValue)
        },
        immediate:true,
        deep:true
    }
}

问题12:methods和computed区别

computed是有缓存机制的,methods是没有缓存机制的(调用几次执行几次)

上一篇:横向思维导图前端样式


下一篇:【RAG系列】KG-RAG 用最简单的方式将知识图谱引入RAG