今天实现了编辑功能时,碰到了一个bug卡了还蛮久的。
当点击编辑按钮时,需要进入子页面,子页面需要呈现的是已有的数据并且实现更改功能,已有数据通过路由参数直接发给发表页面,此时,将发表页面的数据更替为路由参数中的数据即可,但是由于子页面使用了富文本编辑器这个子组件,所以需要通过props将content内容数据传递给富文本编辑器组件。富文本编辑器组件使用props接收后,必须使用监视属性来监视props的变化,因为只有监视到数据变化后,才可以做出相应的操作。我使用的富文本编辑器文档中写明了当使用editor.txt.html(),并往括号中放入数据时,就可以实现对富文本编辑器初始化文本的效果。所以监视到数据变化后,调用editor.txt.html()方法。此时问题出现了。
当实现完这些逻辑后,我发现页面上并没有出现我想要的效果,于是在watch监视属性中做了一次打印,果然,刷新页面,控制台并没有打印,所以肯定是监视属性并没有监测到props值的变化。想了一下,立马得出结论,这是因为富文本编辑器组件和编辑功能页面同时加载的缘故,当页面加载时,立即将content通过props传递给了我的富文本编辑器组件,所以此时我的watch监视属性自然监视不到我的props变化。那怎么办呢?
其实很好解决。只需要给监视属性打开立即监视配置即可,即页面一加载,就执行一次watch中的handler函数。好,第二个问题出现了。打开页面,发现:
想了一会儿,明白原来这是因为当我页面立即监视时,需要做的操作是对this.editor进行操作,但此时我的editor的初始值为null,富文本编辑器是在mounted阶段创建,此时还未创建,所以调用它的txt方法根本是行不通的。那怎么办呢?想了快一个小时,想到了!
因为对this.editor的操作是依赖于this.editor存在的,所以必须要将this.editor先创建,那怎么让他先创建呢,于是我想到了Vue的一个不经常使用的生命周期函数,nextTick,这个函数呢,调用时会执行一个回调,里面的回调函数会等到页面数据发生更新后再执行回调中的语句,那么当我this.editor创建完毕后,再执行的功能就会完美实现,打开页面,发现了我想要的结果。