setup

1：setup（作用）

作用:之前vue对象规定了我们必须把某一类数据放到某一个结构，这样在一定程度上对我们的代码进行了强制的分割。

在vue3中我们引入了setup()合成API语法，他可以将某数据关联的内容都整合到一个部分，即时setup0)中的内容越来越多，也会围绕着大而不乱的形式开发项目。

使用set和之前代码的区别

旧

新

使用set显示一些内容完整代码

<template>
  <div>
  <h1>计数：{{count}}</h1>
    <p>{{user.name}}--{{user-age}}</p>
    <p>{{arr[0]}}-{{arr[2]}}</p>
  </div>

</template>

<script>
import {ref,reactive,toRefs} from 'vue'
// ref 在setup中只能包装字符串或数字形式的数据(值)，使其变为响应式数据
//reactive 在setup中包装对象，数据组成的数据（对象/数组）使其变成响应式数据
//refs 可以直接在html模板中使用对象的属性名当变量，不需要用，访问
export default {//vue2版本的弊端：vue2中都约定了吴萌应该在哪个位置做什么事，这反倒在一定成都上也强制我们进行了代码分割
  name: 'App',
  setup(){//合成api
    const count=ref(0);
    const user=reactive({
      name:'张三',
      age:18
    })
    const arr=reactive([18,19,20])
    return{count,user,...toRefs(user),arr}

  },


}
</script>

setup特点

        1、setup()结构中定义的变量，函数都需要return之后才可以在模板中使用

2. setup()是处于created生命周期之前的函数，也就是说data,methods中的数据是无法访问到的,setup()结构中的this指向undefined

              ref:在setup中只能包装字符串或数字形式的数据(值)，使其变为响应式数据

              reactive在setup中包装对象，数组形式的数据（对象/数组),使其变成响应式数据

              toRefs可以直接在html模板中使用对象的属性名当变量，不需要用.访问

setup运行时间测试