最近，我的朋友因為不熟悉 Vue.js 而未能通過面試。9fQ28資訊網——每日最新資訊28at.com

她平時工作中大部分時間都在使用React，所以也懶得去了解其他前端框架。9fQ28資訊網——每日最新資訊28at.com

世界上所有的前端框架我們都應該熟悉嗎？9fQ28資訊網——每日最新資訊28at.com

不，這是極其不合理的。9fQ28資訊網——每日最新資訊28at.com

但為了生存，朋友還是要學習Vue的框架。9fQ28資訊網——每日最新資訊28at.com

讓我們看看如何使用 Vue 來實現 React 的一些功能。9fQ28資訊網——每日最新資訊28at.com

1. v-if：如何顯示和隱藏元素？

控制元素或組件的顯示和隱藏是我們最常見的事情之一，在React中，我們經常這樣編碼。9fQ28資訊網——每日最新資訊28at.com

JavaScript 中的三元表達式和“&”也可以實現同樣的目標。9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React

import React, { useState } from "react"export default function Vif (){  const [ isShow, setIsShow ] = useState(true)  const onToggleShow = () => {    setIsShow(!isShow)  }  return (    <div className="v-if">      <button onClick={ onToggleShow }>Toggle</button>      {/* Of course you can also use ternary expressions */}      {/* isShow ? <div>fatfish has shown</div> : null */}      {        isShow && <div>fatfish has shown</div>      }    </div>  )}

Vue

那么在Vue中如何實現同樣的功能呢？9fQ28資訊網——每日最新資訊28at.com

是的，我們可以使用 v-if 指令來控制元素的顯示和隱藏，這很簡單，不是嗎？9fQ28資訊網——每日最新資訊28at.com

<template>  <div class="v-if">    <button @click="onToggleShow">Toggle</button>    <div v-if="isShow">fatfish has shown</div>  </div></template><script>export default {  name: 'vif',  data () {    return {      isShow: true    }  },  methods: {    onToggleShow () {      this.isShow = !this.isShow    }  }}</script>

2. v-show：如何顯示和隱藏元素？

v-if 導致元素或組件被重復刪除和創建，如果我們只想“顯示”或“隱藏”它怎么辦？9fQ28資訊網——每日最新資訊28at.com

也許我們可以借助 CSS 中的 display 屬性來做到這一點。9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React

import React, { useState } from "react"export default function VShow (){  const [ isShow, setIsShow ] = useState(true)  const onToggleShow = () => {    setIsShow(!isShow)  }  return (    <div className="v-show">      <button onClick={ onToggleShow }>Toggle</button>      {        <div style={{ display: isShow ? '' : 'none' }}>fatfish has shown</div>      }    </div>  )}

Vue

你可能已經猜到了，我們可以使用 v-show 來實現與它相同的功能。看起來 Vue 更簡潔，你不覺得嗎？9fQ28資訊網——每日最新資訊28at.com

<template><div class="v-show">    <button @click="onToggleShow">Toggle</button>    <div v-show="isShow">fatfish has shown</div>  </div></template><script>export default {  name: 'vshow',  data () {    return {      isShow: true    }  },  methods: {    onToggleShow () {      this.isShow = !this.isShow    }  }}</script>

3. v-for：渲染列表？

在React中，我們可以使用數組的map方法來創建列表，這非常簡單。9fQ28資訊網——每日最新資訊28at.com

看一下這段代碼，它創建了三個不同職業的列表。9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React

import React, { useState } from "react"export default function VFor (){  const [ list, setList ] = useState([    {      id: 1,      name: 'Front end',    },    {      id: 2,      name: 'Android',    },    {      id: 3,      name: 'IOS',    },  ])  return (    <div className="v-for">      {        list.map((item) => {          return <div key={ item.id } className="v-for-item">{ item.name }</div>        })      }    </div>  )}

Vue

你喜歡 Vue 中的 v-for 指令嗎？9fQ28資訊網——每日最新資訊28at.com

<template>  <div class="v-for">    <div class="v-for-item" v-for="item in list" :key="item.id">      {{ item.name }}    </div>  </div></template><script>export default {  name: "vfor",  data() {    return {      list: [        {          id: 1,          name: "Front end",        },        {          id: 3,          name: "Android",        },        {          id: 4,          name: "IOS",        },      ],    };  },};</script>

4. 計算

如果我們想計算兩個數的和，有什么好的方法嗎？9fQ28資訊網——每日最新資訊28at.com

我的意思是，當 num1 和 num2 發生變化時，它們的總和會自動變化，我們不需要手動處理。9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React

