Question

如何使用vue.js构造modal组件

Answer 1

其实以前也有一些用户跟我纠结过这个问题，他们觉得一定要在需要的时候创建这个组件才是符合他们思维的做法。在我看来，这是没有理解『状态驱动的界面』的一种表现。

传统的命令式 (Imperative) 的思维写出来的代码：

$('.open-modal').on('click', function () {
var modal = new Modal()
modal.$appendTo('body')
modal.open()
})

// 在 modal 内部还要处理关闭、销毁自身的逻辑

状态驱动的思维写出来的代码：

this.showModal = true

// 关掉
this.showModal = false

哪个干净，哪个容易理解、容易测试、容易维护？

从模板的角度来看：在父模板里直接写入 <modal> 标签，那么这个 modal 渲染的位置是清晰明确的，你看一眼父模板就知道，哦，这里可能会有个 modal，也就是说，你的模板描述了最终可能渲染出来的 DOM 结构。但命令式思维下异步添加的 modal，你看模板的时候是根本看不见的，你的模板和最终的 DOM 结构没有可靠的映射关系，因为你完全可能随手把 modal 插到任何地方。你觉得这两者哪个更容易维护？

题主可能会觉得总是渲染 <modal> 不太效率。官网示例里面的 modal 用的是 v-show，换成 v-if 就好了。v-if 和 v-show 的区别在于 v-if 是真正的 conditional rendering，如果初始状态是 false，它什么都不会干。

另外一个情况是，我们可能需要在一个嵌套了很多层的子组件里面触发 modal。这种情况下，你应该把 modal 放在根组件里面，然后从子组件触发一个事件上去。