vue中实现双向数据绑定其实用的就是Object.defineProperty方法

Object.defineProperty这个方法在js高程上面有详细的讲解

通常我们如何给对象添加一个属性呢？

let obj = {name: ""}

obj.age = 18;

obj["gender"] = "male";

Object.defineProperty可以用来给对象添加属性，也可以用来修改现有的属性

在添加属性的时候，可以设置属性以下的特性：

1. 是否为只读属性

2. 是否可以删除

3. 是否可以遍历

4. 可以为属性注册像改变事件一样的函数

写法：Object.defineProperty(要添加或者修改属性的对象, 要添加或者修改的属性名, 特征对象)

例如：

let obj = {};
Object.defineProperty(obj, "name", {
      // 1. 默认的，该属性是只读的，不能被赋值 默认是false
      writable: true,
      // 2. 默认的，该属性不能被for in循环遍历 默认是false
      enumerable: true,
      // 3. 默认的，该属性不能被delete删除 默认是false
      configurable: true,
      // value属性用来设置属性的默认值
      value: "123"
    })

还可以这样写（vue中用的就是这种方法）：

let nameValue = "";
let obj = {};

    Object.defineProperty(obj, "name", {
      // set和get不能和上面的writable，value同时出现
      set(value){
        // 这个函数就像是属性的改变事件，我们在给属性赋值的时候
        // JS内部会自动调用这个函数
        console.log("属性被赋值了");

        // 在set函数中，需要接收用户所赋值的内容，也就是等号右边的内容 可以通过value形参接收
        // 将其存储起来

        nameValue = value;
      },
      get(){
        // 这个函数就像是属性的被获取的事件，只要有人用到这个属性了，那这个函数就会被调用
        console.log("属性被获取值了");

        // 这个函数会在用户获取值得时候调用，用户获取到的值，就是当前函数的返回值
        return nameValue;
      }
    })

注意：set和get不能和writable，value同时出现

 

vue中双向数据绑定的简单实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <input type="text" id="ins" />
    </div>

    <script>
      let obj = {};
      let nameValue = "";
      Object.defineProperty(obj, "name", {
        set(value){
          // ins.value = nameValue = value;
          nameValue = value;
          ins.value = value;
        },
        get(){
          return nameValue;
        }
      })

      // 双向绑定：其实描述的就是视图和数据的关系，视图的变化会同步更新数据，数据变化也会同步更新视图

      // 1. 视图中用户输入数据的时候，我们需要获取到用户的输入，然后赋值给obj.name

      // 1.1 注册事件
      let ins = document.querySelector("#ins");

      ins.oninput = function() {
        // 1.2 获取用户的输入
        // 1.3 赋值给obj.name
        obj.name = this.value;
      };


      // 2. 数据在发生改变的时候，我们需要把数据赋值给input框

      // 当用户通过=给obj.name赋值的时候，会触发上面的set方法
      // 我们只需要在set方法中，把当前的更新的数据，赋值给input框即可
      // obj.name = "123";


      
    </script>
  </body>
</html>

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue