vue.js基础学习（组合式 API：setup() ）

基础入门：vue.js 组合式API：setup()

1、setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

•  需要在非单文件组件中使用组合式 API 时。
•  需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

其他情况下，都应优先使用 <script setup> 语法。

2、基本使用

• 我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性：

• <script>
  import { ref } from 'vue'
  
  export default {
    setup() {
      const count = ref(0)
  
      // 返回值会暴露给模板和其他的选项式 API 钩子
      return {
        count
      }
    },
  
    mounted() {
      console.log(this.count) // 0
    }
  }
  </script>
  
  <template>
    <button @click="count++">{{ count }}</button>
  </template>

• 请注意在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。 

3、相关使用 

• 组合式API：将同一个逻辑关注点的相关代码收集在一起；

• 在组件创建之前被执行,不需要this，this不会指向实例；

• ref定义响应式变量，reactive 可以定义引用数据类型，通过ref定义响应式变量，ref()会返回一个带有value属性的对象；

• 通过reactive 定义引用类型数据；

• obj 扩展运算符，可以进行解构;...toRefs(obj) 可使解构后端数据为响应式数据；

源代码：

<script>
  import Hello from './components/Hello.vue';
  import { ref,reactive, toRefs } from 'vue';//ref定义响应式变量，reactive 可以定义引用数据类型
  export default{
    data(){
      return{
        isShow:true
      }
    },
    // 组合式API：将同一个逻辑关注点的相关代码收集在一起
    setup(){//在组件创建之前被执行,不需要this，this不会指向实例
      console.log('setup');

      //msg逻辑代码
      let msg='hello'
      console.log(msg);
      function changeMsg(){
        msg='你好！'//数据不是响应式的
        console.log(msg)
      }

      //通过ref定义响应式变量
      //counter逻辑代码
      const counter=ref(0)//ref()会返回一个带有value属性的对象
      function changeCoun(){
        counter.value++
      }

      //message逻辑代码
      const message=ref('hello word!')
      function changMessage(){
        message.value='你好，世界！'
      }

      //通过reactive 定义引用类型数据
      const obj=reactive({
        name:"志在成功",
        age:15,
        childer:{
          name:'x-ysr'
        }
      })
      function changeObjName(){
        obj.name="xueysr"
      }
      let {name,age,childer} =toRefs(obj)//也可实现解构
      return{
        msg,
        changeMsg,
        counter,
        changeCoun,
        message,
        changMessage,
        obj,
        changeObjName,
        //...obj 扩展运算符，可以进行解构;...toRefs(obj) 可使解构后端数据为响应式数据
        // ...toRefs(obj),
        name,
        age,
        childer
      }
    },
    beforeCreate(){
      console.log("beforeCreate")
    },
    created(){
      console.log('created')
    },
    components:{
      Hello
    }
  }

</script>

<template>
<h2>{{msg}}</h2>
<h2>{{counter}}</h2>
<h2>{{message}}</h2>
<h2>{{'姓名：'+ obj.name}}</h2>
<h2>{{'姓名：'+ name}}</h2>
<h2>{{'年龄：'+ age}}</h2>
<h2>{{childer.name}}</h2>
<button @click="changeMsg">改变msg</button>
<button @click="changeCoun">改变counter</button>
<button @click="changMessage">改变message</button>
<button @click="changeObjName">改变名字</button>
  <Hello></Hello>
</template>

<style>

</style>

 源代码运行情况：