vue3.0中setup使用 Composition组合API介绍

Vue3 Composition组合API介绍

setup()：

• 在组件渲染完成之前执行，所以不能在setup中通过this访问组件对象
• 在setup方法中返回的数据会自动和组件data中的数据进行合并
• 在setup中返回的方法，自动和methods对象进行合并

<!-- home.vue  -->
<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>时间：{{time}}</h1>
    <hr>
  </div>
</template>

<script>
  export default {
    setup() {
      // 在组件渲染完成之前执行，所以不能在setup中通过this访问组件对象
      console.log(this) //undefined
      /**
        在setup方法中返回的数据会自动和组件data中的数据进行合并
        在setup中返回的方法，自动和methods对象进行合并
       * **/
      return {
        name: 'Vue3',
        time: '2020-09-20',
       
      }

    },
    
  }
</script>

<style>
</style>

改变data中的数据

注意：setup中更新data数据时，在这里不能更新视图，因为他不是一个响应式数据，要想执行更新视图操作，需要进行特殊处理

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>时间：{{time}}</h1>
    <hr>
    <el-button type="primary" @click="handleName">修改名字</el-button>
  </div>
</template>
<script>
  export default {
    setup() {
      // 在组件渲染完成之前执行，所以不能在setup中通过this访问组件对象
      console.log(this)
      /**
        在setup方法中返回的数据会自动和组件data中的数据进行合并
        在setup中返回的方法，自动和methods对象进行合并
       * **/
      return {
        // data数据
      name: 'Vue3',
      time: '2022-01-21',
        // 方法
        handleName() {
          // 更新name：在这里不能更新视图，因为他不是一个响应式数据
          this.name = 'Vue2'
          console.log(this.name)
        }
      }
    },
  }
</script>

<style>
</style>

改变data中的数据（组合API——reactive）

• 使用 reactive 将data数据转为响应式数据
• reactive：
  作用：可以帮助我们创建响应式的数据对象，需要一个对象作为参数
  语法：

//引入reactive
import { reactive  } from 'vue'
const obj = reactive({
      name: 'Vue3',
      time: '2022-01-21',
}),

视图更新：

<!-- home.vue  -->
<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>时间：{{time}}</h1>
    <hr>
    <el-button type="primary" @click="handleName">修改</el-button>
  </div>
</template>
<script>
// 按需导入
  import { reactive } from 'vue'
  export default {
    setup() {
    //创建响应式数据对象
      const obj = reactive({
         name: 'Vue3',
         time: '2022-01-21',
      });
      return obj
    },
    methods: {
      // 方法
      handleName() {
        this.name = 'Vue2'
      }
    },
  }
</script>

<style>
</style>

注意：reactive方法创建响应式数据对象，不支持ES6的解构赋值，解构赋值会使其失去响应式的特性

import { reactive  } from 'vue'
const {name,time}= reactive({
      name: 'Vue3',
      time: '2022-01-21',
}),

 return {name,age}

组合API——ref

• 作用：基于基本数据类型(字符串,布尔,数值)创建一个响应式的数据对象
• 语法：

//按需导入
import { reactive } from 'vue'

  export default {
    setup() {
      // 通过ref方法基于基本数据类型创建响应式对象
      const name = ref('张三')
      const age = ref(18)

      return {
        name,
        age
      }

    },
  }

• 视图中引用直接通过数据名称引用即可

{{name}} {{age}}

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <hr>
    <el-button type="primary" @click="handleName">修改</el-button>
  </div>
</template>
<script>
  // 按需导入
  import {
    reactive,
    ref
  } from 'vue'
  export default {
    setup() {
      // 通过ref方法基于基本数据类型创建响应式对象
      const name = ref('张三')
      const age = ref(18)

      return {
        name,
        age
      }

    },
    methods: {
      handleName() {
        this.name = '李四'
        this.age = '20'
        console.log(this.name)
      }
    },
  }
</script>

<style>
</style>

组合API——toRefs

• reactive方法创建响应式数据对象，不支持ES6的解构赋值，解构赋值会使其失去响应式的特性
• toRefs：可以让reactive创建的响应式数据对象，支持es6的解构赋值，同时保持响应式的特性
• 语法：参数必须是reactive创建的响应式数据对象

import { toRefs} from 'vue'

  export default {
    setup() {
      // 通过ref方法基于基本数据类型创建响应式对象
      const name = ref('张三')
      const age = ref(18)

      return {
        name,
        age
      }

    },
  }

完整示例

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <hr>
    <el-button type="primary" @click="handleName">修改</el-button>
  </div>
</template>
<script>
  // 按需导入
  import {
    reactive,
    toRefs,
    ref
  } from 'vue'
  export default {
    setup() {
      // 通过ref方法基于基本数据类型创建响应式对象
      const {
        name,
        age
      } = toRefs(reactive({
        name: "张三",
        age: 20
      }))

      return {
        name,
        age
      }

    },
    methods: {
      handleName() {
        this.name = '李四'
        this.age = '28'
      }
    },
  }
</script>

<style>
</style>