vue学习记录十五：数据响应式原理（一）(Object.defineProperty)

最新推荐文章于 2022-07-05 16:07:49 发布
最新推荐文章于 2022-07-05 16:07:49 发布
阅读量671 收藏 3
点赞数 3
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48459838/article/details/121146243
版权

vue学习记录十五:数据响应式原理

一、数据响应式原理

在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别是：

  1. 对象属性拦截 (vue2.x)

    Object.defineProperty

  2. 对象整体代理 (vue3.x)

    Proxy

其中对象属性拦截，不管使用其中的哪种方式，道理都是相通的。

二、Object.defineProperty代码解释

1.简单原理

 // 1.字面量定义
let data = {
        name:'小飞'
}
    Object.defineProperty(data,'name',{
        get(){
            //当我们访问data的属性时,自动调用的方法.
            //属性可以不存在,会自动创建
            // 并且get函数的返回值就是你返回的值
             return '小飞'
             //不能再写data['age']，这样式写其实又在访问了。会又进入get方法，变成了无限死循环了。
             //data['age']
        },

        set(newValue){
            //当我们设置或修改name属性的时候,自动调用的函数
            //并且属性最新的值会被当作实参传入进来
            //这里数据发生变化后，可以发送ajax,操作一块dom区域都可以。这样就实现了数据响应。
            console.log('设置了name属性=' +newValue )
        },
    })

2.存在的问题

我们的get方法中返回的值始终是小飞，是固定的，set中拿到新值之后，我们如何让get中可以得到newVal使我们需要解决的问题。
我们可以 通过一个中间变量 middle 来中转get函数和set函数之间的联动

 // 1.字面量定义

    let data = {
        name:'小飞',
    }
   let middle = 20
    Object.defineProperty(data,'age',{
        get(){
               //返回20
             return middle
        },

        set(newValue){
            //
            middle = newValue
            console.log('设置了age属性=' +newValue )
        },
    })

这样每次访问，其实都是返回的那个中间变量middle 的值。设置也是设置的那个middle 的值。

3.更优化的方法

vue中data的数据有很多，是怎么实现的，如何通过劫持的方法把每一个属性都变成setter和getter的形式，通过遍历。

let data = {
    name: '小飞',
    age: 18,
    height:180
}
// 遍历每一个属性
Object.keys(data).forEach((key)=>{
    // key 属性名
    // data[key] 属性值
    // data 原对象
    defineReactive(data,key,data[key])
})
// 响应式转化方法
function defineReactive(data,key,value){
    Object.defineProperty(data,key,{
        get(){
           return value
        },
        set(newVal){
          value = newVal 
        }
    })
}

这个地方实际上使用了闭包的特性，在每一次的defineReactive函数执行的时候，都会形成一块独立的函数作用域，传入的value 因为闭包的关系会常驻内存，这样一来，每个defineReactive函数中的value 会作为各自set和get函数操作的局部变量。

三、数据响应总结

  1. 所谓的响应式其实就是拦截对象属性的访问和设置，插入一些我们自己想要做的事情。
  2. 在Javascript中能实现响应式拦截的方法有俩种，Object.defineProperty方法和Proxy对象代理。
  3. 回归到vue2.x中的data配置项，只要放到了data里的数据，不管层级多深不管你最终会不会用到这个数据都会进行递归响应式处理，所以要求我们如非必要，尽量不要添加太多的冗余数据在data中。
  4. 需要了解vue3.x中，解决了2中对于数据响应式处理的无端性能消耗，使用的手段是Proxy劫持对象整体 + 惰性处理（用到了才进行响应式转换）。

四、数据的变化反应到视图

1.命令式操作视图

<div id="app">
  <p></p>
</div>
<script>
   let data = {
        name: '小飞',
        age: 18,
        height:180
    }
    // 遍历每一个属性
    Object.keys(data).forEach((key)=>{
        // key 属性名
        // data[key] 属性值
        // data 原对象
        defineReactive(data,key,data[key])
    })
    function defineReactive(data,key,value){
        Object.defineProperty(data,key,{
            get(){
               return value
            },
            set(newVal){
              value = newVal 
              // 数据发生变化,操作dom进行更新
              document.querySelector('#app p').innerHTML = data.name
            }
        })
    }
  // 页面首次加载时候的渲染
  document.querySelector('#app p').innerHTML = data.name
</script>

这样就能在每次修改数据的时候，响应到视图了。

2.声明式操作视图

我们将data中name属性的值作为文本渲染到标记了v-text的p标签内部，在vue中，我们把这种标记式的声明式渲染叫做指令。

<div id="app">
  <p v-text="name"></p>
