vue3.0项目开发(二)新特性之setup函数

setup 函数是一个新的组件选项，它会在 beforeCreate 钩子之前被调用。

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>vue3.0 beta</h1>
    <div>{{ count }} {{ object.foo }}</div>
    </div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      console.log('setup')
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // 暴露给模板
      return {
        count,
        object,
      }
    },
    created(){
      console.log('created')
    },
    beforeCreate(){
      console.log('beforeCreate')
    },
    mounted(){
      console.log('mounted')
    },
    beforeMount(){
      console.log('beforeMount')
    },
    data(){
      return {
        age: 18
      }
    }
  }
</script>

可以看到 setup 返回的对象是可以直接插入模板中使用的。其实 setup 里面能做的事情远远不止于这些，里面可以：

1、访问dada选项的数据

setup项链里面不存在 this 变量，this不能执行当前的引用的 vue 实例，这是vue3.0在设计之初刻意为之的。

因为setup 里面没有 this 变量，所以默认没办法访问 data 选项的数据，如需在 setup 里面访问，需要引入 getCurrentInstance 函数，如下引入方式：

setup项链里面不存在 this 变量，this不能执行当前的引用的 vue 实例，这是vue3.0在设计之初刻意为之的。  import { getCurrentInstance } from 'vue'
 setup() {
      const { ctx } = getCurrentInstance()
    }

可以看到我们从 getCurrentInstance函数，取了ctx 属性，ctx 就相当于当前vue实例的引用。

2、执行生命周期

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

3.0的setup里面的生命周期和2.x版本的有点区别，需要单独引入

 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

可以看到如果需要在 setup 选项使用生命周期函数。使用如下：

 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
 setup() {
     onBeforeMount(() => {
     });
     onMounted(() => {
     });
 }