zoukankan      html  css  js  c++  java
  • 9、响应式数据原理

    1、声明式

      只需要声明在哪里where,做什么what,而无需关系如何实现how

    //此map方法就是,声明式的,只告诉map要实现获取2倍,然后map具体怎么实现不关心
    var  arr = [1,2,3,4];
    var newArr = arr.map((item,index)=>{
        return item*2;
    })

    2、命令式

      需要以具体的代码表达在哪里where,做什么what,以及如何实现how

    //forEach就是命令式,会具体操作数组,还有如何得到结果push
    var  arr = [1,2,3,4];
    var newArr = [];
    arr.forEach((item,index)=>{
        newArr.push(item*2);
    })

    声明式的理解:

      1)DOM状态只是数据状态的一种映射

      2)所有的逻辑尽可能在状态的层面去进行

      3)当状态变化了,View会被框架自动更新到合理的状态

    3、响应式数据原理

    vue响应式的核心就是Object.defindProperty

    作用:直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性

    语法:Object.definProperty(obj,prop,descriptor)

    参数:obj要在其上定义属性的对象,prop要定义的或要修改的属性的名称,descriptor将被定义或修改的属性描述符

        数据描述

          configurable:是否可以删除属性,默认false

          enumberable:此属性是否可以被枚举,默认false

          value:   该属性对应的值,默认undefined

          writable:  属性的值是否可以被重写,默认false

        访问器描述

          getter:是一种获得属性值的方法

          setter:是一种设置属性值的方法

    //数据劫持,转成getter和setter
    function observer(obj){
        Object.keys(obj).forEach((item)=>{
              defineReactive(obj,item,obj[item])
        })
    }
    
    function defineReactive(obj,key,value){
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){
                 return value;
            },
            set(newValue){
                 if(value == newValue){return}
            //value相当于是一个公用的存储空间,把最新的值存进去;访问也是访问这里面的最新的值 value
    =newValue;
            //此处还会放一些其他复杂的操作,收集依赖,通知变化等 } }) }

    vue响应式原理理解:

      1、把一个普通的js对象传给Vue实例的data选项对象

      2、Vue将遍历此对象的所有的属性,并使用Object.defineProperty把这些属性全部转换为getter/setter

      3、Vue内部会对数据进行劫持操作,进而追踪依赖,在属性被访问和修改时通知变化

          

  • 相关阅读:
    Treap仿set 模板
    线段树(区间更改,区间查最值)模板
    UVA 12345 Dynamic len(带修莫队)
    服务器配置环境以及部署项目流程
    使用SSH的scp命令行传输文件到远程服务器
    服务器部署javaweb项目
    在ubuntu服务器上安装mysql并配置外网访问
    在ubuntu服务器上配置tomcat
    在ubuntu服务器上配置jdk
    linux命令--解压与压缩
  • 原文地址:https://www.cnblogs.com/gopark/p/11419877.html
Copyright © 2011-2022 走看看