![Vue.js从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/987/44509987/b_44509987.jpg)
上QQ阅读APP看书,第一时间看更新
5.2.3 与传统事件绑定的区别
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P94_13028.jpg?sign=1734421256-FuTw5inZNHQ94UElBhrlE7bOMVt3zNEF-0-8790eb3a56b70b4781ab5a8838dc1b70)
与传统事件绑定的区别有如下几点。
(1)无须手动管理事件。ViewModel被销毁时,所有的事件处理器都会自动被删除,重新获取DOM绑定事件,然后在特定情况下解绑,最后解脱出来。
(2)解耦。ViewModel代码是纯粹的逻辑代码,和DOM无关,有利于将代码逻辑写成自动化测试用例。
(3)Vue.extend()。为了重复使用子组件,Vue.js提供了Vue.extend(options)方法创建基础Vue构造器的“子类”,参数options对象和直接声明Vue实例参数对象基本一致。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P94_53240.jpg?sign=1734421256-fo6AENSuolEljhd9kVNvI0QWjPhwZ7fa-0-606ff34a44e18f0bcf4c91dd2ee7ae2e)
运行效果如图5-12所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P94_13008.jpg?sign=1734421256-ypmfBfKnsODCT8vZGANojxTZxRrl40zW-0-3b95bc04e7e2b1858e8c02fe5a4afdbc)
图5-12 与传统事件绑定的区别运行效果