前端vue3 setup使用教學

2022-02-19 19:04:14

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使用教學的詳細內容，更多關於vue3 setup教學的資料請關注it145.com其它相關文章！

前端vue3 setup使用教學

目錄

1、簡單使用

2、修改 setup 中的變數值

3、setup 形式下的父子元件通訊

3.1、父傳子

3.2、子傳父

3.2.1、子元件呼叫父元件方法

3.2.2、子元件向父元件傳遞資料

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

熱門文章