生命周期对比

如图是vue2.0到vue3.0的生命周期函数对比，vue3.0去掉了beforeCreate 和 created 函数，不同的是新增了一个setup函数。这些相对应的函数都在前面多增加了一个on,均可以在setup函数里使用。

beforeCreate 和 created 函数里的代码，这时候可以直接在setup函数里直接编写。

setup函数

引用

在每个组件的<script></script>标签里面引用

import {reactive, watch, ref, watchEffect, toRef,
  onBeforeUnmount, onMounted} from 'vue'

这里引用了很多vue的函数，包括生明周期的各种钩子函数，

我们输入一个on开头 会看到很多函数，就是我们上面提到的各种钩子函数。这些都是需要先引入才能在setup函数中使用。 所以在后面我们就可以声明setup函数，如下图

 export default {
  name: 'Home',
  setup(){
   let name = '测试name'
    let tip=ref('这是name的值')

let data=reactive({
    job:'总经理',
    infoList:["测试","运营","开发"]
})
    

function changeData() {
    data.job="我是测试经理"
}


   //方法
    function changeTip(){
        tip.value="改变了tip的值"
    }
    

   //返回一个对象
   return {
    name,
    tip,
    changeTip，
    changeData
   }
  }
 }
</script>

需要注意的是，在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用。 当然如果只是简单的声明一个值，这并不是响应式的写法。如果我们想要做到数据响应式，需要用到ref。

<template>
  <div>tip:{{tip}}</div>
  <div>data:{{data.job}}</div>
  <div>infoList:{{infoList}}</div>
  <button @click="changeTip">改变tip</button>
  <button @click="changeData">改变data</button>
  <button @click="goNext">跳转下个页面</button>
</template>

如果在组件模版页面，用上我们setup函数里声明的值，我们在changeTip改变了我们的tip的值，先把页面跑起来

默认如图，接下来我们点击 改变tip按钮

可以看到tip的值已经改变了。 用ref包裹的对象，改变值的时候记得用.value。 但是如果存在很多值，我们不可能一个个用ref声明，vue3.0还有一个 reactive函数，这个可以声明一个对象，通过对象.字段拿到对应的值，并且不用多加一个.value。 点击改变data里字段的值，可以看到data的值改变了。

总结

总的来看，vue3.0函数比较重要的就是一个setup函数，我们定义好需要的响应式数据，在我们的模版上使用就行，掌握好setup函数使用很重要。