import React, { useMemo, useState } from "react"export default function Computed (){  const [ num1, setNum1 ] = useState(10)  const [ num2, setNum2 ] = useState(10)  const num3 = useMemo((a, b) => {    return num1 + num2  }, [ num1, num2 ])  const onAdd = () => {    setNum1(num1 + 10)  }  return (    <div className="computed">      <button onClick={ onAdd }>+10</button>      <div>result：{ num3 }</div>    </div>  )}

哇，太棒了，useMemo 幫我們解決了一個問題。9fQ28資訊網——每日最新資訊28at.com

Vue

那么，Vue中有沒有更好的實現呢？它實際上提供了一種稱為“計算”的機制，該機制更智能且更易于使用。9fQ28資訊網——每日最新資訊28at.com

<template>  <div class="computed">    <button @click="onAdd">+10</button>    <div>result：{{ num3 }}</div>  </div></template><script>export default {  name: 'computed',  data () {    return {      num1: 10,      num2: 10,    }  },  computed: {    num3 () {      return this.num1 + this.num2    }  },  methods: {    onAdd () {      this.num1 += 10    }  }}</script>

5.watch

當我們需要監聽數據變化然后執行回調函數時，可以在React中使用useEffect來完成。9fQ28資訊網——每日最新資訊28at.com

讓我們嘗試模擬一個場景：9fQ28資訊網——每日最新資訊28at.com

我們點擊男孩或女孩按鈕，選中時發送請求，最后顯示請求結果（我們通過setTimeout模擬異步請求過程）。9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React

