[[416771]]

寫(xiě)在前面

在體驗(yàn)Vue3之前，我們先來(lái)了解一下Vu3到底有哪些亮點(diǎn)之處。

總共有6大特點(diǎn)：

• Performance(性能比vue2的runtime快2倍左右)
• Tree shaking support(按需打包模塊)
• Better TypeScript support(更好的TS代碼支持)
• Composition API(組合API)
• Custom Renderer API(自定義渲染API)
• Fragment, Teleport, Suspense

一、vue3的起源setup

1.理解：vue3.0的組合api舞臺(tái)是setup

2.setup所有的數(shù)據(jù)方法等都配置在setup中

3.setup有兩種返回值:

• 若返回一個(gè)對(duì)象，則對(duì)象中的屬性、方法，在模板中均可直接使用
• 若返回一個(gè)渲染函數(shù)，則可以自定義渲染內(nèi)容

4.注意：

• vue3.0盡量不要和vue2的配置混用
• vue2配置(data、methods、computed等)是可以訪問(wèn)vue3的setup屬性方法
• setup中不可訪問(wèn)vue2的配置(data、methods、computed等)
• 如果重名，則vue3為準(zhǔn)

5.setup不能是一個(gè)async函數(shù)，因?yàn)榉祷刂挡辉偈莚eturn的對(duì)象，而是promise，模板看不到return對(duì)象中的屬性(后期也可以使用suspense和異步組件的配合得到promise)

二、ref函數(shù)

作用：用于定義一個(gè)響應(yīng)式數(shù)據(jù)

語(yǔ)法：const name = ref(initValue)

• 創(chuàng)建一個(gè)包含響應(yīng)式數(shù)據(jù)的引用對(duì)象(reference對(duì)象，簡(jiǎn)稱(chēng)ref對(duì)象)
• js中操作數(shù)據(jù)：name.value
• 模板中讀取數(shù)據(jù)：不需要value，直接<div>{{name}}</div>

注意：

• 接受的數(shù)據(jù)：基本類(lèi)型、對(duì)象類(lèi)型
• 基本數(shù)據(jù)類(lèi)型：響應(yīng)式是靠Object.defineProperty()的get與set進(jìn)行設(shè)置和取值操作
• 對(duì)象類(lèi)型的數(shù)據(jù)：內(nèi)部使用了vue3中的新函數(shù)--reactive函數(shù)(其實(shí)就是proxy代理)

三、reactive函數(shù)

• 作用：用于定義一個(gè)對(duì)象類(lèi)型的響應(yīng)式數(shù)據(jù)(基本類(lèi)型不要用它，要用ref函數(shù))
• 語(yǔ)法：const 代理對(duì)象(proxy) = reactive(源對(duì)象)接收一個(gè)對(duì)象或數(shù)組，返回一個(gè)代理對(duì)象(proxy的實(shí)例對(duì)象，簡(jiǎn)稱(chēng)proxy對(duì)象)
• reactive定義的響應(yīng)式是『深層次的』，對(duì)象中的所有對(duì)象都是響應(yīng)式的
• 內(nèi)部基于es6的proxy實(shí)現(xiàn)，通過(guò)代理對(duì)象內(nèi)部數(shù)據(jù)進(jìn)行操作
• 經(jīng)過(guò)reactive處理的對(duì)象是不能使用解構(gòu)語(yǔ)法的，因?yàn)闀?huì)失去響應(yīng)式特性，可以使用toRefs將reactive每個(gè)屬性都轉(zhuǎn)成ref響應(yīng)式，這樣就可以進(jìn)行響應(yīng)式處理。

ref和reactive的差異

reactive就是用于將對(duì)象數(shù)據(jù)轉(zhuǎn)為響應(yīng)式，與vue2的observable類(lèi)似，而ref用于獲得單獨(dú)或?yàn)榛A(chǔ)數(shù)據(jù)類(lèi)型轉(zhuǎn)為響應(yīng)式。

