组合式API-setup函数

从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
在模版中需要使用的数据和函数，需要在 setup 返回。
总结setup 组件初始化之前执行，它返回的数据和函数可在模版使用。

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
    return { msg , say} // 必须返回
    },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

vue3.0生命周期钩子函数

setup 创建实例前
onBeforeMount 挂载DOM前
onMounted 挂载DOM后
onBeforeUpdate 更新组件前
onUpdated 更新组件后
onBeforeUnmount 卸载销毁前
onUnmounted 卸载销毁后
总结组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

组合式API-reactive函数

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据,简单的数据类型下一节细讲。
reactive 通常是用来定义响应式对象数据
只能定义复杂数据类型

<template>
  <div class="container">
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // 普通数据
    // const obj = {
    //   name: 'ls',
    //   age: 18
    // }
    const obj = reactive({
      name: 'ls',
      age: 18
    })

    // 修改名字
    const updateName = () => {
      console.log('updateName')
      obj.name = 'zs'
    }

    return { obj ,updateName}
  }
}
</script>

组合式API-toRef函数

toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
大白话就是解构响应式的值，修改值，原来的响应式的值也会变。
要修改他的值要 .value 才行
使用场景：用某一个响应式数据的值

<template>
  <div class="container">
    {{name}} <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 模板中只需要使用name数据
    // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
    // let { name } = obj 不能直接解构，出来的是一个普通数据
    const name = toRef(obj, 'name')
    // console.log(name)
    const updateName = () => {
      console.log('updateName')
      // toRef转换响应式数据包装成对象，value存放值的位置
      name.value = 'zs'
    }

    return {name, updateName}
  }
}
</script>
<style scoped lang="less"></style>

组合式API-toRefs函数

toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。
比toRef 高级一点

<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 解构或者展开响应式数据对象
    // const {name,age} = obj
    // console.log(name,age)
    // const obj2 = {...obj}
    // console.log(obj2)
    // 以上方式导致数据就不是响应式数据了
    const obj3 = toRefs(obj)
    console.log(obj3)

    const updateName = () => {
      // obj3.name.value = 'zs'
      obj.name = 'zs'
    }

    return {...obj3, updateName}
  }
}
</script>
<style scoped lang="less"></style>

组合式API-ref函数

ref函数，常用于简单数据类型定义为响应式数据（也可以定义复杂数据类型，并不是不可以）
再修改值，获取值的时候，需要.value
在模板中使用ref申明的响应式数据，可以省略.value
总结带有ref的（toRefs、toRef、 ref）在修改值的时候都要用.value改值，但是在模板中就不需要.value他会自己判断（_v_isRef 属性）

<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. name数据
    const name = ref('ls')
    console.log(name)
    const updateName = () => {
      name.value = 'zs'
    }
    // 2. age数据
    const age = ref(10)

    // ref常用定义简单数据类型的响应式数据
    // 其实也可以定义复杂数据类型的响应式数据
    // 对于数据未知的情况下 ref 是最适用的
    // const data = ref(null)
    // setTimeout(()=>{
    //   data.value = res.data
    // },1000)

    return {name, age, updateName}
  }
}
</script>

ref、toRef、toRefs的区别

ref:复制，修改响应式数据不影响以前的数据；数据改变，界面自动更新
toRef:引用，修改响应式数据会影响以前的数据；数据改变，界面不自动更新
toRefs：
(1)接收一个对象作为参数，它会遍历对象身上所有属性，然后调用单个toRef、
(2)将对象的多个属性变成响应式数据，并且要求响应式数据和原始数据关联，且更新响应式数据的时候不会更新界面，用于批量设置多个数据为响应式

ref和reactive的区别

reactive:

(1)它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。
(2)参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs
(3)只能定义复杂数据类型

ref:

(1)函数参数可以是基本数据类型，也可以接受对象类型
(2)如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：ref(1)->reactive({value:1})ref函数只能操作浅层次的数据，把基本数据类型当作自己的属性值；深层次依赖于reactive复制代码
(3)在template中访问，系统会自动添加.value; 在js中需要手动.value
(4)ref响应式原理是依赖于Object.defineProperty()的get()和set()的。