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}
}