对props的双向绑定

本节目标：理解“对props的双向绑定”的核心思路，并能把它用于实际开发或面试表达。 双向绑定也就是v-model的值必须是以下值之一：

• reactive值;
• ref值;
• 有get和set方法的计算属性；计算属性的依赖基不能由props，否则我们在set方法中就必须修改props值，这与props单身流动相冲突；但如果这个值确实和props值相关，我们应该是由props直接在create阶段计算得到一个reactive或ref值，这个计算属性get中的依赖值是这个reactive或ref值。
• 总之就是一个可以修改的响应式值；

Props的值有时我们不止是用于展示，我们还想对它进行修改； 比如在表单元素中；

如果props的某个属性值是对象或数组类型； 我们在组件中想修改它的元素；

如果将props.propsName直接进行赋值，vue会提示不许可，保持props的单向流动； 但如果我们只是修改propName这个对象的属性，vue目前是许可的，但并不推荐，除非它们是强耦合的；

数组 如果属性值是一个数组，我们要对数组进行增删改；

• 这个时候，应该根据属性值返回一个新数组，注意不是通过计算属性实现；
• 根据属性值得到的计算属性是无法修改的，没法双向绑定；
• 以这个新数组为初始值，定义一个state或ref值，这样，我们就可以对这个值进行修改了，并做到双向绑定；
• 并且不会修改props原数组；但如果数组的元素是一个对象，我们修改它的属性值，也会间接影响到原props数组；
• 如果props数组发生改变，由于不是响应式的，由props创建新数组的过程只在setup中发生，props变化时不会发生，所以我们state或ref的值并不再受props影响；
• 接下来，我们对计算得来的State或ref值进行双向绑定，或者进一步，可根据需要，由state或ref得到一个计算属性，对这个计算属性进行双向绑定；
• 总结来说就是，props直接计算一个State或ref值，对这个值进行双向绑定；或由这个计算出的state或ref值得出一个计算属性，对这个计算属性进行双向绑定；

这就是官网说的，由根据props定义一个计算属性； 所不同的时，如果是计算属性，props变化，计算属性值也会变化； 并且，我们无法对这个计算属性值进行修改；从而也不会修改props，但这无法满足业务中对props值要进行修改的场景；