vue3.0 reactive

记录一下3.0的学习笔记
vue3提出了reactive创建响应式对象的方法。以供开发者来定义data。个人感觉3.0越来越像react了。
在语法上，vue3.0不再通过new对象的形式去创建实例。而是通过函数调用的形式。例如
new Vue() 在3.0中提供了createApp()这个方法去创建vue实例，

image.png
image.png
image.png

同时，在生命周期方面也做出了些许的调整。vue3.0不再使用befocreated，created这两个生命周期。而是替换成了setup生命周期。并且我们的状态也不再使用data(){return {}}的形式去定义了。统一都放在setup生命周期中通过reactive去创建

setup(){
const data = reactive({
  name:xxx,
})

return {
  data
}

同时 我们定义方法也不能在外部定义了。因为外部定义的方法是没办法通过this去访问到setup里的东西的。
所以也得在setup里面去定义

setup(){
const data = reactive({
  name:xxx,
})
const fun  = fun(){
console.log(data.name)
}
return {
  data,
  fun
}

就是以上这种方式。在模板中使用的话也不是通过this了。而是直接通过return出来的东西去访问。

值得注意的是，在模板中不再需要跟标签了，也就是说。模板中可以是一兄弟节点的形式写代码了，不再需要一个跟标签包住全部内容