今天這篇文章將會(huì)對(duì)Vue2,Vue3,React的一些用法進(jìn)行對(duì)比，方便小伙伴們學(xué)習(xí)。

數(shù)據(jù)data，在react中叫state

熟悉vue的小伙伴一定對(duì)Vue中的data不會(huì)感到陌生的，反正天天寫Bug的時(shí)候都要用，但是對(duì)于data來說，在Vue2.0,Vue3.0,React中用法是不同的，我們下面依次舉例說明

Vue2.0中的用法

如下代碼是一個(gè)比較簡單的Vue2.0的data用法

<template>
  <div>{{ name }}div>
template>
<script>
export default {
  data() {
    return {
      name: '子君',
      gzh: '前端有的玩'
    }
  }
}
script>
復(fù)制代碼

通過上面的代碼我們可以看到data是一個(gè)函數(shù)，然后函數(shù)中返回了一個(gè)對(duì)象，那么為什么data是一個(gè)函數(shù)呢？比如我們有時(shí)候也會(huì)在App.vue文件中看到data不是函數(shù)的情況。

<template>  
    <div id="app">
    <router-view />
  div>
template>
<script>
export default {
  data:{
    name: '子君',
    sex: '男'
  }
}
script>
復(fù)制代碼

那么為什么我們?cè)谄胀ńM件里面還要將data聲明為函數(shù)呢？Vue官網(wǎng)是這樣解釋的：當(dāng)一個(gè)組件被定義，data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。如果 data 仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！通過提供 data 函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象。

而App.vue可以將data聲明為一個(gè)普通對(duì)象是因?yàn)檎麄€(gè)系統(tǒng)中App.vue只會(huì)被使用到一次，所以不存在上述的問題。

Vue3中的用法

在Vue3中，我們依然可以像Vue2那樣去使用data,當(dāng)然Vue3提供了新的Composition API,在后續(xù)文章中，如果沒有特殊說明，我們提到Vue3就默認(rèn)指的是使用Composition API。

在Composition API提供了響應(yīng)式API,分別是ref和reactive,通過這兩個(gè)API可以生成響應(yīng)式的數(shù)據(jù)

基礎(chǔ)用法

<template>
  <div class="home">
    <div>姓名:{{ state.name }}div>
    <div>公眾號(hào):{{ state.gzh }}div>
    <div>統(tǒng)計(jì):{{ count }}div>
  div>
template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    const state = reactive({
      name: "子君",
      gzh: "前端有的玩"
    });
    const count = ref(0);
    return {
      state,
      count
    };
  }
});
script>

復(fù)制代碼

響應(yīng)數(shù)據(jù)修改

在Vue2.0中，我們修改data的方式一般會(huì)使用this.name = '張三'這種賦值的方式，但是對(duì)于Composition API中因?yàn)樘峁┝藘煞Napi,所以用法稍有區(qū)別

<template>
  <div class="home" @click="handleClick">
    <div>姓名:{{ state.name }}div>
    <div>公眾號(hào):{{ state.gzh }}div>
    <div>統(tǒng)計(jì):{{ count }}div>
  div>
template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      name: "子君",
      gzh: "前端有的玩"
    });
    
    const count = ref(0);
    
    function handleClick() {
      state.name = "張三";
      count.value++;
    }
    
    return {
      state,
      count,
      handleClick
    };
  }
});
script>

復(fù)制代碼

如上代碼所示:

1. 對(duì)于reactive聲明的數(shù)據(jù)

   對(duì)于reactive,我們可以通過state.name來獲取數(shù)據(jù)，然后通過state.name='張三'來修改數(shù)據(jù)

2. 對(duì)于ref聲明的數(shù)據(jù)

   對(duì)于ref聲明的數(shù)據(jù)，ref接受一個(gè)參數(shù)值并返回一個(gè)響應(yīng)式且可改變的 ref 對(duì)象。ref 對(duì)象擁有一個(gè)指向內(nèi)部值的單一屬性 .value。所以我們?cè)诖a中獲取ref對(duì)象的數(shù)據(jù)需要使用count.value的方式，修改值的方式也需要通過count.value++的方式。

   但是這里有一個(gè)特殊的點(diǎn)就是在template,ref對(duì)象會(huì)自動(dòng)解套，意思就是對(duì)于

   統(tǒng)計(jì):{{ count }}
   ,代碼里面可以直接使用count，而不需要寫成count.value，Vue自己就會(huì)將其解套為count.value。

React中的用法

