VUE3 父子组件数据双向同步方法 ——有点神奇的新方法

前言

今天在封装一个组件时，意外发现一个使父子组件数据双向同步的一种新方法，不使用emit的方法就可以使prop传入的对象form达到父子组件数据同步。话不多说，先看例子：

子组件代码

父组件代码

运行效果

解析

经过测试发现，必须在子组件中使用immediate:true后才能实现 父子组件的form数据同步， 而且经过打印发现，除了第一次数据监听，后续赋值时可发现 localForm.value === newVal 为true意味着两个对象共享一个内存，那么可以理解在使用immediate:true时，子组件在watch赋值时，可以达到父子组件中prop对应的这个对象指向一个内存，从而实现数据同步。

总结

vue中的prop设计是单向数据流的设计理念，但是有时候我们在封装组件时特别是复杂的组件，传入的prop也是个复杂的对象而且想要达到数据双向绑定的效果时，常用的做法是使用emit(‘update:form’)这种方式。现在这种使用watch的方式，相对简单一些。不过，不知道有没有什么其他问题产生？

最后也想问一下观看文章的人，能不能阐述一下原理，或者vue源码中是否有答案？

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享