手动实现响应式原理

已于 2022-07-27 09:25:38 修改
阅读量244 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js
于 2022-07-26 14:42:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51910241/article/details/125963398
版权
本文逐步解析并实现Vue响应式系统，从简单的响应函数收集，到依赖收集类的封装，再到使用Proxy和Reflect监听对象变化，以及依赖收集管理的优化。最后通过vue2的Object.defineProperty实现响应式，详细阐述了响应式的核心思想和实现过程。
摘要由CSDN通过智能技术生成

前言

       响应式大家都应该很收悉吧，国内很火的vue框架就是采用的响应式。要想熟练的掌握vue原理，响应式是必须首先掌握的。大家可能对响应式之前是有过了解，但是不太清楚具体内部是怎实现的，这篇文章将一步一步的将响应式实现出来。

用到的主要知识点：

class类、Object.defineproperty、proxy、reflect、map、weakmap、set。

如果有不清楚这些知识点的可以先了解一下。

一、什么是响应式

       简单来说，响应式就是当某一个变量发生改变的时候，会对应自动的执行一些代码。

下面我们来看一个例子：

const obj = {
    name:'cj',
    age:18
}

//obj对象改变需要执行的代码
function getName(){
   console.log('发现obj对象的某个属性改变了，我要开始执行了')
   return newName = obj.name
}

//对obj对象属性重新赋值
obj.name = 'wx'
getName()

       当我们对obj对象属性重新赋值的时候，就会自动执行getName函数，这样的函数我们称为响应函数。

二、收集响应函数的封装

       当变量发生改变的时候，怎么去识别哪些函数是需要执行的，哪些是不需要执行的呢？这个时候我们就需要将响应函数收集起来，等需要执行的时候再去执行。这里采用将需要执行的函数存放在数组中，数组统一保存。等到需要执行的时候再统一被执行。

let reactiveFns = []    //定义一个数组，用于储存需要执行的函数
function watchFn(func) {  // 封装一个收集响应函数的函数
    reactiveFns.push(func)
}

const obj = {
    name: "cj",
    age: 18
}

//对需要响应执行的函数进行收集
watchFn(function() {
   console.log('发现obj对象的name属性改变了，我要开始执行了')
   return newName = obj.name
})

//不需要响应执行的函数
function foo(){
    console.log('我不需要被收集')
}

obj.name = "wx"
//统一执行被收集的函数
reactiveFns.forEach(fn => fn())

       现在我们实现了对需要执行函数的收集、存放，与统一执行。但是这还明显不是我们想要的，甚至还存在很多问题。别急，我们先一步一步来。

三、依赖收集类的封装

       对于上面的实现，我们想一下，只用数组存放函数好吗？是不好的，数组很难去管理需要响应函数，因为比如一个对象有多个属性，不同的属性对应不同响应函数。这样的话，就要通过对每个属性定义一个对应的数组，那又怎么去管理这些数组呐？。这里最好的就是用class去统一管理。

//定义一个class，用于收集保存的响应函数
class Depend {
    constructor(){
        this.reactiveFns = []    
    }
    //储存响应函数
    addDepend(func){
        this.reactiveFns.push(func)
    }
    //统一响应函数
    notify(){
        this.reactiveFns.forEach(fn=>fn())    
    }
}

//分别对name与age定义一个depend实例
const dependName = new Depend()
const dependAge = new Depend()

//定义一个依赖收集函数
function watchFn(func,attri){
    switch(attri){
        case:'name'{
            dependName.addDepend(func)
        }
        case:'age'{
            dependAge.addDepend(func)
        }
    }
}

const obj = {
    name:'cj',
    age:18
}

//传入响应函数，watchFn来进行收集
watchFn(function(){
   console.log('发现obj对象的name属性改变了，我要开始执行了')
   return newName = obj.name
},'name') 

watchFn(function(){
   console.log('发现obj对象的age属性改变了，我要开始执行了')
   return newAge = obj.age
},'age') 


//不需要响应执行的函数
function foo(){
    console.log('我不需要被收集')
}

//对obj对象属性重新赋值
obj.name = 'wx'
obj.age = 19

//执行notify
dependName.notify()
dependAge.notify()

这样看下来，一个属性对应一个depend，每个属性一一对应的关系是不是更清晰了。

