如图，由于vue数据的双向绑定，给waterSetInfo拼接单位的时候，会将res.data也进行赋值，导致waterSet里面的记过不对解决方案：深拷贝的方法：JSON暴力转换 解构赋值this.waterMarkSet = JSON.parse(JSON.stringify(res.data.data));...
Vue
实现双向
数据
绑定的方式，具体内容如下
Vue
是如何实现双向
数据
绑定的呢？答案是
前端
数据
劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到
数据
的变化，从而更新绑定的元素的值。
实现对象属性变化绑定到UI
大概的思路是：
1. 确定绑定的
数据
，使用Object.defineProperty()对其
数据
变化进行监听（对应defineGetAndSet）
2. 一旦
数据
发生改动，会触发setter函数。因此在setter函数内要调用回调函数触发绑定元素的更新。
3. 绑定元素的更新就是遍历所有
vue
中的
双向绑定
，在单页面中使用起来非常便利，表单
数据
和对象保持
数据
一致，但是在某些应用场景下，比如弹窗，我们需要
取消
双向绑定
功能，否则会出现，当我们修改弹窗
数据
的时候，父页面的
数据
同步修改的现象，本文主要介绍如何
取消
双向绑定
。
通过 prop 传递
数据
<ChildDialog
ref="childDialog"
:dialog-conditions-visi...
Vue
是典型的MVVM模型的
前端
框架，但是有的时候，我们并希望某个
数据
在某种情况能解除掉
数据
双向绑定
：
let obj = JSON.parse(JSON.stringify(data));
将对象转为json字符串之后再转对象就能解除掉
数据
的
双向绑定
第一步：需要observer的
数据
对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值
赋值
，就会触发setter，那么就能监听到了
数据
变化
第二步：compile解析模板指令，将模板中的变量替换成
数据
，然后初始化渲染页面视图，并将..
在
Vue
中，有一个特殊的选项 sync，可以用于绑定父组件的属性到子组件的 prop 上，并且在父组件的属性更新时同步更新到子组件上。
你可以使用 sync 特殊选项来替代
双向绑定
：
// 父组件<template>
<input v-model="message">
<my-component :message.syn...
在开发过程中，我想要的结果是，一个表格和
数据
data数组绑定，将data中的
数据
依次遍历渲染到表格。
而data的
数据
是通过另一个this.formValidate 来push，代码如下
this.formValidate.BookISBN = res.data.Data.ISBN
this.formValidate.BookName = res.data.Data.BookTitle
this.formValidate.Auth
Vue
3.0
数据
双向绑定
的核心方法是使用了 Reactive API 来实现。Reactive API 是一个新的响应式 API，它是
Vue
3.0 中的新特性。
在 Reactive API 中，我们可以使用一个新的函数 reactive() 来创建一个响应式对象。这个函数将以普通对象为参数，并返回一个新的响应式对象。这个新对象包含了与原对象相同的
数据
，并且可以使用
双向绑定
。
Vue
3.0
数据
双向绑定
的另外一个核心方法是使用了新的模板语法和指令。这些新语法和指令采用了完全不同的语法和实现方式。这样可以保证其性能更高、更灵活、更易于维护。
总之，
Vue
3.0
数据
双向绑定
的核心方法是使用 Reactive API 来创建响应式对象，并使用新的模板语法和指令来实现
双向绑定
功能。这一系列的改进将使
Vue
3.0 在性能、灵活性和易用性方面得到更好的提升。