React16.8新增了Hook特性，現(xiàn)在許多團(tuán)隊(duì)已經(jīng)大規(guī)模使用了，所以本文的內(nèi)容更多的是以Hook為主。

在Vue3.0中提供了Composition API,其實(shí)這個(gè)和React的hook用法是很相似的，接下來我們將上文中我們寫的Vue3.0代碼修改為React版本

import React, { useState } from 'react'

export default function() {
  // useState傳入要初始化的狀態(tài)數(shù)據(jù)，然后會(huì)返回一個(gè)數(shù)組
  // 數(shù)組第一項(xiàng)為聲明的數(shù)據(jù)，而第二個(gè)參數(shù)是一個(gè)方法，用于調(diào)用
  // 修改數(shù)據(jù)
 const [name, setName] =  useState('子君')
 const [gzh] = useState('前端有的玩')

 function handleClick() {
   // 在react修改數(shù)據(jù)需要調(diào)用useState返回的方法
   setName('張三')
 }

  return (
    <div onClick={handleClick}>
      <div>姓名：{name}div>
      <div>公眾號(hào): {gzh}div>
    div>
  );
}
復(fù)制代碼

在這段代碼中我們使用到了useState聲明了一個(gè)state變量，useState返回的值是一個(gè)數(shù)組，然后我們通過數(shù)組解構(gòu)獲取到了兩個(gè)變量， const [name, setName] = useState('子君'), 其中name對(duì)應(yīng)聲明的state變量，而setName是一個(gè)函數(shù)，調(diào)用setName可以修改變量的值，比如setName('張三')，這時(shí)候name的值就會(huì)變成了張三

偵聽器watch,監(jiān)督你沒毛病

小編在平常開發(fā)中是比較常用watch的，使用watch可以去監(jiān)聽數(shù)據(jù)的變化，然后在變化之后做一系列的操作。比如有一個(gè)列表頁，我們希望用戶在輸入搜索關(guān)鍵字的時(shí)候，可以自動(dòng)觸發(fā)搜索。此時(shí)除了監(jiān)聽輸入框的input事件之外，還可以通過vue的watch來監(jiān)聽關(guān)鍵字的變化

Vue2.0中的寫法

在vue2.0中，watch常用的寫法包含了兩種，下面我們分別使用不同的寫法來進(jìn)行上述功能的實(shí)現(xiàn)

1. 常規(guī)實(shí)現(xiàn)

   <template>
     <div>
       <div>
         <span>搜索span>
         <input v-model="searchValue" />
       div>
       
     div>
   template>
   <script>
   export default {
     data() {
       return {
         searchValue: ''
       }
     },
     watch: {
       // 在值發(fā)生變化之后，重新加載數(shù)據(jù)
       searchValue(newValue, oldValue) {
         // 判斷搜索
         if (newValue !== oldValue) {
           // 在這里處理搜索邏輯
         }
       }
     }
   }
   script>
   
   復(fù)制代碼

2. 使用$watch實(shí)現(xiàn)

   <template>
     <div>
       <div>
         <span>搜索span>
         <input v-model="searchValue" />
       div>
       
     div>
   template>
   <script>
   export default {
     data() {
       return {
         searchValue: ''
       }
     },
     created() {
       // $watch會(huì)返回一個(gè)unwatch函數(shù)，如果需求上需要在某些場(chǎng)景取消watch,可以執(zhí)行`unwatch`
       const unwatch = this.$watch('searchValue', (newValue, oldValue) => {
         // 判斷搜索
         if (newValue !== oldValue) {
           // 在這里處理搜索邏輯
         }
       })
     }
   }
   script>
   復(fù)制代碼

   在調(diào)用$watch的時(shí)候，會(huì)有一個(gè)返回值unwatch，然后如果需要取消watch監(jiān)聽，我們可以通過調(diào)用unwatch來進(jìn)行，比如有一個(gè)表單，表單上面的保存按鈕平常是置灰的，但是假如用戶對(duì)表單進(jìn)行了修改，就需要將表單的置灰狀態(tài)修改為啟用狀態(tài)。但是如果表單已經(jīng)啟用了，就沒必要繼續(xù)watch了，這時(shí)候就需要使用unwatch

Vue3.0中的寫法

在Vue3.0中除了Vue2.0中的寫法外，還在Composition API提供了watch與watchEffect兩個(gè)API,用于監(jiān)聽數(shù)據(jù)的變化，下面我們將上面搜索分別使用watch與watchEffect來實(shí)現(xiàn)

1. watch實(shí)現(xiàn)方式

<template>
  <div>
    <span>搜索span>
    <input v-model="state.searchValue" />
  div>