四、实现自动监听对象的变化 

       上面的实现中，相信大家也发现了，对对象做出改变后，还是自己手动去执行notify，而且在手动执行的时候，我们还不知道哪个属性对应的哪个notify，直接一起全部执行。这明显不符合响应式啊，我们肯定要解决这个问题。但是要怎么去实现这个功能呐？对于这个问题的处理，vue2是采用ES5的Object.defineproperty去监听对象的属性变化，而vue3是采用ES6的proxy去监听对象属性变化（我会对这两个都进行实现，现在先以vue3的proxy为例进行实现，最后我会再用vue2的Object.defineproperty去替换proxy实现）。只要监听到属性的变化后，就直接在set捕获器中执行notify就行了。

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(func) {
    this.reactiveFns.push(func)
  }

  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}

//分别对name与age定义一个depend实例
const dependName = new Depend()
const dependAge = new Depend()

//定义一个依赖收集函数
function watchFn(func,attri){
    switch(attri){
        case:'name'{
            dependName.addDepend(func)
        }
        case:'age'{
            dependAge.addDepend(func)
        }
    }
}

// 监听对象的属性变量，里面还使用了Reflect协助实现
const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    //执行notify
    switch(key){
        case:'name'{
            dependName.notify()
        }
        case:'age'{
            dependAge.notify()
        }
    }
  }
})

//传入响应函数，watchFn来进行收集
watchFn(function(){
   console.log('发现objProxy对象的name属性改变了，我要开始执行了')
   return newName = objProxy.name
},'name') 

watchFn(function(){
   console.log('发现objProxy对象的age属性改变了，我要开始执行了')
   return newAge = objProxy.age
},'age') 

objProxy.name = "wx"
objProxy.age = 19

五、依赖收集管理的进一步处理

       在第三节的时候后，我们对于存放响应函数的数组管理时通过给每一个对象属性创建一个depend进行管理。但是这样也不符合响应式，因为我们并不知道有哪些对象，而且不知道哪些响应函数对应哪个属性（之前是因为传递的固定属性名，但是真实的情况我们是不知道的），没法提前对每个对象属性创建对应的depend管理。

       这里我们就需要用到weakmap、map这两种数据结构进行管理。实现的大致思路是，每个对象对应一个map，所有的map存放在一个weakmap。这里为啥用weakmap存放map，而不直接还是用map去存放所有map，是因为weakmap是一个弱引用数据结构，有利于响应式的性能。

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(func) {
    this.reactiveFns.push(func)
  }

  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}

//定义一个全局变量，这里用于收集属性的响应函数,
let dependFnc = null
//之前的watchFn函数是不对的，因为watchFn是不知道哪些响应函数是哪个对象的，哪个对象里的哪个属性，现在将响应函数加入数组的操作放在get捕获器里，
//因为捕获器是能精确的获取到是哪个对象的哪个属性在操作，所以就直接将创建depend与保存响应函数放入get捕获器里执行。
function watchFn(fn) {   
  //将收集的响应函数赋值给全局变量，这么做的作用是get将响应函数保存在数组中的时候是没办法直接拿到响应函数的。只有watchFn能获取到，每当watchFn收集
  //到响应函数就直接赋值给全局变量，因为get是能获取到全局变量的。
  dependFnc = fn   
  //这里拿到响应函数后，是需要执行的，因为响应函数是会获取对象属性的，一旦获取对应属性就会触发get捕获器，相当于是一个触发条件
  fn()
  //重新赋值null
  dependFnc = null
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {   //没有的话，说明是第一次获取，还没有创建相关的map
    map = new Map()
    targetMap.set(target, map)
  }

  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {   //第一次获取，创建对应的depend实例
    depend = new Depend()
    map.set(key, depend)
  }
  return depend    //返回需要的depend
}


const obj = {
  name: "cj", 
  age: 18
}

const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    //每当获取对象属性时，就创建对应的depend
    const depend = getDepend(target, key)
    //创建depend后，将响应函数加入到对应的数组中保存。
    depend.addDepend(dependFnc)
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    // 获取该对象对应属性的depend
    const depend = getDepend(target, key)
    //执行该属性的响应函数
    depend.notify()
  }
})

watchFn(function() {
  console.log('发现objProxy对象的name属性改变了，我要开始执行了')
   return newName = objProxy.name
})

watchFn(function() {
  console.log('发现objProxy对象的age属性改变了，我要开始执行了')
   return newAge = objProxy.age
})

objProxy.name = "wx"
objProxy.age = 19

       现在已经可以，当对对象操作时，可以自动收集对应响应函数，并自动执行对应响应函数。离响应式实现越来越近了。

