前端vue3的setup如何使用

本文小編為大家詳細介紹“前端vue3的setup如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“前端vue3的setup如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

1、簡單使用

先簡單寫一下看看效果

筆者這里使用新建的 vue3 項目，直接在 App.vue 上進行修改

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

原來寫在 data 中的 name，在 setup 中需要 return 返回

運行效果

2、修改 setup 中的變量值

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

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

按照常規邏輯，修改 setup 中的 name，會自然地寫出上面的代碼

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

為什么 name 值沒有改變呢？因為上面代碼中 name 是非響應式的

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

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

使用 ref 對 name 進行包裝

修改時使用 變量名.value 的語法

運行效果

除了使用 ref 外還可以使用 reactive ，二者都可以將原始數據類型轉換成一個帶有響應式特性的數據類型

ref 和 reactive 有什么區別，ref 一般處理基本類型；reactive 處理復雜的數據類型

reactive 使用代碼

<template>
  <div>
    {{nameObj.name}}
    <button @click="change">修改</button>
  </div>
</template>
 
<script>
import {reactive} from 'vue'
export default {
  setup() {
    let nameObj = reactive({name: '今年花勝去年紅。可惜明年花更好，知與誰同'})
    function change() {
      nameObj.name = "離愁漸遠漸無窮，迢迢不斷如春水"
    }
    return {
      nameObj,
      change
    }
  }
}
</script>

運行效果

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

代碼寫成 setup 形式，如何實現父子組件通信，下面介紹

3.1、父傳子

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

Article.vue 內容

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

在 setup 方法內使用 props 來接收父組件傳過來的數據

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: '漸行漸遠漸無書，水闊魚沉何處問'
    }
  }
}
</script>

運行效果

3.2、子傳父

3.2.1、子組件調用父組件方法

Article.vue 內容

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子組件向父組件傳遞數據</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 參數中的 emit

App.vue 內容

<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('父組件事件被調用')
    }
    return {
      name: '漸行漸遠漸無書，水闊魚沉何處問',
      changeName
    }
  }
}
</script>

運行效果

3.2.2、子組件向父組件傳遞數據

子組件向父組件傳遞數據，父組件修改數據

Article.vue 內容

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

App.vue 內容

<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('漸行漸遠漸無書，水闊魚沉何處問')
    function changeName(msg) {
      name.value = msg
    }
    return {
      name,
      changeName
    }
  }
}
</script>

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

運行效果

 4、setup 中使用生命周期函數

在 setup 里，生命周期鉤子前面加上 “on” 來訪問組件的生命周期鉤子

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

setup 內部調用生命周期鉤子

代碼示例

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

運行效果

讀到這里，這篇“前端vue3的setup如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。