template>

<script lang="ts">
import { defineComponent, reactive, watch } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      searchValue: ""
    });
    // 通過watch來監(jiān)聽searchValue的變化
    const unwatch = watch(
      () => state.searchValue,
      (value, oldValue) => {
        if (value !== oldValue) {
          // 在這里處理搜索邏輯
        }
      }
    );
    return {
      state
    };
  }
});
script>

復(fù)制代碼

watch API與Vue2.0中的this.$watch用法基本是一致的，包括使用的參數(shù)等,同時(shí)watch API返回了unwatch函數(shù)用于取消watch

同時(shí)watch還可以偵聽多個(gè)屬性的變化，就像下面這樣

watch([a,b,c], ([a,b,c],[oldA,oldB,oldC]) => {
  
})
復(fù)制代碼

2. watchEffect實(shí)現(xiàn)

   watchEffect參數(shù)是一個(gè)函數(shù)，在代碼執(zhí)行時(shí)，會(huì)立即執(zhí)行watchEffect傳入的函數(shù)，然后響應(yīng)式追蹤其依賴，并在其中某些依賴發(fā)生變化時(shí)重新運(yùn)行該函數(shù)。我們將上述搜索代碼使用watchEffect來實(shí)現(xiàn)

   export default defineComponent({
     setup() {
       const state = reactive({
         searchValue: ""
       });
       // 加載數(shù)據(jù)
       function loadData(searchValue){
         
       }
       // 通過watchEffect來監(jiān)聽searchValue的變化
       const unwatch = watchEffect(() => {
         // 當(dāng)代碼執(zhí)行到watchEffect時(shí)，會(huì)立即調(diào)用此函數(shù)，同時(shí)會(huì)收集到存在
         //`state.searchValue`的依賴，然后當(dāng)`state.searchValue`發(fā)生
         //變化時(shí)會(huì)在此調(diào)用watchEffect，已實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽
         loadData(state.searchValue)
       });
       return {
         state
       };
     }
   })
   復(fù)制代碼

React中的用法

在React中與watch比較相似的功能是Effect Hook,使用它可以讓你在函數(shù)組件中執(zhí)行副作用操作，先來看一下代碼

import React, { useEffect, useState } from 'react'

export default function() {
  // useState傳入要初始化的狀態(tài)數(shù)據(jù)，然后會(huì)返回一個(gè)數(shù)組
  // 數(shù)組第一項(xiàng)為聲明的數(shù)據(jù)，而第二個(gè)參數(shù)是一個(gè)方法，用于調(diào)用
  // 修改數(shù)據(jù)
 const [searchValue, setSearchValue] =  useState('')

 function handleChange(e: React.ChangeEvent) {
   // 在react修改數(shù)據(jù)需要調(diào)用useState返回的方法
   setSearchValue(e.target.value);
 }

 // useEffect接受兩個(gè)參數(shù)，第一個(gè)是回調(diào)函數(shù)，第二個(gè)是要監(jiān)聽變化的屬性，是一個(gè)數(shù)組
 useEffect(() => {
   // 當(dāng)代碼首次調(diào)用useEffect會(huì)進(jìn)入這個(gè)回調(diào)函數(shù)，然后
  // 當(dāng)serchValue 發(fā)生變化時(shí)，會(huì)再次進(jìn)入到這里
  console.log(111)
 },[searchValue])
  return (
    <div>
      <input value={searchValue} onChange={handleChange}>input>
      
    div>
  );
}
復(fù)制代碼

如上代碼我們使用useEffect來監(jiān)聽searchValue的變化，然后觸發(fā)新的邏輯，但是看到上面代碼，我們并沒有發(fā)現(xiàn)取消effect的方法，那么如何取消呢？

useEffect第二個(gè)參數(shù)是一個(gè)數(shù)組，通過給數(shù)組傳入要監(jiān)聽的變量來實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽，但是卻沒有辦法去取消這個(gè)監(jiān)聽，所以我們需要曲線救國，就像下面代碼這樣

 const [isWatch] = useState(true)

 useEffect(() => {
  // 通過isWatch來判斷是否進(jìn)行監(jiān)聽邏輯變化   
  if(isWatch) {
    // 監(jiān)聽數(shù)據(jù)變化
    console.log(searchValue)
  }
 },[isWatch, searchValue])
復(fù)制代碼

計(jì)算屬性，在React中我也找到的蹤跡