六、优化与重构

       现在还存在的问题，当watchFn收集响应函数后，在去执行响应函数触发get捕获器时，万一响应函数内多次访问同一属性，就会多次触发get捕获器，也就会多次执行addDepend方法，多次添加一样的dependFnc全局变量。这显然是不对的，我们这里可以采用set数据结构去保存响应函数，而不是数组。set数据结构可以自动去除内部相同的数据。

//定义一个全局变量，这里用于收集属性的响应函数,
let dependFnc = null

class Depend {
  constructor() {
    //现在不用数组存放响应函数了，改为set数据结构
    this.reactiveFns = new set
  }

  //优化添加响应函数步骤，直接在addDepend判断addDepend是否为空，不为空就直接添加
  addDepend(){
    if(dependFnc){
       this.reactiveFns.add(dependFnc)
    }  
  }
  
  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}


//之前的watchFn函数是不对的，因为watchFn是不知道哪些响应函数是哪个对象的，哪个对象里的哪个属性，现在将响应函数加入数组的操作放在get捕获器里，
//因为捕获器是能精确的获取到是哪个对象的哪个属性在操作，所以就直接将创建depend与保存响应函数放入get捕获器里执行。
function watchFn(fn) {   
  //将收集的响应函数赋值给全局变量，这么做的作用是get将响应函数保存在数组中的时候是没办法直接拿到响应函数的。只有watchFn能获取到，每当watchFn收集
  //到响应函数就直接赋值给全局变量，因为get是能获取到全局变量的。
  dependFnc = fn   
  //这里拿到响应函数后，是需要执行的，因为响应函数是会获取对象属性的，一旦获取对应属性就会触发get捕获器，相当于是一个触发条件
  fn()
  //重新赋值null
  dependFnc = null
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {   //没有的话，说明是第一次获取，还没有创建相关的map
    map = new Map()
    targetMap.set(target, map)
  }

  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {   //第一次获取，创建对应的depend实例
    depend = new Depend()
    map.set(key, depend)
  }
  return depend    //返回需要的depend
}


const obj = {
  name: "cj", 
  age: 18
}

const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    //每当获取对象属性时，就创建对应的depend
    const depend = getDepend(target, key)
    //这里就不用管全局变量是啥了，直接调用addDepend方法就好了
    depend.addDepend()
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    // 获取该对象对应属性的depend
    const depend = getDepend(target, key)
    //执行该属性的响应函数
    depend.notify()
  }
})

watchFn(function() {
  console.log('发现objProxy对象的name属性改变了，我要开始执行了')
   return newName = objProxy.name
})

watchFn(function() {
  console.log('发现objProxy对象的age属性改变了，我要开始执行了')
   return newAge = objProxy.age
})

objProxy.name = "wx"
objProxy.age = 19

七、对象的响应式化封装（vue3）

       最后大家还会有疑惑，上面的代码中是单独对obj对象做了处理，要是还有其它对象，那不是还要new proxy去创建一个代理，写入get、set捕获器，那代码量也太大了。而且我们咋知道有哪些对象。要解决这个问题，我们就的从创建对象的时候入手，直接在创建对象的时候就进行响应式化。把创建代理的步骤直接进行封装。

let dependFnc = null

class Depend {
  constructor() {
    this.reactiveFns = new set
  }

  addDepend(){
    if(dependFnc){
       this.reactiveFns.add(dependFnc)
    }  
  }
  
  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}

function watchFn(fn) {   
  dependFnc = fn   
  fn()
  dependFnc = null
}

const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {   
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {   //第一次获取，创建对应的depend实例
    depend = new Depend()
    map.set(key, depend)
  }
  return depend    //返回需要的depend
}

//封装创建代理对象操作
function reactive(obj){
  return new Proxy(obj, {
    get: function(target, key, receiver) {
      const depend = getDepend(target, key)
      depend.addDepend()
      return Reflect.get(target, key, receiver)
    },
    set: function(target, key, newValue, receiver) {
      Reflect.set(target, key, newValue, receiver)
      const depend = getDepend(target, key)
      depend.notify()
    }
  })
}

//调用reactive函数，直接传入要创建的字面量对象
const obj = reactive({
    name:'cj',
    age:18
})
const info = reactive({
    name:'cx',
    height:'162cm'
})

watchFn(function() {
  console.log('发现obj对象的name属性改变了，我要开始执行了')
   return newName = obj.name
})

watchFn(function() {
  console.log('发现info对象的height属性改变了，我要开始执行了')
   return newHeight = info.height
})