為什么在vue3中會(huì)有兩個(gè)將數(shù)據(jù)轉(zhuǎn)為響應(yīng)式數(shù)據(jù)的api，我們來(lái)進(jìn)行詳細(xì)說(shuō)明：

• ref接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的ref對(duì)象，對(duì)象具有指向內(nèi)部值的單個(gè)property.value
• reactive接受一個(gè)對(duì)象，并返回對(duì)象的響應(yīng)式副本，其將對(duì)象中的每個(gè)元素都轉(zhuǎn)為ref對(duì)象

簡(jiǎn)而言之，reactive可以將對(duì)象數(shù)據(jù)轉(zhuǎn)為響應(yīng)式，可以將對(duì)象中的每個(gè)元素都轉(zhuǎn)為ref響應(yīng)式數(shù)據(jù);而ref不僅可以將對(duì)象數(shù)據(jù)轉(zhuǎn)為響應(yīng)式，還可以處理基礎(chǔ)數(shù)據(jù)類(lèi)型(string、boolean等)。

之所以會(huì)有此差異，那時(shí)因?yàn)関ue3中的響應(yīng)式是基于proxy實(shí)現(xiàn)的，而對(duì)于proxy的target必須是引用數(shù)據(jù)類(lèi)型，即存放在堆內(nèi)存中通過(guò)指針進(jìn)行引用的對(duì)象。為什么是代理的引用數(shù)據(jù)類(lèi)型，那是因?yàn)楹?jiǎn)單數(shù)據(jù)類(lèi)型每次賦值都是全新的數(shù)據(jù)，根本無(wú)法進(jìn)行代理，因此難以實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)類(lèi)型的響應(yīng)式。

如果我們想要獲取簡(jiǎn)單數(shù)據(jù)類(lèi)型的響應(yīng)式，應(yīng)該如何做呢?

vue3中也考慮到這點(diǎn)，可以通過(guò)ref進(jìn)行簡(jiǎn)單數(shù)據(jù)類(lèi)型的響應(yīng)式處理。ref通過(guò)創(chuàng)建內(nèi)部狀態(tài)，將值掛到value上，因此ref生成的對(duì)象要通過(guò).value獲取使用。而重寫(xiě)get/set獲得的監(jiān)聽(tīng)，同時(shí)對(duì)對(duì)象的處理也依賴(lài)了reactive的實(shí)現(xiàn)。

正是如此，ref既可以處理簡(jiǎn)單數(shù)據(jù)類(lèi)型，又可以將引用數(shù)據(jù)類(lèi)型進(jìn)行響應(yīng)式處理。在實(shí)踐中，我們應(yīng)該避免將reactive當(dāng)作vue2的data在頂部將所有變量進(jìn)行聲明，而是應(yīng)該結(jié)合具體的應(yīng)用和邏輯進(jìn)行就近聲明。

class RefImpl<T> { 
  private _value: T 
 
  public readonly __v_isRef = true 
 
  constructor(private _rawValue: T, public readonly _shallow = false) { 
    this._value = _shallow ? _rawValue : convert(_rawValue) 
  } 
 
  get value() { 
    track(toRaw(this), TrackOpTypes.GET, 'value') 
    return this._value 
  } 
 
  set value(newVal) { 
    if (hasChanged(toRaw(newVal), this._rawValue)) { 
      this._rawValue = newVal 
      this._value = this._shallow ? newVal : convert(newVal) 
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal) 
    } 
  } 
} 
... 
const convert = <T extends unknown>(val: T): T => 
  isObject(val) ? reactive(val) : val 
... 

四、Vue3中的響應(yīng)式原理

vue2的響應(yīng)式原理：

• 對(duì)象類(lèi)型：通過(guò)Object.defineProperty()對(duì)屬性的讀取、修改進(jìn)行攔截(數(shù)據(jù)劫持)
• 數(shù)組類(lèi)型：通過(guò)重寫(xiě)更新數(shù)組的一系列方法來(lái)實(shí)現(xiàn)攔截。(對(duì)數(shù)組的變更方法進(jìn)行包裹)

