【详细】reactive函数与ref函数

reactive作用：用它定义对象类型响应式数据

<script>
export default {
  setup() {
    const noState = {
      name: 'ls',
      age: '20',
    }
    const fn = () => {
      noState.age++
      console.log('fn')
    }
    return { noState, fn }
  },
}
</script>

<template>
  <div>
    <p>{{ noState.name }}</p>
    <p>{{ noState.age }}</p>
    <button @click="fn">长大吧</button>
  </div>
</template>

<style scoped></style>

如图：发现触发了5次函数，但是页面中的对象年龄属性似乎没有变化。

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({ name: 'zs', age: 18 })
    const fn2 = () => {
      state.age++
      console.log('fn2')
    }
    return { state, fn2 }
  },
}
</script>

<template>
  <div>
    <p>{{ state.name }}</p>
    <p>{{ state.age }}</p>
    <button @click="fn2">长大吧</button>
  </div>
</template>

<style scoped></style>

如图：触发了五次，zs成功的长大了。为何发生这种变化了呢？

答：使用了reactive函数，它可以使对象（复杂类型）变成响应式，但是它不可以转化简单数据，使用时需要引入哦~

总结：那么简单数据如何转换成响应式的呢？

答：ref函数可以转化所有的类型，那么，我们为什么还要reactive函数呢？ref中为你解答~

ref函数作用：用它定义响应式数据，不限类型

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    function countFn() {
      console.log('countFn')
      count += 10
    }
    return { count ,countFn }
  },
}
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">生长吧</button>
    <button @click="countFn">急速生长吧</button>
  </div>
</template>

<style scoped></style>

如图：直接++可以正常使用，没有问题。

如图：使用函数发现错误了，为什么呢？写法也没错啊？

答：ref函数如何解决简单类型的响应式呢？在数据外加上一个对象proxy{value:xxx}，改值时自然要.value属性才能获取到值。

如图

答：在template中vue3做了处理，凡是ref函数都会自动在后面加上了.value。

所以考虑加不加只在js区域。

总结：ref使用时先导入，然后在js区域更改，使用时要加上.value。

如此看来虽然ref函数范围广，但终究不如reactive函数简单。

reactive与ref的选择

如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。