obj.name = "wx"
info.height = '180cm'

       学过vue3的小伙伴，看见reactive是不是一下就想起来了vue3的reactiveAPI了，这不就是reactive的实现过程吗。到这里vue3的响应式就完成了。

八、对象的响应式化封装（vue2）

      上面我们对vue3的实现已经完成了，这里就在用vue2的Object.defineproperty去替换vue3的proxy，实现vue2的响应式。

let dependFnc = null

class Depend {
  constructor() {
    this.reactiveFns = new set
  }

  addDepend(){
    if(dependFnc){
       this.reactiveFns.add(dependFnc)
    }  
  }
  
  notify() {
    this.reactiveFns.forEach(fn => fn())
  }
}

function watchFn(fn) {   
  dependFnc = fn   
  fn()
  dependFnc = null
}

const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {   
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {   //第一次获取，创建对应的depend实例
    depend = new Depend()
    map.set(key, depend)
  }
  return depend    //返回需要的depend
}

//封装vue2响应式化操作
function reactive(obj) {
  //直接使用Object.keys方法将对象转为以键名为元素的数组，再forEach进行遍历
  Object.keys(obj).forEach(key => {
    //获取对象属性值
    let value = obj[key]
    //监听对象属性，设置存取描述符
    Object.defineProperty(obj, key, {
      get: function() {
        const depend = getDepend(obj, key)
        depend.depend()
        //返回要访问的属性值
        return value
      },
      set: function(newValue) {
        //将要设置的新值进行赋值
        value = newValue
        const depend = getDepend(obj, key)
        depend.notify()
      }
    })
  })
  //再将obj对象返回
  return obj
}

//调用reactive函数，直接传入要创建的字面量对象
const obj = reactive({
    name:'cj',
    age:18
})
const info = reactive({
    name:'cx',
    height:'162cm'
})

watchFn(function() {
  console.log('发现obj对象的name属性改变了，我要开始执行了')
   return newName = obj.name
})

watchFn(function() {
  console.log('发现info对象的height属性改变了，我要开始执行了')
   return newHeight = info.height
})

obj.name = "wx"
info.height = '180cm'

以上就是vue2的响应式实现

总结

       这样一步一步去实现响应式，有利于更好的去理解响应式，掌握响应式每个点的作用。

