数据劫持

数据劫持

set get

• get 是一种获得属性值的方法，
  setter是一种设置属性值的方法

• get 负责查询值，它不带任何参数
  set 则负责设置键值，值是以参数的形式传递

 let obj = {
//             name:"小涛",
//             age:"22"
//         }
// // 需要在获取的对象属性的同时， 做一些其他的事情
//         console.log(obj.name);

//   //需要设置对象的属性的时候，做一些其他的事情      
//         obj.name = "大涛";
//         obj.age = "越来越大";
    let obj = {
        $ name : "爱哭的",
        get name(){
            console.log("啊~ 我被获取到了");
            return this.$name;
        },
        set name (newVal){
            console.log("我是新的数据" + newVal);
            this. $ name = newVal;
        }
    }
    console.log(obj.name);
    console.log(obj);
    obj.name = "爱笑的";
    console.log(obj.name);

defineProperty

Object.defineProperty(obj, prop, descriptor)

let obj = {
name : “の”,
age:“18”
}
obj : 指定的操作对象
“name” : 指定对象的指定属性(这里可以是已有的属性值。也可以是新来的，用做添加新属性)
{} : 对指定属性的 相关设置

Object.defineProperty(obj,“name”,{

//1. // 配置是否允许被删除 true(默认值)可以被删除 ， false不能被删除
configurable: true,

//2. 配置是否允许被枚举， true(默认值) 允许， false 不允许
// 是否允许被枚举 === 是否允许被遍历访问
enumerable: true,

//3. 配置是否允许被修改，true(默认值) 允许， false 不允许
// 默认值为 true,没有业务需要，不需要设置
// 对 set方法： 默认值 true 时， 没有影响
// 设置为 true 时， 发生冲突
// writable: true,

//4. value: 用于对指定属性的 赋值， 获取值 ， 默认值 为undefind

set(newVal){
console.log(“这是想要设置的新值”+newVal);
value = newVal;
},
get(){
console.log(“我被触发了”);
return value;
}
});

基于数据劫持的数据响应式

“响应式”，是指当数据改变后，会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

• compileNode 编译方法
  • 正则：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
• dataProxy 添加观察
• defineData 劫持数据
  • 自定义事件
  • new Event 自定义事件
  • dispatchEvent 事件派发

数据响应式实现原理：

1. 利用数据劫持 (defineProperty, Proxy) 监听对应数据的修改设置
2. 利用观察者模式(或事件机制),给每一项数据添加相应的事件监听，当数据修改时触发该事件，然后驱动视图进行修改

双向绑定：

1. 利用数据响应式，完成数据对视图修改
2. 添加 change 或 input 等事件，监听视图的修改，当视图改变时修改数据

mvc

mvc 模式。 之前的市面是很常见很流行的一个概念，一个编程规范。

// mvvm： model(模型-数据) + view(视图) + viewModel(视图模型)

遵循的基本原则： 数据驱动视图的方式

mvvm 的本质上， 就是mvc的改进版，mvvm 就是将其中的 view的状态和行为 抽象化
ViewModel 的任务 ： 让我们将视图和数据区分开，并通过vm来建立连接
它可以取出 m 中的数据，同时帮忙处理view中需要展示的内容所需的业务逻辑

数据响应式： 是指当数据改变后，会通知到使用该数据的代码，
例如： 视图渲染中依赖的数据，数据发生改变的时候，视图也自动更新