Object.defineProperty(data,"count",{ 
  get(){}, 
  set(){} 
}) 

存在問(wèn)題：

• 新增屬性、刪除屬性，界面不會(huì)同步更新
• 直接通過(guò)下表修改數(shù)組，界面不會(huì)自動(dòng)更新

vue3的響應(yīng)式原理

• 通過(guò)proxy代理：攔截對(duì)象中任意屬性的變化，包括：屬性值的讀寫(xiě)、屬性值的添加、刪除等
• 通過(guò)reflect反射：對(duì)被代理對(duì)象的屬性進(jìn)行操作

五、reactive和ref的差異

定義數(shù)據(jù)

• ref：用于定義基本數(shù)據(jù)類(lèi)型
• reactive：用于定義引用數(shù)據(jù)類(lèi)型
• 注意：ref也可以用于定義引用數(shù)據(jù)類(lèi)型，內(nèi)部會(huì)自動(dòng)通過(guò)ractive轉(zhuǎn)為代理對(duì)象

原理

• ref：通過(guò)Object.defineProperty()的set和get屬性實(shí)現(xiàn)響應(yīng)式(數(shù)據(jù)劫持)
• reactive：通過(guò)Proxy來(lái)實(shí)現(xiàn)響應(yīng)式(數(shù)據(jù)劫持)，并通過(guò)Reflect操作愿對(duì)象內(nèi)部的數(shù)據(jù)

使用

• ref：ref定義的數(shù)據(jù)需要通過(guò).value進(jìn)行操作，模板讀取數(shù)據(jù)時(shí)不需要使用.value
• reactive：reactive定義的數(shù)據(jù)無(wú)需.value，即可進(jìn)行設(shè)置和讀取

六、計(jì)算屬性和監(jiān)視

與vue2中的computed配置功能一致

寫(xiě)法：

import {computed} from "vue"; 
setup(){ 
  const sum = computed(()=>{ 
    return num1 + num2; 
  }) 
} 

import {computed,reactive} from "vue" 
setup(){ 
  const person = reactive({ 
    firstName:"wen", 
    lastName:"bo" 
  }) 
  //簡(jiǎn)寫(xiě) 
  let fullName = computed(()=>{ 
    return person.firstName + "-" + person.lastName; 
  }); 
   
  //完整 
  let fullName = computed(()=>{ 
    get(){ 
      return person.firstName + "-" + person.lastName; 
    }, 
    set(value){ 
      const newArr = value.split("-"); 
      person.firstName = nameArr[0]; 
      person.lastName = nameArr[1]; 
    } 
  }) 
} 

七、watch函數(shù)

與vue2中的watch配置功能一致

注意：

• 監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)時(shí)，oldValue無(wú)法正確獲取，強(qiáng)制開(kāi)啟了深度監(jiān)視(deep配置失敗)
• 監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)中某個(gè)屬性時(shí)，deep配置有效

let person = reactive({ 
  name:"wenbo", 
  age:18, 
  job:{ 
    job1:{ 
      salary:20 
    } 
  } 
}) 
 
// 情況一：監(jiān)視r(shí)ef定義的響應(yīng)式數(shù)據(jù) 
watch(sum,(newValue,oldValue)=>{ 
  console.log("sum變了",newValue,oldValue); 
},{immediate:true}) 
 
// 情況二：監(jiān)視多個(gè)ref定義的響應(yīng)式數(shù)據(jù) 
watch([sum,msg],(newValue,oldValue)=>{ 
  console.log("sum或msg變了",newValue,oldValue); 
}) 
 
/*情況三：監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù) 
  若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則無(wú)法正確獲得oldValue 
  若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則強(qiáng)制開(kāi)啟了深度監(jiān)視 
  此時(shí)的deep不生效 
*/ 
watch(person,(newValue,oldValue)=>{ 
  console.log("perosn變了",newValue,oldValue); 
},{immediate:true,deep:false}) 
 
//情況四：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性 
watch(()=>person.age,(newValue,oldValue)=>{ 
  console.log("person的age變化了",newValue,oldValue) 
}) 
 
