Vue_Vue2的data()中数据，在vue3项目中怎么获取？

Vue_Vue2的data()中数据，在vue3中怎么获取？

小小记录一下，这两天在用vue3来搭建项目，写法和vue2相比真的区别有点大了。

• Vue2中写法

<template><div>{{message}}</div></template><script>exportdefault{data(){return{message:"message"}}}</script>

• vue3中的写法

<template><divclass="container"><header>{{state.username}}</header></div></template><script>import{ reactive }from"vue";exportdefault{props:{title: String
  },setup(){const state =reactive({username:"444444"});return{ state };}};</script>

主要的原因是

vue2

和

vue3

建立数据 data 方法不同
在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。
并且，

setup()

函数是Vue3新增的生命周期函数，我们应该可以理解为在这个生命周期里定义了对象

state

来接收我们这个界面的所有全局变量。

vue3 的生命周期函数：
生命周期函数解释setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和methodonBeforeMount() :组件挂载到节点上之前执行的函数。onMounted() :组件挂载完成后执行的函数。onBeforeUpdate():组件更新之前执行的函数。onUpdated():组件更新完成之后执行的函数。onBeforeUnmount():组件卸载之前执行的函数。onUnmounted():组件卸载完成后执行的函数
还在慢慢看vue3