vue3 setup函数之数据

setup中定义方法：

export default {
  name: 'App',
  setup(){
    //定义方法
    function edit() {
      
    }

    return {
      //方法与数据，必须要返回出去，不然不起作用。
      edit
    }
  }
}

 

setup中ref函数定义基本数据类型与对象数据类型：

1.ref函数定义基本数据类型数据

<template>
  <!--模板获取ref定义的数据-->
  <h1>{{name}}</h1>
</template>

<script>
//引入ref
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    //定义基本数据类型数据
    let name = ref('张三');

    //定义方法
    function edit() {
      //修改与获取 ref 定义的数据
      console.log(name.value);
      name.value = '李四'
    }

    return {
      //方法与数据，必须要返回出去，不然不起作用。
      name,edit
    }
  }
}
</script>

 

2.ref函数定义对象类型数据

<template>
  <!--模板获取ref定义的数据-->
  <h1>{{user.name}} - {{user.age}}</h1>

  <button @click="edit">修改</button>
</template>

<script>
//引入ref
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    //定义对象数据类型数据
    let user = ref({
      name: '张三',
      age: 18
    });

    //定义方法
    function edit() {
      //修改与获取 ref 定义的数据
      user.value.name = '李四';
      user.value.age = 20;
    }

    return {
      //方法与数据，必须要返回出去，不然不起作用。
      user,edit
    }
  }
}
</script>

 

setup中reactive函数定义对象数据类型：

<template>
  <!--模板获取ref定义的数据-->
  <h1>{{user.name}}</h1>
  <h1>{{user.job.type}} - {{user.job.salary}}</h1>
  <h1>{{user.hobby[0]}} - {{user.hobby[1]}}</h1>
  <button @click="edit">修改</button>
</template>

<script>
//引入reactive
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let user = reactive({
      name: '张三',
      job: {
        type:'运维',
        salary:'10k'
      },
      hobby: ['篮球','唱歌']
    })

    //定义方法
    function edit() {
      //修改与获取 ref 定义的数据
      user.name  = '李四';
      user.job.type = '程序员';
      user.job.salary = '20k';
      user.hobby[0] = '跑步';
      user.hobby[1] = '足球';
    }

    return {
      //方法与数据，必须要返回出去，不然不起作用。
      user,edit
    }
  }
}
</script>