//情況五：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某些屬性 
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ 
  console.log("person的name或age變化了",newValue,oldValue) 
}) 
 
//特殊情況-監(jiān)聽(tīng)的對(duì)象的屬性還是個(gè)對(duì)象，此時(shí)deep生效，可以進(jìn)行深度監(jiān)聽(tīng) 
watch(()=>person.job,(newValue,oldValue)=>{ 
  console.log("person的job變化了",newValue,oldValue) 
},{deep:true}) 

注意：

watch監(jiān)聽(tīng)reactive定義的對(duì)象有五種情況

watch監(jiān)聽(tīng)ref定義的響應(yīng)式數(shù)據(jù)有兩種情況：

• ref定義的是基本類(lèi)型數(shù)據(jù)，此時(shí)不能對(duì).value進(jìn)行監(jiān)聽(tīng)。如const num = ref(0)，此時(shí)對(duì)num.value監(jiān)聽(tīng)的話相當(dāng)于直接對(duì)num的值(0)進(jìn)行監(jiān)聽(tīng)了，想想0有啥變化的。
• ref定義的是對(duì)象數(shù)據(jù)類(lèi)型，此時(shí)ref處理后的數(shù)據(jù)是ref實(shí)例的。要監(jiān)聽(tīng)對(duì)象的變化，需要對(duì)對(duì)象的.value進(jìn)行監(jiān)聽(tīng)，因?yàn)閞ef對(duì)象.value是借助reactive處理的響應(yīng)式數(shù)據(jù)proxy。

八、watchEffect函數(shù)

watch的套路：既要指明監(jiān)視的屬性，又要指明監(jiān)視的回調(diào)

watchEffect的套路：不用指明監(jiān)視的哪個(gè)屬性，監(jiān)視的回調(diào)中用到哪個(gè)屬性，就監(jiān)視哪個(gè)屬性

watchEffect有點(diǎn)類(lèi)似computed：

• computed注重的是計(jì)算的值，即回調(diào)函數(shù)的返回值，所以必須要寫(xiě)返回值
• watchEffect注重的是計(jì)算的過(guò)程，即回調(diào)函數(shù)的函數(shù)題，所以不用寫(xiě)返回值

let person = reactive({ 
  name:"wenbo", 
  age:18, 
  job:{ 
    job1:{ 
      salary:20 
    } 
  } 
}) 
 
// warchEffect所指定的回調(diào)中用到的數(shù)據(jù)只要發(fā)生變化，則直接重新執(zhí)行回調(diào) 
watchEffect(()=>{ 
  const x = person.name 
  const y = person.job.job1.salary 
  console.log("watchEffect觸發(fā)了") 
}) 

九、自定義hooks函數(shù)

• hook函數(shù)：本質(zhì)上是一個(gè)函數(shù)，把setup函數(shù)中是用的組合api進(jìn)行封裝
• 類(lèi)似于vue2中mixins
• 優(yōu)點(diǎn)：復(fù)用代碼、使得setup中的邏輯更清晰易懂

<div>pageX：{{point.pageX}}，pageY：{{point.pageY}}<div> 

hooks文件 usePoint.js

import {reactive} from "vue" 
 
const handleClickPoint = ()=>{ 
  //實(shí)現(xiàn)鼠標(biāo)“打點(diǎn)”相關(guān)數(shù)據(jù) 
  let point = reactive({ 
    pageX:0, 
    pagey:0 
  }) 
   
  //實(shí)現(xiàn)鼠標(biāo)“打點(diǎn)”相關(guān)方法 
  const handlePoint = (event)=>{ 
    point.pageX = event.pageX; 
    point.pageY = event.pageY; 
    console.log(event.pageX,event.pageY) 
  } 
  //實(shí)現(xiàn)鼠標(biāo)打點(diǎn)的相關(guān)周期函數(shù) 
  onMounted(()=>{ 
    window.addEventListener("click",handlePoint) 
  }) 
   
  onBeforeUnmounted(()=>{ 
    window.removeEventListener("click",handlePoint) 
  }) 
} 

