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对象的深拷贝
                    vue中的双向绑定，在单页面中使用起来非常便利，表单数据和对象保持数据一致，但是在某些应用场景下，比如弹窗，我们需要取消双向绑定功能，否则会出现，当我们修改弹窗数据的时候，父页面的数据同步修改的现象，本文主要介绍如何取消双向绑定。通过 prop 传递数据	&lt;ChildDialog      ref="childDialog"      :dialog-conditions-visi...
在开发过程中，我想要的结果是，一个表格和数据data数组绑定，将data中的数据依次遍历渲染到表格。
而data的数据是通过另一个this.formValidate 来push，代码如下
            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Auth
				
Vue实现双向数据绑定的方式，具体内容如下
Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。
实现对象属性变化绑定到UI
大概的思路是： 
1. 确定绑定的数据，使用Object.defineProperty()对其数据变化进行监听（对应defineGetAndSet） 
2. 一旦数据发生改动，会触发setter函数。因此在setter函数内要调用回调函数触发绑定元素的更新。 
3. 绑定元素的更新就是遍历所有
手动给dom重构 解决；
暂时得出的结论是： 时间选择器双向绑定赋值在没有初始值的情况下 赋值之后需要手动更新dom（ps:正常情况下没有初始值的情况下可使用$set手动绑定）；
				
出现问题的场景是有一个对话框，框中有个表单，对话框每次关闭的时候需要把表单内容重置，
但是直接这样写会有问题，那就是直接给params赋值会使它失去响应式
已经可以看到问题了，明明输入框有内容，但还是提示无内容，就是因为params已经失去了响应式，页面无法更新，有两个解决办法
一、用reactive包裹，赋予它响应式
    问题解决：
二、直接调用elementui表格的 .resetFields() 方法
    要先绑定form表单
    同样问题解决
				
Vue是典型的MVVM模型的前端框架，但是有的时候，我们并希望某个数据在某种情况能解除掉数据双向绑定：
let obj = JSON.parse(JSON.stringify(data));
将对象转为json字符串之后再转对象就能解除掉数据的双向绑定
				
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理;
从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向；
本项目依次实现了下面的功能
1、自定义的vue类
2、模板解析 Compile 类
3、数据代理 Observer 类
4、管理器 Dep 类
5、订阅者 Watcher 类
希望对大家有一定的帮助
第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将..
				
如： this.list = this.list2,    结果在list改变后 list2也改变，这不是我们想要的效果
第一种：利用 JSON.parse 和 JSON.stringify
this.list= JSON.parse( JSON.stringify(this.list2) )
第二种：ES6 的解析语法
this.list= { …this.list2}
this.arr= […this.arr2]
————————————————
版权声明：本文为CSD
				
在 Vue3 中，可以使用 `v-model` 指令与 `ref` 来实现对数组的双向绑定。
我们可以通过创建一个 `ref` 对象，并将其绑定到 Vue 组件的数据上，在组件中使用 `v-for` 循环渲染数组，并将每个数组项的值与 `ref` 对象进行绑定，从而实现双向绑定。
下面是一个简单的示例代码：
<template>
    <div v-for="(item, index) in list" :key="index">
      <input type="text" v-model="list[index]" />
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const list = ref(['item1', 'item2', 'item3']);
    return {
      list,
</script>
在上面的示例中，我们创建了一个名为 `list` 的 `ref` 对象，并将其绑定到了 Vue 组件的数据上。然后，在模板中，我们使用 `v-for` 循环渲染数组，并将每个数组项的值与 `list` 对象进行了双向绑定。
通过这样的方式，当输入框中的值发生变化时，数组中对应的值也会随之改变，从而实现了对数组的双向绑定。