主頁 >  其他 > Vue回應式原理的簡單模型

Vue回應式原理的簡單模型

2021-05-05 14:58:44 其他

1.前言

最近在梳理vue回應式的原理，有一些心得，值得寫一篇博客出來看看，
其實之前也嘗試過了解vue回應式的原理，畢竟現在面試看你用的是vue的話，基本上都會問你幾句vue回應式的原理，以往學習這塊就是看看別人寫的文章，或者翻翻原始碼，這個程序中發現相當一部分文章看完之后一句話總結就是—— vue通過 Object.defineProperty 或者 Proxy API 攔截了資料的getter/setter，再在getter/setter里面做資料回應的相關邏輯，除此之外就一無所知了，與此同時又發現直接看原始碼的話，所花費的時間跟識訓比太小了，當然，看原始碼困難的原因還是現在的水平不夠，沒到看原始碼的那一步，
后來我在知乎上看到 一年內的前端看不懂前端框架原始碼怎么辦？這個問題，以及尤雨溪對 維護一個大型開源專案是怎樣的體驗？ 這個問題的回答，思考總結了這么幾點啟示：

  1. 注意資料結構、演算法、設計模式等基礎能力，這些基礎能力的不足，往往導致我們理解不了原始碼作者的想法，同時，提升這些基礎能力也可以提高我們的上限，
  2. 從某些功能點入手，不要從入口檔案開始看，比如vue，我對其回應式原理比較感興趣，我就專門去看回應式相關的原始碼和文章，
  3. 不要試圖弄清原始碼的每一行代碼，首要的是掌握其思想，原始碼的細節非常多，陷入其中往往會對閱讀原始碼造成極大的困難，最重要的是學習原始碼為了實作某些功能而采用了什么方法，沒有必要了解原始碼每一行都干了什么，
  4. 看一百遍，不如做一遍，有時候光看原始碼和文章，不一定能有多少識訓，或者看了就忘了，其實按照自己的理解或者想法動手實作一遍會更好，具體實作細節不一定要和原始碼對齊，功能上也可以簡陋一點，我相信自己做一遍，能幫助我們更為高效的理解原始碼，

Vue回應式的關鍵在于資料劫持和發布訂閱模式，資料劫持的目的是在于實作發布訂閱，通過發布訂閱模式，在資料發生變更時通知到各“訂閱者”，也就是Vue中的各種模板語法、計算屬性、偵聽器等等，下面就先介紹與發布訂閱相關的幾個概念，然后通過自己實作一個簡單版Vue的方式介紹一下Vue2.0和Vue3.0回應式的簡單模型，注意只是簡單模型，但應該可以幫你應付大部分的面試，
本篇文章所用到的代碼都放到了GitHub上

2.觀察者模式

2.1 概念

觀察者模式是一種通知機制，讓發送通知的一方（被觀察者）和接收通知的一方（觀察者）能彼此分離，互不影響，
觀察者模式和發布訂閱模式是有區別的，具體后面會詳細介紹，

2.2 示例

這里通過一個簡單的例子展示觀察者模式，具體的業務邏輯是在商店有新商品上架時通知到顧客，為了方便，這個例子可以直接通過node運行，不需要關注ui的實作，

// 被觀察者
module.exports = class Store {
  constructor() {
    // 商品串列
    this.products = new Set()
    // 觀察者串列
    this.observers = []
  }

  // 注冊觀察者
  addObserver(watcher) {
    this.observers.push(watcher)
  }

  // 有新商品時通知觀察者
  addProduct(name) {
    if (this.products.has(name)) return

    this.products.add(name)

	// 遍歷觀察者串列，呼叫觀察者對應處理方法
    this.observers.forEach((watcher) => watcher.onPublished(name))
  }
}

// 觀察者
module.exports = class watcher {
  constructor(name) {
    this.name = name
  }

  onPublished(product) {
    console.log(`觀察者${this.name}觀察到商品${product}上架`)
  }
}

// 在商店有新品上架時，通知顧客
const Store = require('./store')
const Watcher = require('./watcher')

const supermarket = new Store()
const watchA = new Watcher('A')
const watchB = new Watcher('B')

supermarket.addObserver(watchA)
supermarket.addObserver(watchB)

supermarket.addProduct('香蕉')

setTimeout(() => {
  supermarket.addProduct('蘋果')
}, 3000)

