vue 如何取消双向绑定

vue中的双向绑定，在单页面中使用起来非常便利，表单数据和对象保持数据一致，但是在某些应用场景下，比如弹窗，我们需要取消双向绑定功能，否则会出现，当我们修改弹窗数据的时候，父页面的数据同步修改的现象，本文主要介绍如何取消双向绑定。

通过 prop 传递数据

	<ChildDialog
      ref="childDialog"
      :dialog-conditions-visible="dialogVisible"
      :groups="formatGroups(form.groupList)"
    />
    ...
    formatGroups(groupList) {
      if (groupList !== undefined && groupList !== null) {
        // console.log('formatGroups', JSON.parse(JSON.stringify(groupList)))
        // 为什么不使用 [...groupList] ，深拷贝与浅拷贝
        // https://www.cnblogs.com/renbo/p/9563050.html
        return JSON.parse(JSON.stringify(groupList))
      } else {
        return []
      }
    }

如果使用 :groups="form.groupList"，那么在子组件中修改 groupList 的值时，会同时修改父页面中的数据。弹窗单击取消后，数据无法恢复。

• 传递对象
  obj = {...obj}
• 传递数组
  arr = [...arr]
• 返回数据
  对象 this.$set(this.form, name, value)
  数组 this.$set(this.list, index, obj)

采用上面的方法，一般情况下是可以实现的，但是遇到多级对象时，依然会被双向绑定，此时，需要用到对象深拷贝，详见：js对象的深拷贝