前端vue3 setup使用教程

Posted on by

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教程的資料請關註WalkonNet其它相關文章！

推薦閱讀：