关于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是没有缓存机制的(调用几次执行几次)