数据响应式 - 数据劫持 / defineProperty / mvvm模式

数据劫持 / defineProperty / mvvm模式

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

数据劫持

模拟vue 中的双向数据绑定实现原理（ 基于数据劫持实现的 ）
需要在 设置 / 获取 数据对象属性的同时，做些其他的事情

• $ + 属性名
  加$ 表示其他名字即便重名也不能覆盖 该变量名

	let obj1 = {
    	// 加$ 表示其他名字即便重名也不能覆盖 该变量名
    	// 但是没有私有的意思
        $point : "爱好",
        get point(){
	        console.log("我得到了point")
	        return this.$point
        },
        set point(val){
	        console.log("拿到了新的point数据" + val )
	        return this.$point = val;
        }
	}
	
	console.log(obj1.point) // => 爱好
	
	// 设置属性值，同时触发 console
    obj1.point = "厌恶"; // => 拿到了新的point数据 厌恶
    
    // 同时输出两个内容 （查看值是否被修改）
    console.log(obj1.point); // => 我得到了point 
    						 // => （获取对象属性值，并没有被修改）爱好
    

defineProperty

基于Object去调用

• get 是一种获得属性值的方法，负责查询值，它不带任何参数
• set是一种设置属性值的方法，负责设置键值，值是以参数的形式传递
• 参数设置 Object.defineProperty ( obj , “name” , { } )
  obj : 指定的操作对象
  "name" : 指定对象的指定属性(这里可以是已有的属性值。也可以是新来的，用做添加新属性)
  { } : 对指定属性的 相关设置

	Object.defineProperty(obj,"name",{
		//1. 配置是否允许被删除 true(默认)可以被删除，false 不可以删除
        //  允许增删
        configurable : true,
		//2. 配置是否允许被枚举 true(默认)可以被遍历，false 不可以遍历
        // 是否允许被枚举  ===  是否允许被遍历访问
        enumerable : true,
		//3. 配置是否允许被修改，true ( 默认值 ) 允许， false 不允许
        // 默认值为 true,没有业务需要，不需要设置
        
		// writable 会对set方法造成影响： 默认值 true 时(不填写，即为默认) 没有影响
        //               设置为 true 时， 发生冲突
        // writable: false
        
		//4. value: 本身就存在，用于指定属性的赋值，获取 默认为 undefined
        // 自身自带value 值
        set(newVal){
        	console.log("设置的新值" + newVal)
            //  允许增删
            // configurable : true
            // 否则 不能使用 value
            value = newVal;
		},
        get(){
			return value // value 本身就存在
        }
	})
	
	delete obj.name; // 修改 configurable 属性 查看不同的结果
    console.log(obj.name)

数据实时改变

• 前端html准备

    
    <input type="text" id="ipt">
    <div class="cl"></div>
    

• 后端JS代码

	let obj = {
		name : "秦",
		age : 24
	}
	
	// 省略 ... Object.defineProperty(obj,"name",{配置信息})
	
	let ipt = document.querySelector("#ipt");
	let c = document.querySelector(".cl");
	  
	ipt.onchange = function(){
		console.log("数据改变"+ ipt.value)
		console.log(ipt.value)
		obj.name = ipt.value;
		c.innerHTML = obj.name;
	}
	

mvvm模式

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

• mvc 模式
  之前的市面是很常见很流行的一个概念，一个编程规范。
• mvvm 模式
  model(模型-数据) + view(视图) + viewModel(视图模型)
  可以看作是 mvc 的升级版
  本质上，就是mvc的改进版，mvvm 就是将其中的 view的状态和行为 抽象化
  ViewModel 的任务：将视图和数据区分开，并通过vm来建立连接
  它可以取出 model 中的数据，同时帮忙处理 view 中需要展示的内容所需的业务逻辑