但为了保证MutationObserver可以在所有浏览器上正常工作,我们仍然引入了这个API的polyfill,详情可见这里。
在此能力的前提下,我们就可以在任意的DOM操作下触发Vue进行重新解析指令。
我们将 MutationObserver 封装进一个 Vue mixin , 非Vue应用的业务代码只需要引入这个mixin,这样也可以很好地解耦。
详细的实现原理可以见以下伪代码:
let observer; export default { ready() { // 开启监听 observer = new MutationObserver(mutations => { this.$compile(this.$el); }); observer.observe(this.$el, config); }, destroyed() { // 清理工作 observer.disconnect(); observer.takeRecords(); } }