vue3中的双向数据绑定方法原理和响应式的实现方式

牛仔在哪

已于 2022-11-02 19:41:04 修改

阅读量3.4k

点赞数 4

文章标签： vue.js

于 2022-11-02 19:04:46 首次发布

本文链接：https://blog.csdn.net/ape_003/article/details/127656571

版权

一、ref和reactive的区别

ref 的作用是定义一个基本类型的数据为响应式

setup () {
    
      let num = ref(1);
        // 创建一个包含响应式数据的引用(reference)对象
        // js中操作数据: xxx.value
        // 模板中操作数据: 不需要.value
      return {
        num
    }

}

reactive的作用是定义多个数据为响应式（以对象类型）

import {reactive} from "@vue/reactivity";
  export default {
    setup(){
      const state = reactive({
        name: 'tom',
        age: 25,
        wife: {
          name: 'marry',
          age: 22
        },
      })
        //  接收一个普通对象然后返回该普通对象的响应式代理器对象
        //  响应式转换是“深层的”：会影响对象内部所有嵌套的属性
        //  内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
      console.log(state, state.wife)
      const update = () => {
        state.name += '--'
        state.age += 1
        state.wife.name += '++'
        state.wife.age += 2
      }
      return {
        state,
        update
      }
    }
  }

reactive 相当于 Vue 2.x 中的 Vue.observable() API ，为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。

Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系，当响应式状态改变时视图会自动更新。

这就是 Vue 响应式系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象。模板会被编译成能够使用这些响应式 property 的渲染函数。

二、比较Vue2与Vue3的响应式的实现原理

vue2中

核心:

对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

//核心方法  -
Object.defineProperty(obj, prop, descriptor)

// obj：要在其上定义属性的对象。
// prop：要定义或修改的属性的名称。
// descriptor：将被定义或修改的属性描述符。
Object.defineProperty(对象, 属性, {   
  get () {},      
  set () {} 
})

手动实现简易的双向数据绑定

<body>
    <div id="app">
        <input id="input" type="text">
        <span id="content"></span>
    </div>
</body>

<script type="text/j

最低0.47元/天解锁文章

牛仔在哪

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue3中的双向数据绑定方法原理和响应式的实现方式

ref和reactive vue3中的proxy代理响应式的实现
复制链接

扫一扫