十、toRef函數(shù)

• 經(jīng)過(guò)ref、reactive處理的對(duì)象不能直接使用解構(gòu)進(jìn)行處理，否則就會(huì)失去響應(yīng)式特性
• 作用：創(chuàng)建一個(gè)ref對(duì)象，其value值指向另一個(gè)對(duì)象中的某個(gè)屬性
• 語(yǔ)法：const name = toRef(person,"name")
• 應(yīng)用：要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí)
• 擴(kuò)展：toRefs與toRef功能一致，但是可以批量創(chuàng)建多個(gè)ref對(duì)象，語(yǔ)法：toRefs(person)

十一、VUE3生命周期

其它組合式api

1. shallowReactive與shallowRef

shallowReactive：只處理對(duì)象最外層屬性的響應(yīng)式(淺響應(yīng)式)

shallowRef：只處理基本數(shù)據(jù)類(lèi)型的響應(yīng)式，不進(jìn)行對(duì)象的響應(yīng)式處理

使用時(shí)機(jī)：

• 如果有一個(gè)對(duì)象數(shù)據(jù)，結(jié)構(gòu)比較深，但變化時(shí)只是外層屬性變化==》shallowReactive
• 如果有一個(gè)對(duì)象數(shù)據(jù)，后續(xù)功能不會(huì)修改該對(duì)象中的屬性，而是生成新的對(duì)象來(lái)替換==》shallowRef

2. readonly與shallowReadonly

• readonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x數(shù)據(jù)(深只讀)
• shallowReadonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x(淺只讀)
• 應(yīng)用場(chǎng)景：不希望數(shù)據(jù)被修改時(shí)

3. toRaw與markRaw

toRaw

• 作用：將一個(gè)由reactive生成的響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象
• 使用場(chǎng)景：用于讀取響應(yīng)式對(duì)象對(duì)應(yīng)的普通對(duì)象，對(duì)這個(gè)普通對(duì)象的所有操作，不會(huì)引起頁(yè)面的更新

markRaw

• 有些值不應(yīng)該被設(shè)置為響應(yīng)式的，例如：復(fù)雜的第三方庫(kù)
• 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí)，跳過(guò)響應(yīng)式轉(zhuǎn)換可以提高性能
• 作用：標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)稱(chēng)為響應(yīng)式對(duì)象
• 應(yīng)用場(chǎng)景：

4. customRef

作用：創(chuàng)建一個(gè)自定義ref，并對(duì)其依賴(lài)項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制

示例：

<template> 
  <input type="text" v-model="str"/> 
  <h1>當(dāng)前的值：{{str}}</h1> 
</template> 
 
  <script> 
  import {ref, customRef} from "vue"; 
  export default { 
    setup(){ 
      // 自定義一個(gè)ref：myRef 
      const myRef = (value)=>{ 
        return customRef((track,trigger)=>{ 
          return{ 
            get(){ 
              console.log(`有人從myRef中讀取了此數(shù)據(jù)${value}`); 
              track(); 
              return value; 
            }, 
            set(newValue){ 
              console.log(`有人把myRef的數(shù)據(jù)改為了新數(shù)據(jù)${newValue}`); 
              value = newValue; 
              trigger();//通知vue去重新解析模板 
            } 
          } 
        }); 
      } 
      const str = myRef("hello"); 
      return{ 
        str 
      } 
    } 
  } 
  </script> 

5. provide與inject

•  作用：實(shí)現(xiàn)祖孫組件間的通信
• 應(yīng)用場(chǎng)景：父組件有一個(gè)provide選項(xiàng)提供數(shù)據(jù)，子組件有一個(gè)inject來(lái)獲取使用數(shù)據(jù)

6. 響應(yīng)式數(shù)據(jù)的判斷

•  isRef：檢查一個(gè)值是否為ref對(duì)象
•  isReactive：檢查一個(gè)值是否為reactive創(chuàng)建的響應(yīng)式代理
•  isReadonly：檢查一個(gè)對(duì)象是否是由readonly創(chuàng)建的只讀代理
•  isProxy：檢查一個(gè)對(duì)象是否是由reactive或readonly創(chuàng)建的代理

