vue--响应式数据（setup()的参数和生命周期钩子、ref、reactive()、toRef()、toRefs()）

响应式数据

　　Vue3相比较于Vue2来说，增加了Composition API。在通过Vue3进行项目开发的时候，可以采用和Vue2不一样的写法，从而帮助开发者进行快速开发。

在Vue2当中，只要把数据放在data 中，那么就会变成响应式数据，当数据发生改变的时候，页面视图自然也会发生改变。

例如：

 

 当 data中的message发生变化时，视图中的内容自然也会发生变化，我们可以加上一个定时器，然后让message在3s之后改变。

 

 setup中的响应式数据

　　过渡：setup和以前的api（data，methods，computed等）并不冲突，也是可以相互访问的，值得注意的是setup里面不能用this，并且在setup执行的时候组件实例还未创建完毕，故不也能使用data，methods，computed定义的变量和函数。

　　在vue3中，新增加了setup函数。在其中，如果想要设置响应式数据，则需要通过两个方法：ref() 方法和reactive()方法。

在setup()方法中的数据，如果没有经过ref() 或者reactive()的处理，那么就不是一个响应式的数据。一般我们可以通过ref() 来处理基础数据类型的数据，通过reactive()来处理引用类型的数据。

 

创建了两个变量，分别存储了一个基础数据类型的字符串和一个引用类型的对象，为了保证变量userName 和obj都是响应式数据，我们分别对其进行了加工，其中，userName是基础类型，所以将其传入ref函数中，将其变为一个响应式的数据，因为obj是引用类型的数据，所以将其传入到reactive函数中，目的也同样是将其变为响应式数据。

obj对象的确被reactive()方法改为了响应式对象，但是它里面的属性并不是响应式。所以，此时，我们就需要做一件事。将我们需要的属性变成响应式，这里用到toRef。

 

 num1 变量就与obj对象中的a属性建立了响应式连接。如果需要将对象中的所有属性，都变成响应式，那么可以使用toRefs()函数。

 

总结：1、上面有提到的ref，ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。

　　    2、reactive返回对象的响应式副本。

　　    3、toRef 和 toRefs 这两个函数都是为了获取一个响应式的子项，并且跟以前的响应式数据进行关联

setup 参数

　　使用 setup 函数时，它将接收两个参数：Props、Context
Props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

但是，因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性，上面说到的toRefs可以很好的解决这个问题。

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)
  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

Context
传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

setup生命周期钩子

在setup中可以访问到以下生命周期钩子：

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onErrorCaptured
• onRenderTracked
• onRenderTriggered
• onActivated
• onDeactivated

这些函数接受一个回调函数，当钩子被组件调用时将会被执行，如：

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}