ref和reactive响应式状态

我们在选项式API想要声明一个响应式变量，我们是直接在data方法里面进行声明赋值，然后想要修改数据的话直接通过this指向来进行修改，修改后模版上就会进行响应渲染。

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
}
</script>

那么现在我们使用了组合式API，响应式变量的声明方式也是不一样的。在组合式 API 中，我们需要使用 ref() 函数来声明响应式变量，我们需要在setup中函数中来声明并且返回出去，这样在模版里面才能访问到。

import { ref } from 'vue'
export default {
  setup(){
    const count = ref(0)

    // 将 ref 暴露给模板
    return{
      count
    }
  }
}

修改响应式变量

我们现在有个按钮我们希望点击这个按钮来修改count，实现计数效果，那么我们来看一下在组合式API里面，怎么来实现。

首先我们先来声明一个increment方法，在这个方法里面我们来修改count变量。我们需要注意点，在组合式api中我们想要给一个响应式变量取值和赋值的话，我们需要访问它的value属性。例如：

  function increment() {
     console.log(count.value)
  }

然后在模版里面我们想要访问这个方法的话，我们也需要在setup里面进行返回，暴露给模版访问。

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
import { ref} from 'vue'
export default {
  setup(){
    const count = ref(0)

    function increment() {
      console.log(count.value)
    }

    return{
      count,
      increment
    }
  }
}
</script>

这样我们在模版中才能访问到这个方法。然后我们想要实现计数的话，就直接可以给count.value++

function increment() {
   count.value++
}

ref做了什么呢

我们使用ref来声明响应变量，为什么不能直接访问，需要访问它value属性呢。其实ref方法它帮我们把数据进行了Proxy对象处理。Proxy 可以拦截 JavaScript 对象的操作，比如属性查找、赋值、删除等。ref就是通过Proxy来实现了一个响应式对象。

我们使用ref方法后就会把我们的数据变成一个Proxy对象。

const count = ref(0)
//count = proxy({value:0})

那么在template中，vue其实自动帮我们解构了这个对象所以我们不需要来访问value属性。

reactive方法

在vue3中还有一个声明响应式变量的方法，reactive这个方法和ref类似，主要用来声明对象类型的数据。

<script>
import { ref ,reactive} from 'vue'
export default {
  setup(){
    // const count = ref(0)
    const state = reactive({count:0})

    function increment() {
      // console.log(count.value)
      state.count++
    }

    return{
      // count,
      increment,
      state
    }
  }
}
</script>

reactive和ref类似，它会将我们传递的对象类型数据转化proxy响应式对象，

const state = reactive({count:0})
// state = proxy({count:0})

ref的底层其实也是通过封装 reactive来实现的，ref它的底层其实就是将一个基本类型的数据转化成了对象后再来proxy。所以我们使用reactive来声明的响应式变量，不需要访问.value 因为它本身就是个对象。

js中的数组也是一个对象，所以reactive对数组也是有效果的。

<script>
import { ref ,reactive} from 'vue'
export default {
  setup(){
    const state = reactive([0])

    function increment() {
      state[0]++
    }

    return{
      increment,
      state
    }
  }
}
</script>