Vue中的計(jì)算屬性，相信大家都很熟悉，通常我們會(huì)使用計(jì)算屬性來對(duì)template中的復(fù)雜邏輯計(jì)算進(jìn)行簡化，比如許多英文網(wǎng)站輸入用戶名的時(shí)候會(huì)輸入firstName和lastName，然后在界面上面又會(huì)將firstName和lastName連在一起顯示，這時(shí)候就可以使用到了計(jì)算屬性對(duì)顯示進(jìn)行處理

Vue2.0中的寫法

<template>
  <div>
    <div>
      <label>firstNamelabel>
      <input v-model="firstName" />
      <label>lastNamelabel>
      <input v-model="lastName" />
    div>
    <div>用戶名:{{ name }}div>
  div>
template>
<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    name() {
      return this.firstName + '·' + this.lastName
    }
  }
}
script>

復(fù)制代碼

Vue3.0中的寫法

在Vue3.0的Composition API也提供了computed API，用于生成計(jì)算屬性，用法與Vue2.0用法基本是一致的

import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      firstName: "",
      lastName: ""
    });
    const name = computed(() => state.firstName + "·" + state.lastName);
    return {
      state,
      name
    };
  }
});
復(fù)制代碼

React中的寫法

在說到在React中模擬計(jì)算屬性之前，我們先要了解一些React Hook的規(guī)則。

1. 只能在最頂層使用Hook
2. 只能在React函數(shù)中調(diào)用Hook

當(dāng)我們?cè)?code>React函數(shù)中使用useState之后，如果我們通過setState修改了state，那么這時(shí)候react會(huì)做什么呢？React會(huì)將這個(gè)函數(shù)式組件重新執(zhí)行一遍，但是對(duì)于里面的useState,useEffect等等不會(huì)重新初始化，而是使用已經(jīng)記錄的狀態(tài)進(jìn)行處理。那么React是怎么知道哪個(gè)state對(duì)應(yīng)哪個(gè)useState呢？答案是React靠的是Hook調(diào)用的順序。所以我們不能在非頂層比如if里面使用Hook。

同時(shí)呢？因?yàn)?code>state的變化會(huì)引起整個(gè)函數(shù)重新執(zhí)行，那么假如我們?cè)诖a里面寫了這樣一段邏輯

const [firstName, setFirstName] = useState('')
const [lastName, setLastName ] = useState('')
const [other,setOther] = useState('')

// 使用 useMemo可以模仿Vue中的計(jì)算屬性
const name = firstName + "·" + lastName;
復(fù)制代碼

上面代碼里面我們的name是通過firstName與lastName計(jì)算而來的，那么當(dāng)firstName或者lastName發(fā)生變化時(shí)，都會(huì)重新計(jì)算name，這個(gè)邏輯是正確的。但是實(shí)際上other如果發(fā)生了變化,也會(huì)導(dǎo)致name重新計(jì)算，這是我們不愿意看到的。假如name的計(jì)算邏輯很復(fù)雜，那么就會(huì)引起不必要的性能開支。所以React提供了useMemo，用于避免非相關(guān)屬性變化引起計(jì)算邏輯發(fā)生變化，而我們正好可以利用useMemo來模擬計(jì)算屬性，如下代碼

import React, {  useMemo, useState } from 'react'

export default function() {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName ] = useState('')

  // 使用 useMemo可以模仿Vue中的計(jì)算屬性,當(dāng)firstName與`lastName`任何一個(gè)發(fā)生變化
  //都會(huì)觸發(fā)`name`重新計(jì)算，但是對(duì)于其他屬性變化，并不會(huì)引起重新計(jì)算
  const name = useMemo(() => firstName + '·' + lastName,[firstName,lastName])

  const handleChange = (method: Function, e: React.ChangeEvent ) => {
    method(e.target.value)
  }

  return (
    <div>
      <div>
        <label>firstNamelabel>
        <input
          value={firstName}
          onChange={(e) => handleChange(setFirstName, e)}
        />
        <label>lastNamelabel>
        <input
          value={lastName}
          onChange={(e) => handleChange(setLastName, e)}
        />
      div>
      <div>用戶名:{name}div>
    div>
  );
}
復(fù)制代碼

但是呢，在Vue中計(jì)算屬性既可以get,也可以set,這一點(diǎn)我們是無法使用useMemo來模擬的，當(dāng)然如果有小伙伴知道如何模擬，麻煩下方評(píng)論區(qū)告訴我，謝謝。

總結(jié)

作為前端主流三大框架之二的Vue和React，在日常工作中還是很常用的，通過這種對(duì)比的學(xué)習(xí)，可以比較好的將兩者聯(lián)合在一起，方便記憶。