cj要学习
关注
专栏目录
Vue响应式实现原理
nanianshui的博客
05-23 2160
Vue响应式原理 Vue是数据驱动视图实现双向绑定的一种前端框架，采用的是非入侵性的响应式系统，不需要采用新的语法（扩展语法或者新的数据结构）实现对象(model)和视图（view）的自动更新，数据层（Model）仅仅是普通的Javascript对象，当Modle更新后view层自动完成更新，同理view层修改会导致model层数据更新。 双向绑定实现机制 Vue的双向绑定实现机制核心： 依赖于Object.defineProperty()实现数据劫持 订阅模式 Object.defineProper
vue3.0响应式原理实现
sinat_39726996的博客
07-26 795
之前写了两篇vue2.0的响应式原理，链接在此，对响应式原理不清楚的请先看一部掘金看下两篇 和尤雨溪一起进阶vue 和尤雨溪一起进阶vue（二） 现在来写一个简单的3.0的版本吧 大家都知道，2.0的响应式用的是Object.defineProperty，结合发布订阅模式实现的，3.0已经用Proxy改写了 Proxy是es6提供的新语法，Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。 语法： const p = new Proxy(target, handler)
响应式原理的实现
浮游的博客
04-14 915
什么是响应式 自动响应数据变量的代码机制，我们就称之为是响应式的 通过数据劫持和发布者-订阅者模式来实现。一旦发现属性发生改变就通知订阅者，触发相应的回调，来改变视图。 一、Vue3响应式原理的实现 下面的步骤是一步步推导，逐步实现出来的过程。 第一步：响应式函数的封装 // 响应式函数的封装 const reactiveFns = [] function watchFn(fn) { reactiveFns.push(fn) } const obj = { name: 'fuyou', age
vue响应式原理的实现
邱先生的博客
04-20 836
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档 引言 Vue的数据双向绑定，响应式原理，其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。 Observer 通过O...
手把手实现vue响应式原理 -（六）
frontendchen的博客
12-14 1069
vue3 和 vue2 响应式原理分别实现
vue.js响应式原理解析与实现
10-18
下面我们将详细讲解Vue.js响应式原理及其实现方式。 首先，我们要了解Vue.js如何实现数据的响应式。这主要依赖于JavaScript的`Object.defineProperty`方法。在ES5中，`Object.defineProperty`允许我们为对象的属性...
浅谈Vue 数据响应式原理
12-12
总的来说，Vue的数据响应式原理主要包含以下几个步骤： 1. 创建Vue实例时，使用`defineReactive()`将数据对象转化为响应式。 2. 在访问属性时，收集依赖。 3. 修改属性时，通知所有依赖该属性的观察者更新。 4. 观察...
VUE响应式原理
qq_42489251的博客
10-15 1405
Vue的响应式原理核心是通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了访问器属性，当读取data中的数据时自动调用get方法，从实际保存数据的半隐藏属性中，读取出现在的属性值，return外部；自动调用set方法，检测到数据的变化，会通知观察者Watcher，观察者Watcher自动触发重新render当前组件（子组件不会重新渲染），生成新的虚拟Dom树，Vue框架会遍历并对比新虚拟DOM树和旧虚拟DOM树中每个节点的差别
Vue响应式原理深入解析及注意事项
08-28
Vue.js的响应式原理是其核心特性之一，它使得数据模型与视图之间能自动保持同步，无需手动操作DOM。当数据发生变化时，Vue能够自动检测到这些变化，并更新对应的视图部分。这一机制主要是通过JavaScript的`Object....
Vue响应式原理Observer、Dep、Watcher理解
10-16
在Vue.js框架中，响应式原理是其核心特性之一，允许Vue检测数据变化并自动更新视图。响应式原理主要涉及三个概念：Observer、Dep、Watcher。本篇将详细介绍这三个概念，并通过示例代码和图示来加深理解。 ### ...
响应式布局方法总结
weixin_45189747的博客
11-10 1923
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
如何实现响应式（自适应）网页
zyf971020的博客
10-14 1066
如何实现响应式（自适应）网页
如何实现自适应页面 (响应式布局)
a26110056的博客
05-19 3890
当我们在做网页时，应当充分考虑到网页自适应的问题 否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况 方案一：用比例控制大小 在网页代码的头部，加入一行viewport元标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 以下是相关的属性的解释： width：控...
【25】手把手教你响应式布局（一）
热门推荐
程序猿的博客
10-02 3万+
一：布局方式有如下几种： 1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点： 1.1.页面很死板，在更大的屏幕上，页面左右2边留白。 1.2.不适应响应性布局。   2.  流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式： 百分比宽度 = 目标元素
如何用一简单的CSS制作响应式HTML网页
hzp666的博客
12-12 2万+
如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。最赞的一点就是：这个响应式效果只需要添加一行CSS。这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。现在让我们开始吧！设置对于本文，我们将继续使用我们在第一篇CSS Grid文章中...
如何实现响应式布局
qq_32216775的博客
01-09 1万+
个人博客文章链接：http://www.huqj.top/article?id=149 一、什么是响应式布局     所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。相信大家做前端页面的时候都会有这样的困惑：一个页面在自己电脑上看着好好的，一旦从别的分辨率...
响应式布局
小诺
12-02 1753
首先我们应该遵循移动优先原则，交互和设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）。 一、响应式布局 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是
实现简易的 Vue 响应式
CRMEB小程序商城的博客
03-24 4944
我们首先封装一个响应式处理的方法 defineReactive，通过 defineProperty 这个方法重新定义对象属性的 get 和 set 描述符，来实现对数据的劫持，每次 读取数据 的时候都会触发 get ，每次 更新数据 的时候都会触发 set ，所以我们可以在 set 中触发更新视图的方法 update 来实现一个基本的响应式处理。 /** * @param {*} obj 目标对象 * @param {*} key 目标对象的一个属性 * @param {*} val 目标对象的
CMAKE之add_dependencies使用
BeanGuohui的博客
09-10 2万+
CMAKE之add_dependencies使用问题引入问题解决总结 问题引入 在项目中通常会遇见这样的情况：（例如一个项目中有：main，libhello.a， libworld.a），当项目过小的时候，编译顺序是*.a，然后是main，但是当一个项目的文件过于庞大，就会导致编译的顺序不会按照主CMAKE的add_subdirectory引入的先后顺序，为了解决这一问题，就需要使用add_dependencies进行依赖指定。 问题解决 该样例的工程结构如下： ├── CMakeLists.txt//
Vue响应式原理：Observer与Dep实现
Vue的响应式原理是通过`observer`深度监听数据对象，结合`Dep`类管理和通知依赖，以及getter和setter的联动，实现了数据变化与视图更新的自动化。这种设计使得开发者可以专注于业务逻辑，而无需手动处理数据与视图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值