</div>
<script>
  let data = {
    name: '小飞',
    age: 18,
    height: 180
  }
  // 遍历每一个属性
  Object.keys(data).forEach((key) => {
    // key 属性名
    // data[key] 属性值
    // data 原对象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        value = newVal
        // 数据发生变化,操作dom进行更新
        compile()
      }
    })
  }
  // 
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍历所有的子元素
    nodes.forEach(node => {
      // nodeType为1为元素节点
      if (node.nodeType === 1) {
        const attrs = node.attributes
        // 遍历所有的attrubites找到 v-model
        // Array.from先将伪数组，转为真数组
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          //nodeName是属性名
          //nodeValue是属性值 
          //假设 v-text="name"
            //要是属性名等于v-text,
          if (dirName === 'v-text') {
            // 就把这个元素的文本替换为对象的值data[name]
            node.innerText = data[dataProp]
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

找标记，把数据绑定到dom的过程，我们称之为binding。

五、视图的变化反应到数据

将data中的name属性对应的值渲染到input上面，同时input值发生修改之后，可以反向修改name的值，在vue系统中，v-model指令就是干这个事情的。

<div id="app">
  <input v-model="name" />
</div>
<script>
  let data = {
    name: "小飞",
    age: 18,
    height: 180
  }
  // 遍历每一个属性
  Object.keys(data).forEach((key) => {
    // key 属性名
    // data[key] 属性值
    // data 原对象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        // 数据发生变化,操作dom进行更新
        //要是值相同，就不变
        if (newVal === value) {
          return
        }
        value = newVal
        compile()
      }
    })
  }
  // 编译函数
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍历所有的子元素
    nodes.forEach(node => {
      // nodeType为1为元素节点
      if (node.nodeType === 1) {
        const attrs = node.attributes
        // 遍历所有的attrubites找到 v-model
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          if (dirName === 'v-model') {
          //这里是把数据的值绑定要视图上
            node.value = data[dataProp]
            // 视图变化反应到数据 无非是事件监听反向修改
            //这里给元素绑定事件，input事件，将输入框的值绑定到对象的属性上。这样，在输入的时候，就会触发input事件将值绑定到对象属性上面了。
            node.addEventListener('input', (e) => {
              data[dataProp] = e.target.value
            })
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

六、现存架构的问题

<div id="app">
  <p v-text="name"></p>
  <p v-text="age"></p>
  <input v-model="age"></input>
  <input v-model="name"></input>
</div>
<script>
  let data = {
    name: '小飞',
    age: 18,
    height: 180
  }
  // 遍历每一个属性
  Object.keys(data).forEach((key) => {
    // key 属性名
    // data[key] 属性值
    // data 原对象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        // 数据发生变化,操作dom进行更新
        if (newVal === value) {
          return
        }
        value = newVal
        compile()
      }
    })
  }
  // 编译函数
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍历所有的子元素
    nodes.forEach(node => {
      // nodeType为1为元素节点
      if (node.nodeType === 1) {
        const attrs = node.attributes
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          console.log( dirName,dataProp)
          if (dirName === 'v-text') {
            console.log(`更新了${dirName}指令,需要更新的属性为${dataProp}`)
            node.innerText = data[dataProp]
          }
       if (dirName === 'v-model') {
          //这里是把数据的值绑定要视图上
            node.value = data[dataProp]
            node.addEventListener('input', (e) => {
              data[dataProp] = e.target.value
            })
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

通过如上代码可知，每次访问对象的一个属性的时候，都会触发compile函数，打印其他的值，即使他们没发生变化，但其实我们只修改了一个属性。显得不够精准，需要借助设计模式来优化我们的架构，就是发布订阅模式。只变化我们修改的那个属性。

七、发布订阅模式思路

数据更新之后实际上需要执行的代码是

node.innerText = data[dataProp]

为了保存当前的node和dataProp，我们再次设计一个函数执行利用闭包函数将每一次编译函数执行时候的node和dataProp都缓存下来，所以每一次数据变化之后执行的是这样的一个更新函数。

() => {
  node.innerText = data[dataProp]
}

一个响应式数据可能会有多个视图部分都需要依赖，也就是响应式数据变化之后，需要执行的更新函数可能不止一个，如下面的代码所示，name属性有俩个div元素都使用了它，所以当name变化之后，俩个div节点都需要得到更新，那属性和更新函数之间应该是一个一对多的关系。

<div id="app">
   <div v-text="name"></div>
   <div v-text="name"></div>
   <p v-text="age"></p>
   <p v-text="age"></p>
</div>

<script>
  let data = {
     name: 'cp',
     age: 18
  }
</script>

每一个响应式属性都绑定了相对应的更新函数，是一个一对多的关系，数据发生变化之后，只会再次执行和自己绑定的更新函数。

八、理解发布订阅模式(又叫自定义事件)

dom绑定事件的方式，我们学过俩种

  1. dom.onclick = function(){}
  2. dom.addEventListener(‘click’,()=>{})

这俩种绑定方式的区别是，第二种方案可以实现同一个事件绑定多个回调函数，很明显这是一个一对多的场景，既然浏览器也叫作事件，我们试着分析下浏览器事件绑定实现的思路

  1. 首先addEventListenr是一个函数方法，接受俩个参数，分别是事件类型 和回调函数
  2. 因为是一个事件绑定多个回调函数，那在内存里大概会有这样的一个数据结构。
 {
  click: ['cb1','cb2',....],
  input: ['cb1','cb2',...]
}
  1. 触发事件执行，浏览器因为有鼠标键盘输入可以触发事件，大概的思路是通过事件名称找到与之关联的回调函数列表，然后遍历执行一遍即可。回调函数里面就是
() => {
  node.innerText = data[dataProp]
}

更新视图。

九、简单的发布订阅

1.收集依赖和触发依赖

// 增加dep对象 用来收集依赖和触发依赖
const dep = {
    map: Object.create(null),
    // 收集
    //dataProp是那个变化的属性名
    //updateFn是变化的函数
    collect(dataProp, updateFn) {
    //要是变化的属性名不存在
    //就以那个属性名创建一个空数组，用来存放更新视图的不同函数
      if (!this.map[dataProp]) {
        this.map[dataProp] = []
      }
      //将每个函数放到对应的属性名
      this.map[dataProp].push(updateFn)
    },
    // 触发
    //dataProp是那个变化的属性名
    //this.map[dataProp]是对应的那个函数数组
    //map属性就是用来存放所有的属性名，属性名又包含着所有更新的函数。
    trigger(dataProp) {
      this.map[dataProp] && this.map[dataProp].forEach(updateFn => {
       //触发每个this.map[dataProp]函数数组里的每个函数
        updateFn()
      })
    }
}

2.收集更新函数

在编译函数执行的时候，我们把用于更新dom的更新函数收集起来

// 编译函数
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍历所有的子元素
    nodes.forEach(node => {
      // nodeType为1为元素节点
      if (node.nodeType === 1) {
        const attrs = node.attributes
        // 遍历所有的attrubites找到 v-model
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          console.log(dirName, dataProp)
          if (dirName === 'v-text') {
            console.log(`更新了${dirName}指令,需要更新的属性为${dataProp}`)
            node.innerText = data[dataProp]
            // 收集更新函数
            dep.collect(dataProp, () => {
            //将每个更新的函数放到 dep.collect里对应的属性名数组里。
              node.innerText = data[dataProp]
            })
          }
        })
      }
    })
 }

3.触发更新函数

当属性发生变化的时候，我们通过属性找到对应的更新函数列表，然后依次执行即可。

function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newValue) {
        // 更新视图
        if (newValue === value) return
        value = newValue
        // 再次编译要放到新值已经变化之后只更新当前的key
        dep.trigger(key)
      }
    })
}

十、整体总结

  1. 数据响应式的实现无非是对象属性拦截，我们使用Object.defineProperty来实现，在vue3中使用Proxy对象代理方案进行了优化
  2. 指令实现的核心无非是通过模板编译找到标识然后把数据绑上去，等到数据变化之后再重新放一次
  3. 发布订阅模式的本质是解决一对多的问题，在vue中实现数据变化之后的精准更新
努力练级中...
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue个人学习基础总结（二）
weixin_44248722的博客
11-18 165
vue基础总结（续） vue的响应式原理 Vue的数据响应主要是依赖了原生的Object.defineProperty() vue文档 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。 即vue的实例data的所有property都会利用原生的Object.defineProperty绑定上gette
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
现在前端面试Vue中都会问到响应式原理以及如何实现的，如果你还只是简单回答通过Object.defineProperty（）来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定...
对象属性拦截Object.defineProperty()介绍及使用
晚星的博客
03-22 1670
文章目录前言对象属性拦截总结 前言        一旦数据发生变化，我们可以立刻知道，并且做一些你想完成的事情，这些事情包括但不限于以下： 发送一个网络请求 打印一段文字 操作一个dom … 提示：以下是本篇文章正文内容，下面案例可供参考 对象属性拦截 一、传统写法 用字面量定义对象设置值如下代码： // 字面量定义对象 let obj = { name: '晚星' } console.lo
Vue响应式原理，Object.defineProperty
weixin_45679977的博客
04-16 128
写给自己看的，你们能不能看懂，复制下来不就知道了吗？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Vue响应式原理Object.defineProperty这样理解（二）
青椒的博客
05-05 367
输入框内输入外面内容有人修改 控制台修改message内容 <div id="app"> <input type="text" v-model="message"> {{message}} </div> <script> const app = new Vue({ el:'#app', ...
Vue数据响应式
qq_36198515的博客
08-15 96
Vue响应式，不管是在学习Vue的源码还是在面试的时候，都是我们会经常涉及到的知识。 我们先写一个示例文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../dist/vue.js"></script> </head> <
Vue 中 数据劫持 Object.defineProperty()
超逸の学习技术博客
02-24 3015
本文能帮你了解到什么？ 我们都知道vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，本文将由浅到深带你理解和使用defineProperty
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
10-17
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
详谈Object.defineProperty 及实现数据双向绑定
10-15
在 Vue.js 框架中，`Object.defineProperty()` 被广泛用于实现数据响应式，即数据双向绑定。 **数据双向绑定** 是一种编程模式，常见于前端框架中，使得视图层和模型层的数据能够自动同步。当用户在视图中修改数据...
1.（原理分析类）Object.defineProperty.rar
最新发布
09-28
这个方法是理解 JavaScript 操纵对象属性行为的关键，特别是对于数据绑定、响应式系统和优化代码性能等方面。下面将详细探讨 `Object.defineProperty()` 的原理、用法以及它在实际开发中的应用。 ### 1. `Object....
js代码-Object.defineProperty()
07-14
在实际开发中，`Object.defineProperty()` 常用于实现数据绑定、数据劫持等场景，如Vue.js框架中就广泛使用了这个方法来实现响应式数据。通过这个方法，开发者可以更灵活地控制对象的属性，实现更复杂的数据操作和...
理解Object.defineProperty方法
yonghui_520的博客
03-18 278
理解Object.defineProperty方法 一、语法 Object.defineProperty(obj, prop, descriptor) obj：需要定义属性的对象 prop：需要定义的属性 descriptor：属性的描述描述符 返回值：返回此对象 [举个例子] let obj = Object.create(null); let descriptor = { conf...
基于Object.defineProperty之后，vue源码解析依赖收集、依赖触发【二】
weixin_34256074的博客
03-17 250
前言： 上篇已经了解到了，defineProperty的定义、使用场景、解决的问题，接下来 ，我们一起来看下vue源码，篇幅有点大，希望你能耐心的看下去，然后有收获，有任何问题，我们可以沟通交流 复制代码接下来你将会了解到以下内容 1、依赖收集 2、依赖触发 3、响应式 4、观察者 5、侦听器 6、代理 7、订阅者 8、函数渲染 9、虚拟dom的使用 复制代码源码：下载地址 github.com/...
Object.defineProperty方法（详解）
WQ的技术分享
07-05 1999
参考地址
Object.defineproperty实现数据和视图的联动
aoxiu2833的博客
08-26 101
Object.defineproperty语法 在一个对象上定义新的属性 var o = {}; // 创建一个新对象 // Example of an object property added with defineProperty with a data property descriptor Object.defineProperty(o, "a", {value :...
Object.defineProperty使用爬坑
Vgbire的博客
04-24 436
错误使用 很多人刚开始使用defineProperty都会有的错误，看报错是调用栈满了 为什么调用栈满了，因为你在get方法里面使用object.propery返回值的时候又触发了get方法，导致无休止的get方法调用而报错。set方法同理，那么怎么用呢？ const object = { property: { a: 1, b: 2 } }; let value = object.property Object.defineProperty(object, 'property'
【面向对象】php新手之学习类与对象-构造函数与析构函数
PHP在线开发笔记
11-27 782
二、自动加载对象 很多开发者写面向对象的应用程序时对每个类的定义建立一个 PHP 源文件。一个很大的烦恼是不得不在每个脚本（每个类一个文件）开头写一个长长的包含文件列表。 在 PHP 5 中，不再需要这样了。可以定义一个 __autoload 函数，它会在试图使用尚未被定义的类时自动调用。通过调用此函数，脚本引擎在 PHP 出错失败前有了最后一个机会加载所需的类。 Note: 在
关于Object.defineProperty的几个坑
JokerSoulClub的博客
07-07 751
坑1 let obj={}; let o = Object.defineProperty(obj,'key',{ configurable: true, enumerable: true, get: function () { return this.key || 0; }, set: function (n) { obj.key = n; } }) console.log(o.key); //报Uncaught RangeError
vue的响应式原理中object.defineproperty的缺陷
04-11
Vue的响应式机制使用的确实是Object.defineProperty，但是它所谓的“缺陷”主要是因为不支持对整个对象进行监听，会影响到性能，而且也不能新增或删除属性，但是这些问题都已经被Vue通过其他方式解决了。Vue3.0也...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值