数据双向绑定原理
- 数据劫持:defineProperty,Proxy
Vue
用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
- Vue 2.x 使用 ES5 Object.defineProperty, 监听数据 get和 set, 实现数据劫持
- Vue 3.x 使用 ES6 Proxy 实现双向数据绑定
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
- 代理的是对象,可以拦截到数组的变化
- 拦截的方法多达13种
- 返回一个拦截后的数据
Object.defineProperty
- 代理的是属性, 对数组数据的变化无能为力
- 直接修改原始数据
- 脏检查:
Angular
React
React vs Vue
comparison
https://cn.vuejs.org/v2/guide/comparison.html
https://github.com/kujian/daily-interview-question/issues/5