js 数据双向绑定原理 All In One

js 数据双向绑定原理 All In One

1. 数据劫持：defineProperty，Proxy

Vue

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

用Object.defineProperty( )，来监听数据 get和 set，来实现数据劫持的;

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-08-26
 *
 * @description vue 双向数据绑定
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;


let blog= {}
let name = "";

Object.defineProperty(blog, "name", {
    set: function (value) {
        name = value;
        log(`欢迎来到 ${name}`);
    },
    get: function () {
        return "《" + name + "》";
    }
})

blog.name = "xgqfrms 博客";
// 欢迎来到xgqfrms 博客

log(blog.name);
// 《xgqfrms 博客》

https://www.haorooms.com/post/vue_vmodel

v-model & prop

https://forum.vuejs.org/t/v-model-on-prop/37639

https://stackoverflow.com/questions/46164374/using-v-model-with-a-prop-on-vue-js

---

Proxy

1. Vue 2.x 使用 ES5 Object.defineProperty, 监听数据 get和 set, 实现数据劫持
2. Vue 3.x 使用 ES6 Proxy 实现双向数据绑定

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

https://github.com/kujian/daily-interview-question/issues/6

https://juejin.im/post/5bf3e632e51d452baa5f7375

---

proxy 与 defineProperty 的区别，以及优势在哪里

Proxy

1. 代理的是对象，可以拦截到数组的变化
2. 拦截的方法多达13种
3. 返回一个拦截后的数据

Object.defineProperty

1. 代理的是属性， 对数组数据的变化无能为力
2. 直接修改原始数据

---

2. 脏检查：

Angular

React

React vs Vue

comparison

https://cn.vuejs.org/v2/guide/comparison.html

https://github.com/kujian/daily-interview-question/issues/5

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---