持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

在上一篇的文章中，我们了解了vue的compositionAPI及setup函数的使用，本章节中将会继续学习compositionAPI中的知识点ref和reactive响应式引用的用法。

开始之前

上篇文章中学习setup函数的时候，我们知道了可以通过setup函数返回数据值给模板上渲染，那么如果想要修改setup函数中的数据值，还能很好的渲染出来嘛？

<script>
  const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props, context){
      let name = 'JueJin'
      setTimeout(() => {
        name = 'Hello World'
      }, 2000)
      return{ name }
    }
  });

  const vm = app.mount('#root');
</script>

在setup函数中定义了一个name，然后在两秒钟之后修改name的值，并返回给模板中渲染。

在浏览器中会发现，两秒钟之后并没有重新渲染新的值到页面上。

🔥 在compositionAPI中可以通过一些语法把普通的变量变成响应式的变量，亦或是响应式的引用。

原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。

ref

✋🏻 ref是用来处理基础类型的数据时使用的。

template: `
  <div>{{name}}</div>
`,
setup(props, context){
  const { ref } = Vue
  let name = ref('JueJin')
  setTimeout(() => {
    name.value = 'Hello World'
  }, 2000)
  return{ name }
}

首先使用ref对一个基础型数据进行封装。
通过proxy将ref里面的数据值变成proxy({value: '数据值'})这样的一个响应式引用。
当我们对name进行转换之后变成了一个对象，所以在改变name的时候就要使用name.value的方式去修改。

chrome-capture (2).gif

❓ 大家有没有发现，我们在setTimeout里面修改name的时候，是修改的name.value，但是模板中使用的还是name，并没有使用name.value去渲染。

📢 这是因为在vue底层里面会通过你的代码去判断，如果你使用的是ref进行的数据转换，就会自动在底层调用name.value。如果这时候你在页面上使用name.value的话，vue模板是渲染不出任何数据的。大家可以自己试试哦~~

reactive

😌 ref只能处理基础类型的数据，如果想要处理对象或者数组的话，可以通过reactive去处理。

const app = Vue.createApp({
    template: `
      <div>{{nameObj.name}}</div>
    `,
    setup(props, context){
      let { reactive } = Vue
      let nameObj = reactive({name: 'JueJin'})
      setTimeout(() => {
        nameObj.name = 'Hello World'
      }, 2000)
      return{ nameObj }
    }
});

在vue底层里面处理ref和reactive这两种语法是差不多的，只是处理的数据类型上有些差异化而已。
通过proxy将reactive里面的数据值变成proxy({key: value})这样的一个响应式引用。
因为我们定义的是一个对象，修改的也是对象里面的值，所以在模板中渲染的时候就可以直接使用nameObj.name

❓ 在这样写代码的时候，会发现我们定义的是nameObj，修改的是nameObj.name，返回的是nameObj，渲染的又是nameObj.name。有些人可能会希望我们在返回和渲染的时候把nameObj里面的name解构出来，直接返回和渲染name就可以了。

const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props, context){
      let { reactive } = Vue
      let nameObj = reactive({name: 'JueJin'})
      setTimeout(() => {
        nameObj.name = 'Hello World'
      }, 2000)
      const {name} = nameObj
      return{ name }
    }
});

chrome-capture (3).gif

在浏览器中会发现好像并没有渲染出修改后的数据。
其实reactive中的数据是一个响应式的，但是这个对象里面的name不是响应式的，所以导致无法渲染修改后的数据。

🎁 这时候就要用到一个新的语法toRefs

setup(props, context){
      let { reactive, toRefs } = Vue
      let nameObj = reactive({name: 'JueJin'})
      setTimeout(() => {
        nameObj.name = 'Hello World'
      }, 2000)
      // 这里需要使用 toRefs 解构 nameObj 中的 name
      const {name} = toRefs(nameObj)
      return{ name }
}

chrome-capture (2).gif

通过调用toRefs的方法，将nameObj解构出来。

toRefs原理：通过proxy将proxy({key: value})变成{key: proxy({value: '数据值'})}。也就是将reactive返回的数据继续改变成ref的格式类型。

总结

本篇文章中主要带着大家一起学习了ref和reactive响应式引用的原理和用法，还稍微带出了toRefs的知识点，在后面的文章中，会和大家一起深入的学习toRefs的内容。

文章中的部分内容可能比较绕，所以在学习的时候还是要多举一反三，这样才能更好的理解这些内容哦~大家加油💪🏻💪🏻

【Vue3从零开始-第六章】6-2 ref和reactive响应式引用的用法

前言

开始之前

ref

reactive

总结