vue3中使用hook注意點(diǎn)

hook中存在異步問(wèn)題

其實(shí)在使用中可以發(fā)現(xiàn)，其實(shí)hook本質(zhì)上就是進(jìn)行抽取的函數(shù)，靈活性比較高，但是在涉及到異步邏輯時(shí)考慮不周全就會(huì)導(dǎo)致很多問(wèn)題。hook是可以覆蓋異步情況的，但是必HTML須在setup當(dāng)中執(zhí)行時(shí)返回有效對(duì)象不能被阻塞。

通常異步具有兩種風(fēng)格：

外部沒(méi)有其它依賴(lài)，只是交付渲染的響應(yīng)變量。對(duì)于此種情況，可以通過(guò)聲明、對(duì)外暴露響應(yīng)變量，在hook中使用異步修改的方式。

外部具有依賴(lài)，需要在使用側(cè)進(jìn)行加工。對(duì)于此種情形，可以通過(guò)對(duì)外暴露Promise的方式，使得外部獲取到同步操作的能力。

this的問(wèn)題

由于setup處于生命周期的beforeCreate和created階段之間，因此不能獲取到this。當(dāng)然我們可以通過(guò)setup的第二個(gè)參數(shù)context獲取到類(lèi)似與this的部分能力，但是對(duì)于想操作路由、vuex等能力則受到了限制，為此最新的router@4、vuex@4都提供了組合式的api。

由于vue2底層限制使得無(wú)法使用這些hook，為此可以通過(guò)引用實(shí)例的方式獲取一定的操作能力，也可以通過(guò)getCurrentInstance獲得組件實(shí)例上掛載的對(duì)象。

雖然組合式api的響應(yīng)式原理是通過(guò)Object.defineProperty改寫(xiě)屬性的，與vue的響應(yīng)式原理相同，但是在具體實(shí)現(xiàn)方式上存在差異，因此在setup中與vue原生的響應(yīng)式并不互通。正因此，導(dǎo)致即使拿到相應(yīng)的實(shí)例也沒(méi)有辦法監(jiān)聽(tīng)它們的響應(yīng)式，只能通過(guò)在選項(xiàng)配置進(jìn)行使用。

vue3中常見(jiàn)的組件

1. Fragment組件

在vue2中：組件必須有一個(gè)根標(biāo)簽

在vue3中：組件可以沒(méi)有根標(biāo)簽，內(nèi)部會(huì)將多個(gè)標(biāo)簽包裹在Fragment虛擬元素中

好處：減少標(biāo)簽層級(jí)，減少內(nèi)存占用

2. Teleport

Teleport時(shí)倚重能夠?qū)⒔M件html結(jié)構(gòu)移動(dòng)到指定位置的技術(shù)

語(yǔ)法：

main.vue

<div name="modal"></div> 
<Modal :isOpen="isOpen" @closeModal="closeModal"/> 
<button @click="openModal" >open modal</button> 

modal.vue

<teleport to='#modal'> 
   <div class="modal-box" v-if="isOpen"> 
     <slot>this is a modal</slot> 
     <button @click="handleCloseModal">close</button> 
   </div> 
 </teleport> 

3. suspense

等待異步組件時(shí)渲染一些額外內(nèi)容，讓?xiě)?yīng)用有更好的用戶體驗(yàn)。

使用步驟：

• 異步引入組件
• 使用suspense包裹組件，并配置好default與fallback。

import {defineAsyncComponent} from "vue" 
const child =defineAsyncComponent(()=>import("./components/child.vue")) 

【編輯推薦】

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
2. 云中的容器：你有哪些選擇？
3. 5G消息全力邁入發(fā)展期
4. 什么是域名劫持？遇到域名劫持要怎么處理
5. 自學(xué)編程，到底先選什么語(yǔ)言？
6. 一文看完網(wǎng)絡(luò)爬蟲(chóng)發(fā)展史