vuejs render何时执行?以及使用vue.$refs遇到的坑。

vue框架什么时候处理computed属性的?

  • beforeCreatecreated两个生命周期之间,初始化以及挂载computed里面的属性,就是说在created钩子里面时候,可以通过this,来访问计算属性了。
  • computed属性的获取就是用到的时候,才去获取。

render属性的首次执行是在beforeMountmounted两个生命周期之间。

某些情况下我们在 mounted 中无法正确的获取到 this.$refs.xxx的dom节点,原因很有可能是犯了一个不容易察觉到的错误:

如下图:

图1 是rendenr方法,然后图二是一个自定义方法,图3中调用了图2所有的的方法去获取图1中的虚拟dom

咋一看去,好像没什么问题哦。不过,实际上问题就出现在jsx中的代码,用了if类的判断。

经过测试,去掉?:或者if判断,能够正常获取节点。

解决办法:

在mounted 生命周期中,如果要使用refs获取节点,我们尽量要在vue.$nextTick回调方法中调用。

修改为如下

this.$nextTick(()=>{

this.componentDidMount(prop)

})

 

问题解决。

 

然后再复习下vue生命周期:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

vue在条件转换或者路由切换后,如果不做keep-alive的话,都会自动销毁,

vue总会默默的把不需要的组件给销毁,使用v-show 隐藏不会销毁,但if会

发表评论

记录工作生活点滴。

返回
顶部