觀察者模式有個明顯的特征，那就是被觀察者維護了一份觀察者串列，也就是說被觀察者知道有哪些觀察者在觀察自己，在需要進行通知的時候，遍歷串列，通知觀察者們，

3.發布訂閱模式

3.1 與觀察者模式的區別

參考上面觀察者模式的例子，在觀察者模式中，被觀察者主動收集觀察者，
而在發布訂閱模式中，發布者不需要主動收集訂閱者，訂閱者訂閱發布平臺，發布者將變更推給發布平臺，由發布平臺告知訂閱者，

3.2 打個比方

我在 GitHub 上看到一個很形象的比喻：

發布-訂閱模式就好像報社， 郵局和個人的關系，報紙的訂閱和分發是由郵局來完成的，報社只負責將報紙發送給郵局，
觀察者模式就好像 個體奶農和個人的關系，奶農負責統計有多少人訂了產品，所以個人都會有一個相同拿牛奶的方法，奶農有新奶了就負責呼叫這個方法，

3.3 示例

根據上面的比喻，我們實作一個簡單的讀者通過郵局訂閱報紙的專案

// 發布者，也就是報社
module.exports = class Publisher {
  constructor() {
    this.subscribers = []
  }

  addSubscriber(subscriber) {
    this.subscribers.push(subscriber)
  }

  publish(value) {
    this.subscribers.forEach((subscribe) =>{
		subscribe.update(value)
	})
  }
}

// 訂閱者，也就是讀者
module.exports = class Subscriber {
  constructor(cb) {
    this.cb = cb
  }

  update(val) {
    this.cb(val)
  }

  // 訂閱者主動訂閱發布平臺
  subscribe(publisher) {
    publisher.addSubscriber(this)
  }
}

// 發布平臺，也就是郵局
module.exports = class Publisher {
  constructor() {
    this.subscribers = []
  }

  addSubscriber(subscriber) {
    this.subscribers.push(subscriber)
  }

  publish(value) {
    this.subscribers.forEach((subscribe) =>{
		subscribe.update(value)
	})
  }
}

// 通過郵局訂閱報紙
const Producer = require('./producer')
const Publisher = require('./publisher')
const Subscriber = require('./subscriber')

// 創建一個報社
const newspaper = new Producer()

// 創建兩個郵局用于分發報紙
const postOfficeA = new Publisher()
const postOfficeB = new Publisher()

// 創建三個讀者，通過不同的報社訂閱報紙
const readerA = new Subscriber((value) => {
  console.log(`讀者A收到${value}`)
})
const readerB = new Subscriber((value) => {
  console.log(`讀者B收到${value}`)
})
const readerC = new Subscriber((value) => {
  console.log(`讀者C收到${value}`)
})

readerA.subscribe(postOfficeA)
readerA.subscribe(postOfficeB)
readerB.subscribe(postOfficeB)
readerC.subscribe(postOfficeB)

newspaper.addPublisher(postOfficeA)
newspaper.addPublisher(postOfficeB)

newspaper.publish('新青年')

從上面的代碼可以看出，發布訂閱模式與觀察者模式最大的不同在于多了一個發布平臺，除此之外，發布者不用主動收集訂閱者，而是指定發布平臺，同時，訂閱者也需要在發布平臺中注冊自己，也就是把自己添加到發布平臺內維護的一份訂閱者串列中，這里發布平臺并沒有主動收集訂閱者，而是訂閱者呼叫發布平臺對應方法，將自己注冊到發布平臺中，發布者變更時首先通知發布平臺，發布平臺再遍歷自己的訂閱者串列，將變更告知訂閱者們，

4.簡單模型

4.1 發布訂閱邏輯

在了解了觀察者模式，以及發布訂閱模式之后，我們就可以理解Vue回應式的基本模型了，在Vue的官網上有這么一張圖：
在這里插入圖片描述
這張圖大概說明了發布訂閱的相關邏輯，通過自己的理解提煉出了三個角色：

  • 發布者
    Vue中宣告的data
  • 訂閱者
    Vue中的模板語法、計算屬性、偵聽器等等都是訂閱者，訂閱者通常都有類似于“回呼函式”的機制，在變更的回呼函式中消費data
    提供一個方法處理發布者變更
  • 發布平臺
    data中的每一個屬性都有對應的發布平臺
    發布平臺收集使用到該屬性的訂閱者
    發布者發送變化時，通知訂閱者屬性發生變更

