Vue方向:深度监听新旧值问题的解决方案以及$watch的使用

解决方案:利用计算属性

官方方案:观察Vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

既然watch无法在编译对象或数组时监听新旧值,那么我们可以先使用JSON.parse()来浅复制一遍data对象,然后在复制的对象上修改,完了重新赋值给该data对象,这样变化前后两个对象是完全不一样的,因为它们的引用地址完全不一样,Vue可以循着两个引用地址获得新旧两个值。

代码
代码

可以通过Vue是实例对象的$watch属性来监听

除了watch选项之外,你还可以使用命令的vm.$watch,通过Vue实例对象来监听数据。

代码

普通监听

可以通过实例对象调用$watch设置监听

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容