vue2 中容易被忽略的一些属性总结
纷羽's blog 2020-10-14
# vue2 中容易被忽略的一些属性总结
# compute setter getter
在我们日常对compute的使用中,通常只是使用了类似于Object中getter的功能,但是他同时也是支持setter功能的
...
computed: {
xxx: {
get() {
return xxx
},
set(val) {
...
}
}
}
...
# watch 的 immediate 属性
这个属性会让watch的handel函数在初始时也被执行一次
# provide 和 inject
这两个属性一般在制作组件和组件库时候特别好用
provide用于向自己的所有子孙节点共享静态变量和函数,inject用于接收
例如当一个节点接收到tabWidth,且tabWidth是一个静态量,那么就可以通过下面这段代码共享tabWidth这个属性
...
provide: function() {
return {
tabWidth: this.tabWidth
}
}
...
...
inject: ['tabWidth'],
...
但是上面的代码具有一个问题,tabWidth不怎么具备可修改行,父组件的tabWidth变更时候,子组件相关变化不会被触发,这个同样是因为Vue的响应原理造成的,如果tabWidth是个可变量,我们可以通过下面这样的代码解决。
...
provide: function() {
return {
tabWidth: function() {
return this.tabWidth
}
}
}
...
...
inject: ['tabWidth'],
computed: {
injectTabWidth: function() {
return this.tabWidth()
}
},
...