三個角色聯動的關鍵問題有三個：

  • 如何為data每一個屬性創建發布平臺：
    通過遍歷data的key，為每一個key創建發布平臺
  • 發布平臺如何收集訂閱者：
    1.訂閱者在創建時，會呼叫其變更回呼函式，觸發所用到屬性的getter，
    2.發布平臺維護一個單例 Dep.depTarget，訂閱者呼叫回呼函式前將Dep.depTarget指向自己，回呼完成后將Dep.depTarget置為null，
    3.發布平臺事先通過Object.defineProperty/Proxy API劫持get方法，在屬性被get時將Dep.depTarget添加到該屬性發布平臺的訂閱者串列中，這個程序會判斷Dep.depTarget是否為空、所指向的訂閱者是否已經在串列中等等，
  • 發布平臺如何獲取發布者發送變化：
    發布平臺事先通過Object.defineProperty/Proxy API劫持set方法，在set方法中呼叫該屬性發布平臺訂閱者串列中各訂閱者的處理方法

4.2 Vue2.0回應式的簡單模型

正如前言所說，自己實作一遍，能夠更好的理解原始碼，這里就簡單的通過 Object.defineProperty 實作監聽資料更新進而重繪頁面，
首先創建一個html檔案和js檔案

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>輕量級vue2.0實作</title>
</head>
<body>
  <div id="app"></div>
  
  <script type="module" src="./index.js"></script>
</body>
</html>

// index.js
import Vue from './src/vue.js'

const App = new Vue({
  el: '#app',
  data() {
    return {
      name: '特朗普',
      info: {
        message: '沒有人比他更懂',
      },
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement('span', `${this._data.name} 說: ${this._data.info.message}`)
      ]
    )
  }
})

setTimeout(() => {
  App._data.name = '川寶'
}, 2000)

setTimeout(() => {
  App._data.info.message = 'MAGA!!!!'
}, 4000)

在index.js中我們創建了一個自己實作的Vue實體，將其掛在到id為app的節點上，接下來實作 ./src/vue.js中的代碼

// ./src/vue.js
// 引入處理資料劫持的函式
import observe from './observer.js'
// 引入觀察者
import Watcher from './watcher.js'

class Vue {
  constructor(options) {
    this.$options = options
    this._data = options.data()
    this.render = options.render
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

	// 資料劫持
    observe(this._data)

    // 創建一個訂閱者，訂閱_data的變更
    // 訂閱者收到變更通知時重新渲染組件
    new Watcher(this._data, ()=> {
      this.$mount()
    })
  }

  // 這里就是創建html節點
  createElement(tagName, children) {
    let element = document.createElement(tagName)

    if (Object.prototype.toString.call(children) === '[object Array]') {
      children.forEach((child) => {
        element.appendChild(child)
      })
    } else {
      element.textContent = children
    }

    return element
  }

  // 創建并掛載節點
  $mount() {
    const elements = this.render(this.createElement)
    this.$el.innerHTML = ''
    this.$el.appendChild(elements)
  }
}

export default Vue

接下來就是關鍵的處理資料劫持的方法

// ./src/observer.js
import Dep from './dep.js'

const typeTo = (val) => Object.prototype.toString.call(val)

// 重寫屬性get/set方法
function defineReactive(obj, key, val) {
  // 每個物件的屬性都有一個 Dep 作為該屬性變更的發布平臺
  let dep = new Dep()

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // get時發布平臺收集訂閱者
    get() {
      console.log(`get ${key}`)

      if (Dep.depTarget && Dep.depTarget.id >= 0) {
        console.log(`當前訂閱者id: ${Dep.depTarget.id}`)
      }

      dep.addSub(Dep.depTarget)

      return val
    },
    // set時發布平臺dep通知訂閱者
    set(newValue) {
      console.log(`set ${key}`)

      if (newValue === val) return

      val = newValue
      dep.notify()
    },
  })
}

function walk(obj) {
  Object.keys(obj).forEach((key) => {
    // 如果值是物件，繼續處理物件內部的欄位
    if(typeTo(obj[key]) === '[object Object]'){
      walk(obj[key])
    }

    // 處理屬性本身
    defineReactive(obj, key, obj[key])
  })
}