export default function Watch() {  const [fetching, setFetching] = useState(false)  const [selects, setSelects] = useState([    'boy',    'girl'  ])  const [selectValue, setSelectValue] = useState('')  const result = useMemo(() => {    return fetching ? 'requesting...' : `the result of the request: ${selectValue || '~'}`  }, [ fetching ])  const onSelect = (value) => {    setSelectValue(value)  }  const fetch = () => {    if (!fetching) {      setFetching(true)      setTimeout(() => {        setFetching(false)      }, 1000)    }  }  // Pay attention here  useEffect(() => {    fetch()  }, [ selectValue ])  return (    <div className="watch">      <div className="selects">        {          selects.map((item, i) => {            return <button key={ i } onClick={ () => onSelect(item) }>{ item }</button>          })        }      </div>      <div className="result">        { result }      </div>    </div>  )}

Vue

別擔心，我們可以在 Vue 中做同樣的事情，你知道它的秘密是什么嗎？9fQ28資訊網——每日最新資訊28at.com

是的，答案是watch。9fQ28資訊網——每日最新資訊28at.com

<template>  <div class="watch">    <div class="selects">      <button         v-for="(item, i) in selects"        :key="i"        @click="onSelect(item)"      >        {{ item }}      </button>    </div>    <div class="result">      {{ result }}    </div>  </div></template><script>export default {  name: 'watch',  data () {    return {      fetching: false,      selects: [        'boy',        'girl'      ],      selectValue: ''    }  },  computed: {    result () {      return this.fetching ? 'requesting...' : `the result of the request: ${this.selectValue || '~'}`    }  },  // Pay attention here  watch: {    selectValue () {      this.fetch()    }  },  methods: {    onSelect (value) {      this.selectValue = value      },    fetch () {      if (!this.fetching) {        this.fetching = true        setTimeout(() => {          this.fetching = false        }, 1000)      }    }  }}</script><style>button{  margin: 10px;  padding: 10px;}</style>

6. style

有時我們需要動態地向元素添加樣式，Vue 和 React 都為我們提供了一種便捷的使用方式。9fQ28資訊網——每日最新資訊28at.com

從用途上來說，它們基本上是相似的。9fQ28資訊網——每日最新資訊28at.com

相同點：9fQ28資訊網——每日最新資訊28at.com

CSS 屬性名稱可以是駝峰命名法或短橫線命名法（記住將它們用引號引起來）9fQ28資訊網——每日最新資訊28at.com

差異：9fQ28資訊網——每日最新資訊28at.com

• 在Vue中，我們可以通過數組語法綁定多個樣式對象，React主要是單個對象的形式（這一點Vue也可以）
• 在React中，對于屬性的數量，它會自動給內聯樣式添加“px”（這一點Vue不會自動處理）后綴，其他單位需要手動指定
• 在 React 中，樣式不會自動添加前綴。當 v-bind:style 使用需要瀏覽器引擎前綴的 CSS 屬性時，例如 Transform，Vue.js 會自動檢測并添加相應的前綴。

9fQ28資訊網——每日最新資訊28at.com

React

import React from "react"export default function Style (){  const style = {    width: '100%',    height: '500px',  }  const style2 = {    backgroundImage: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)',    borderRadius: '10px',  }  return (    <div className="style" style={ { ...style, ...style2 } } ></div>  )}

Vue

<template>  <div class="style" :style="[ style, style2 ]"></div></template><script>export default {  name: 'style',  data () {    return {      style: {        width: '100%',        height: '500px',      },      style2: {        backgroundImage: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)',        borderRadius: '10px',      }    }  }}</script>

7.class

我們應該如何動態地為元素添加類？9fQ28資訊網——每日最新資訊28at.com

在Vue中，我更喜歡使用數組語法（當然也有對象方式），在React中也可以使用一些第三方包比如classnames來起到更方便的方式來添加類的效果。9fQ28資訊網——每日最新資訊28at.com

React

import React, { useMemo, useState } from "react"import './class.css'export default function Class (){  const [ isActive, setIsActive ] = useState(false)  const buttonText = useMemo(() => {    return isActive ? 'Selected' : 'UnSelected'  }, [ isActive ])  const buttonClass = useMemo(() => {    return [ 'button', isActive ? 'active' : '' ].join(' ')  }, [ isActive ])  const onClickActive = () => {    setIsActive(!isActive)  }  return (    <div className={ buttonClass } onClick={onClickActive}>{ buttonText }</div>  )}

Vue

<template>  <button :class="buttonClasses" @click="onClickActive">{{ buttonText }}</button></template><script>export default {  name: 'class',  data () {    return {      isActive: false,    }  },  computed: {    buttonText () {      return this.isActive ? 'Selected' : 'UnSelected'    },    buttonClasses () {      return [ 'button', this.isActive ? 'active' : '' ]    }  },  methods: {    onClickActive () {      this.isActive = !this.isActive    }  }}</script><style scoped>.button{  display: block;  width: 100px;  height: 30px;  line-height: 30px;  border-radius: 6px;  margin: 0 auto;  padding: 0;  border: none;  text-align: center;  background-color: #efefef;}.active{  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);  color: #fff}</style>

8. provide/inject

Vue 和 React 對于全局狀態的管理都有自己很好的解決方案，比如 Vue 中的 Vuex、Redux 中的 React 和 Mobx，但是，當然，這些小項目的引入對于小用途來說有點太大了，就沒有其他解決方案？9fQ28資訊網——每日最新資訊28at.com

 provide/inject可以在Vue中使用

React 可以使用 Context9fQ28資訊網——每日最新資訊28at.com

假設我們有一個用于用戶信息的全局變量“userInfo”，需要在每個組件中輕松訪問它，如何在Vue和React中實現它？9fQ28資訊網——每日最新資訊28at.com

9fQ28資訊網——每日最新資訊28at.com

React 

為了在 React 中實現這一點，您可以借助 Context 將全局狀態共享給任何子節點。9fQ28資訊網——每日最新資訊28at.com

上下文/index.js9fQ28資訊網——每日最新資訊28at.com

import { createContext } from "react";export const UserInfoContext = createContext({  userInfo: {    name: ''  }})

App.js

import { UserInfoContext } from './context/index'function App() {  return (    <BrowserRouter>      // Pay attention here      <UserInfoContext.Provider        value={{ userInfo: { name: 'fatfish' } }}      >        <div className="title">I am React App</div>        <Routes>          <Route path="/v-if" element={<Vif />} />          <Route path="/v-show" element={<VShow />} />          <Route path="/v-for" element={<VFor />} />          <Route path="/computed" element={<Computed />} />          <Route path="/watch" element={<Watch />} />          <Route path="/style" element={<Style />} />          <Route path="/class" element={<Class />} />          <Route path="/slot" element={<Slot />} />          <Route path="/nameSlot" element={<NameSlot />} />          <Route path="/scopeSlot" element={<ScopeSlot />} />          <Route path="/provide" element={<Provide />} />        </Routes>      </UserInfoContext.Provider>    </BrowserRouter>  );}

provide.js

import React, { useContext } from "react"import { UserInfoContext } from '../context/index'export default function Provide() {  // We can use the defined "UserInfoContext" through the userContext  const { userInfo } = useContext(UserInfoContext)  return (    <div class="provide-inject">{ userInfo.name }</div>  )}

Vue

在Vue中，我們可以使用“provide/inject”將頂級狀態傳遞給任何子節點，假設我們在app.vue中聲明一個“userInfo”數據。9fQ28資訊網——每日最新資訊28at.com

App.vue

<template>  <div id="app">    <div class="title">I am Vue App</div>    <router-view/>  </div></template><script>export default {  name: 'app',  // Pay attention here  provide () {    return {      userInfo: {        name: 'fatfish'      }    }  }}</script>

provide.vue

<template>  <div class="provide-inject">{{ userInfo.name }}</div></template><script>export default {  name: 'provideInject',  // Use data  inject: [ 'userInfo' ]}</script>

9. Slots

假設我們要實現一個簡單的對話組件，基本功能是標題可以作為字符串傳遞，內容部分可以完全自定義，我們應該如何實現呢？9fQ28資訊網——每日最新資訊28at.com

React

雖然React中沒有槽的概念，但是可以通過props.children獲取組件內部的子元素，通過這個可以實現默認的槽。9fQ28資訊網——每日最新資訊28at.com

Dialog.js

import React, { useState, useEffect } from "react"import './dialog.css'export default function Dialog(props) {  // Forgive me for implementing this in a silly way like visible -1 first, but that's not the point  const { children, title = '', visible = -1 } = props  const [visibleInner, setVisibleInner] = useState(false)  const onHide = () => {    setVisibleInner(false)  }  useEffect(() => {    setVisibleInner(visible > 0)  }, [ visible ])  return (    <div className="dialog" style={ { display: visibleInner ? 'block' : 'none' }}>      <div className="dialog-mask" notallow={ onHide }></div>      <div className="dialog-body">        { title ? <div className="dialog-title">{ title }</div> : null }        <div className="dialog-main">          {/* Note here that the default slot function is implemented via children */}          {children}        </div>        <div className="dialog-footer">          <div className="button-cancel" notallow={ onHide }>Cancel</div>          <div className="button-confirm" notallow={ onHide }>Confirm</div>        </div >      </div >    </div >  )}

slot.js

import React, { useState, useEffect } from "react"import Dialog from './components/dialog'export default function Slot() {  const [visible, setVisible] = useState(-1)  const onToggleVisible = () => {    setVisible(Math.random())  }  return (    <div className="slot">      <button onClick={ onToggleVisible }>Toggle</button>      <Dialog        visible={visible}        title="default slot"      >        {/* Note that here, it will be read and replaced by the children of the Dialog component */}        <div className="slot-body">fatfish</div>      </Dialog>    </div>  )}

Vue

同樣的功能在Vue中應該如何實現呢？9fQ28資訊網——每日最新資訊28at.com

dialog.vue

<template>  <div class="dialog" v-show="visible">    <div class="dialog-mask" @click="onHide"></div>    <div class="dialog-body">      <div class="dialog-title" v-if="title">{{ title }}</div>      <div class="dialog-main">        <!-- Note: A default slot has been placed here -->        <slot></slot>      </div>      <div class="dialog-footer">        <div class="button-cancel" @click="onHide">Cancel</div>        <div class="button-confirm" @click="onHide">Confirm</div>      </div>    </div>  </div></template><script>export default {  name: "dialog",  props: {    title: {      type: String,      default: "",    },    visible: {      type: Boolean,      default: false,    },  },  methods: {    onHide () {      this.$emit('update:visible', false)    }  }};</script>

slot.vue

<template>  <div class="slot">    <button @click="onToggleVisible">切換dialog</button>    <Dialog      :visible.sync="visible"      title="default slot"    >    <!-- The <slot></slot> will be replaced here -->    <div class="slot-body">fatfish</div>    </Dialog>  </div></template><script>import Dialog from './components/dialog.vue'export default {  name: 'slot',  components: {    Dialog,  },  data () {    return {      visible: false    }  },  methods: {    onToggleVisible () {      this.visible = !this.visible    }  }}

寫在最后

不管是開發語言，還是開發框架，都是我們實現創造產品的工具，最終，我們能夠實現什么樣的效果，做出什么樣的產品，都是依賴實現它的人。9fQ28資訊網——每日最新資訊28at.com

作為技術人，多學技術沒有錯，但是不能為了學習技術而學習技術，我們學習技術的目的，是要解決一些問題，這個是我對學習技術的一些感悟。9fQ28資訊網——每日最新資訊28at.com

當然，也希望我今天分享的內容，對你有用。9fQ28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-18993-0.html都快2024年了，別只使用React，需要學習一下Vue，不然沒出路了

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 使用 CSS Grid 的響應式網頁設計：消除媒體查詢過載

下一篇： 40 道Typescript 面試題及其答案與代碼示例