前端vue3?setup使用教程

更新時(shí)間：2022年02月19日 16:26:36 作者：悟世君子

這篇文章主要為大家介紹了前端vue3架構(gòu)setup使用教程，詳細(xì)介紹?setup?的用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

vue3 中新增了 setup，它的出現(xiàn)是為了解決組件內(nèi)容龐大后，理解和維護(hù)組件變得困難的問(wèn)題。即 vue 中 data、computed、methods、watch 等內(nèi)容非常多以后，同一業(yè)務(wù)邏輯的 data 中的數(shù)據(jù)和 methods 中的方法在 vue 文件中“相隔甚遠(yuǎn)”，看代碼時(shí)，經(jīng)常需要根據(jù) data 中的數(shù)據(jù)去搜索找到對(duì)應(yīng)的 methods 方法，上下跳躍查看代碼，非常不方便。而在 setup 中，則可以把 data 中的數(shù)據(jù)和 methods 方法寫(xiě)在相臨的位置，方便查看和維護(hù)。

1、簡(jiǎn)單使用

先簡(jiǎn)單寫(xiě)一下看看效果

筆者這里使用新建的 vue3 項(xiàng)目，直接在 App.vue 上進(jìn)行修改

<template>
  <div>{{name}}</div>
</template>
 
<script>
export default {
  setup() {
    return {
      name: "淚眼問(wèn)花花不語(yǔ)，亂紅飛過(guò)秋千去"
    }
  }
}
</script>

原來(lái)寫(xiě)在 data 中的 name，在 setup 中需要 return 返回

運(yùn)行效果

2、修改 setup 中的變量值

先看下面代碼，再說(shuō)在 setup 中如何修改

<template>
  <div>
    {{name}}
    <button @click="change">修改</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    let name = "淚眼問(wèn)花花不語(yǔ)，亂紅飛過(guò)秋千去"
    function change() {
      name = "人生自是有情癡，此恨不關(guān)風(fēng)與月"
    }
    return {
      name,
      change
    }
  }
}
</script>

按照常規(guī)邏輯，修改 setup 中的 name，會(huì)自然地寫(xiě)出上面的代碼

但是這段代碼是不能完成 name 值的修改的，看運(yùn)行效果

為什么 name 值沒(méi)有改變呢？因?yàn)樯厦娲a中 name 是非響應(yīng)式的

如果想要修改 name 值，就需要把它改成響應(yīng)式的，代碼如下

<template>
  <div>
    {{name}}
    <button @click="change">修改</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    let name = ref("淚眼問(wèn)花花不語(yǔ)，亂紅飛過(guò)秋千去")
    function change() {
      name.value = "人生自是有情癡，此恨不關(guān)風(fēng)與月"
    }
    return {
      name,
      change
    }
  }
}
</script>

使用 ref 對(duì) name 進(jìn)行包裝

修改時(shí)使用 變量名.value 的語(yǔ)法

運(yùn)行效果

除了使用 ref 外還可以使用 reactive ，二者都可以將原始數(shù)據(jù)類(lèi)型轉(zhuǎn)換成一個(gè)帶有響應(yīng)式特性的數(shù)據(jù)類(lèi)型

ref 和 reactive 有什么區(qū)別，ref 一般處理基本類(lèi)型；reactive 處理復(fù)雜的數(shù)據(jù)類(lèi)型

reactive 使用代碼

<template>
  <div>
    {{nameObj.name}}
    <button @click="change">修改</button>
  </div>
</template>
 
<script>
import {reactive} from 'vue'
export default {
  setup() {
    let nameObj = reactive({name: '今年花勝去年紅?？上髂昊ǜ?，知與誰(shuí)同'})
    function change() {
      nameObj.name = "離愁漸遠(yuǎn)漸無(wú)窮，迢迢不斷如春水"
    }
    return {
      nameObj,
      change
    }
  }
}
</script>

運(yùn)行效果

3、setup 形式下的父子組件通信

代碼寫(xiě)成 setup 形式，如何實(shí)現(xiàn)父子組件通信，下面介紹

3.1、父?jìng)髯?/h3>

在 components 目錄下新建 Article.vue 作為子組件

Article.vue 內(nèi)容

<template>
  <div>
    {{msg}}
    {{info}}
  </div>
</template>
 
<script>
export default {
  props:['msg'],
  setup(props) {
    console.log(props.msg)
 
    return {
      info:props.msg
    }
  }
}
</script>

在 setup 方法內(nèi)使用 props 來(lái)接收父組件傳過(guò)來(lái)的數(shù)據(jù)

App.vue 為父組件

在 App.vue 中引入 Article.vue

<template>
  <div>
    <Article :msg="name"></Article>
  </div>
</template>
 
<script>
import Article from '@/components/Article.vue' 
export default {
  components: {
    Article
  },
  setup() {
    return {
      name: '漸行漸遠(yuǎn)漸無(wú)書(shū)，水闊魚(yú)沉何處問(wèn)'
    }
  }
}
</script>

運(yùn)行效果

3.2、子傳父

3.2.1、子組件調(diào)用父組件方法

Article.vue 內(nèi)容

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子組件向父組件傳遞數(shù)據(jù)</button>
  </div>
</template>
 
<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    function sendToParent() {
      content.emit('change')
    }
    return {
      sendToParent
    }
  }
}
</script>

使用 setup 方法中 content 參數(shù)中的 emit

App.vue 內(nèi)容

<template>
  <div>
    <Article :msg="name" @change="changeName"></Article>
  </div>
</template>
<script>
import Article from '@/components/Article.vue' 
export default {
  components: {
    Article
  },
  setup() {
    function changeName() {
      alert('父組件事件被調(diào)用')
    }
    return {
      name: '漸行漸遠(yuǎn)漸無(wú)書(shū)，水闊魚(yú)沉何處問(wèn)',
      changeName
    }
  }
}
</script>

運(yùn)行效果

3.2.2、子組件向父組件傳遞數(shù)據(jù)

子組件向父組件傳遞數(shù)據(jù)，父組件修改數(shù)據(jù)

Article.vue 內(nèi)容

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子組件向父組件傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    let newName = '群芳過(guò)后西湖好，狼籍殘紅。飛絮濛濛。垂柳闌干盡日風(fēng)'
    function sendToParent() {
      content.emit('change', newName)
    }
    return {
      sendToParent
    }
  }
}
</script>

App.vue 內(nèi)容

<template>
  <div>
    <Article :msg="name" @change="changeName"></Article>
  </div>
</template>
<script>
import Article from '@/components/Article.vue' 
import {ref} from 'vue'
export default {
  components: {
    Article
  },
  setup() {
    let name = ref('漸行漸遠(yuǎn)漸無(wú)書(shū)，水闊魚(yú)沉何處問(wèn)')
    function changeName(msg) {
      name.value = msg
    }
    return {
      name,
      changeName
    }
  }
}
</script>

App.vue 中的 name 要修改，所以使用 ref 包裝

運(yùn)行效果

4、setup 中使用生命周期函數(shù)

在 setup 里，生命周期鉤子前面加上 “on” 來(lái)訪(fǎng)問(wèn)組件的生命周期鉤子

setup 是圍繞 beforeCreate 和 created 生命周期鉤子運(yùn)行的，所以不需要顯式地定義它們

setup 內(nèi)部調(diào)用生命周期鉤子

代碼示例

<template>
  <div></div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue"
export default {
  setup() {
    onBeforeMount(()=>{
      console.log('onBeforeMount')
    })
    onMounted(()=>{
      console.log('mouted')
    })
    return {}
  }
}
</script>

運(yùn)行效果