// observe用于劫持資料
function observe(obj) {
  if(typeTo(obj) !== '[object Object]') {
    return null
  }

  walk(obj)
}

export default observe

在./src/observer.js 中引入了dep.js，這便是發布訂閱模型中的發布平臺對應的類，在observer.js 中通過遍歷物件的key，為每個key創建發布平臺，當屬性get被觸發時，證明有訂閱者在使用該屬性，此時Dep.depTarget會指向使用該屬性的訂閱者，將其添加到發布平臺的訂閱者串列中，當屬性被設值時，觸發set，發布平臺遍歷訂閱者串列，通知訂閱者，
在看./src/dep.js的實作

// ./src/dep.js
// 發布訂閱模型中的發布平臺
class Dep{
  constructor() {
    // 訂閱者串列
    this.subs = []
  }

  addSub(sub) {
  	// 如果訂閱者不在訂閱者串列，就把它添加進來
    if(sub && (this.subs.indexOf(sub) === -1)) {
      this.subs.push(sub)
    }
  }

  notify() {
    console.log('通知變更', this.subs.length)
    this.subs.length > 0 && this.subs.forEach((sub) => {
      sub.update()
    })
  }
}

Dep.depTarget = null

export default Dep

這部分代碼比較易懂，剩下的就是./src/watcher.js的實作了

// ./src/watcher.js
import Dep from './dep.js'

// 通過id區分不同的訂閱者
let id = 0

class Watcher{
  // 在訂閱者創建時，將單例Dep.depTarget指向當前訂閱者
  constructor(value, cb) {
    this.cb = cb

    // 創建時呼叫get方法的目的主要是通過呼叫cb觸發所用到的屬性的get
    // 進而在對應屬性的發布平臺中添加該訂閱者
    this.get()

    // this.val指向vue._data
    this.val = value

    // 通過id可以確定是否為同一個訂閱者
    this.id = ++id
  }

  get() {
    Dep.depTarget = this

    this.cb()

    // 發布平臺收集完訂閱者后重置單例
    Dep.depTarget = null
  }

  // 訂閱者在更新的時候呼叫this.cb()觸發所用到屬性的get
  // 如果該訂閱者不在對應屬性發布平臺的訂閱者串列中，則會被添加進串列
  update() {
    this.get()

    console.log('val value', this.val.name, this.val.info.message)
  }
}

export default Watcher

現在，這個簡易版的Vue2.0就可以在瀏覽器里看到效果了
在這里插入圖片描述

4.2 Vue3.0回應式的簡單模型

在簡易版的實作中，3.0和2.0的不同主要體現在 ./src/observer.js 用Proxy API做資料劫持，由于Proxy API回傳一個Proxy物件，因此index.js和./src/vue.js某些地方的寫法也有所不同

// ./src/observer.js 
// 使用proxy api做資料劫持
import Dep from './dep.js'

const typeTo = (val) => Object.prototype.toString.call(val)

// 重寫屬性get/set方法
function defineReactive(obj) {
  // 每個物件的屬性都有一個 Dep 作為該屬性變更的發布平臺
  let dep = new Dep()

  if (typeTo(obj) !== '[object Object]') {
      return null
  }

  return new Proxy(obj, {
    get(target, key) {
      console.log('觸發get', target, key)

      dep.addSub(Dep.depTarget)

      return target[key]
    },
    set(target, key, value, receiver) {
      console.log('觸發set', target, key, value)

      let newValue = Reflect.set(target, key, value, receiver)

      dep.notify()

      return true
    }
  })
}

function walk(obj) {
  const res = {}

  Object.keys(obj).forEach((key) => {
    if (typeTo(obj[key]) === '[object Object]') {
      // 如果值是物件，繼續處理物件內部的欄位
      res[key] = walk(obj[key])
    } else {
      // 如果不是物件，則賦值
      res[key] = obj[key]
    }
  })

  // 記得處理該屬性本身
  return defineReactive(res)
}

// observe用于劫持資料
function observe(obj) {
  if(typeTo(obj) !== '[object Object]') {
    return null
  }

  return walk(obj)
}

export default observe


// ./src/vue.js 
import observe from './observer.js'
import Watcher from './watcher.js'

class Vue {
  constructor(options) {
    this.$options = options
    this._data = options.data()
    this.render = options.render
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

	// 這里和2.0不同
    this.$data = observe(this._data)

    // 創建一個訂閱者，訂閱_data的變更
    // 訂閱者收到變更通知時重新渲染組件
    new Watcher(this.$data, ()=> {
      this.$mount()
    })
  }

