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是没有缓存机制的（调用几次执行几次）

原文地址：https://blog.csdn.net/m0_49474690/article/details/143626947

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！