  createElement(tagName, children) {
    let element = document.createElement(tagName)

    if (Object.prototype.toString.call(children) === '[object Array]') {
      children.forEach((child) => {
        element.appendChild(child)
      })
    } else {
      element.textContent = children
    }

    return element
  }

  $mount() {
    const elements = this.render(this.createElement)
    this.$el.innerHTML = ''
    this.$el.appendChild(elements)
  }
}

export default Vue

// index.js
import Vue from './src/vue.js'

const App = new Vue({
  el: '#app',
  data() {
    return {
      name: '特朗普',
      info: {
        message: '沒有人比他更懂',
      },
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement('span', `${this.$data.name} 說: ${this.$data.info.message}`)
      ]
    )
  }
})

setTimeout(() => {
  // 通過$data屬性操作Proxy API回傳的物件
  App.$data.name = '川寶'
}, 2000)

setTimeout(() => {
  App.$data.info.message = 'MAGA!!!!'
}, 4000)

最終呈現的結果和2.0一樣

5.結束

這里只展示了Vue回應式最簡單的模型，肯定在細節和功能上與原始碼有很大的差異，但通過對發布訂閱模式的了解，以及自己分別實作Vue2.0和3.0的簡單模型，下次面試官再問的時候心里就不慌了，

6.參考

【vue系列】從發布訂閱模式解讀，到vue回應式原理實作（包含vue3.0）
觀察者
介紹下觀察者模式和訂閱-發布模式的區別，各自適用于什么場景

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282881.html

標籤：其他

上一篇：【IT人雜文】那些年我追過的SAP和P2P

下一篇：C語言編程規范（個人整理）

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種：三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看，三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看，三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統，“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及：虛擬機CentOs下執行 yum -y install lrzsz命令，出現錯誤：鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示：其實很簡單，往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號， sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求，SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生， 2020-08-28 16:18:25 分類專欄： kail 網路安全 linux 文章標簽： linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么？ 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼： #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘（北斗授時服務器）讓網路資料更精準

    北斗電力時鐘（北斗授時服務器）讓網路資料更精準 北斗電力時鐘（北斗授時服務器）讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年，資訊技術的得了快速發展，互聯網在逐漸普及，其在人們生活和生產中都得到了廣泛應用，并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用，一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub：https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺，后來才有了CTFHub。 感覺不論是網頁UI設計，還是題目質量，賽事跟蹤，工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解（net user / type /md /rd/ dir /cd /net use copy、批處理 等） 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝，密碼啊破解03Linux常用命令04LAMP 01LINUX windows： win03 8 12 16 19 配置不繁瑣 Linux：redhat,centos(紅帽社區版)，Ubuntu server,suse unix:金融機構，證券，銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 （POST注入/XSS漏洞上傳）3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題，描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章，不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》，我也是第一時間得知了這個訊息，然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本： 個人認為這件事也沒什么，還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹：metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包，它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一，它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip：192.168.20.121 靶機ip：192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k，軟體測驗工程師的漲薪史，給我看哭了

    清明節一過，盲猜大家已經無心上班，在數著日子準備過五一，但一想到銀行卡里的余額……瞬間心情就不美麗了。最近，2023年高校畢業生就業調查顯示，本科畢業月平均起薪為5825元。調查一出，便有很多同學表示自己又被平均了。看著這一資料，不免讓人想到前不久中國青年報的一項調查：近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文，所以對學習母語的我們非常不友好 使用網址：https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜，前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜，自動化測驗的需求也越來越高。如今，自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分，它們可以幫助開發人員更快地發現和修復錯誤，提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐：4個DVPP記憶體問題的典型案例解讀

    摘要：由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求（例如，記憶體首地址128位元組對齊），因此需呼叫專用的記憶體申請介面，那么本期就分享幾個關于DVPP記憶體問題的典型案例，并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》，作者：昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊，輔助滲透（埠掃描、登錄密碼爆破、漏洞驗證等） 2、encoders 編碼器模塊，主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手：與相機連接，設定相機引數，采集影像 2) 標定助手：九點標定或是其它的標定，生成標定檔案及內參外參，可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客，先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp)，這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接： https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more

Copyright © 2010-2020 有解無憂