vue3.0提前了解系列一 ref和reactive

注：经热心群友提醒，本文内容可能存在部分理解问题，还未来得及做验证，会尽快验证并修复

非常抱歉，昨天电脑玩废了，跑了大半个北京都没招，最终直接重装系统了。所以没来得及更新，抱歉。

话不多说进入今天的主题，搭建好项目后，我们来尝试composition语法，本来想讲一节大的语法，但是发现ref和reactive这个东西还挺多的，所以将就这两个API进行一波分享

老规矩先上完整代码片段

<template>
  <div class="test">
    <h1>ref && reactive</h1>
    <h2>
      ref:{{ count }}
    </h2>
    <h2>
      reactive:{{ reactiveField }}
    </h2>
    <h2>
      reactive:{{ a[0].a }}
    </h2>
    <button @click="addRef">
      addRef
    </button>
    <button @click="addReactive">
      addReactive
    </button>
    <button @click="addA">
      addA
    </button>
  </div>
</template>

<script>
  import { ref, reactive, toRefs} from 'vue'
  export default {
    setup () {
      const count = ref(0)
      const state = reactive({
        reactiveField: 0,
        a: [
          {
            a:1
          }
        ]
      })
      const addRef = () => {
        count.value++
      }
      const addReactive = () =>{
        state.reactiveField++
      }
      const addA = () => {
        state.a[0].a++
      }
      return {
        count,
        ...toRefs(state),
        addA,
        addRef,
        addReactive
      }
    }
  }
</script>

<style lang="scss" scoped>
.test {
  color: red;
}
</style>

上面这么多，我只是在做同一件事情，双向数据绑定。vue一共提供了两种数据响应式监听，有点React Hooks的味道了。ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值。
其实，除了 ref 函数，Vue3.0中还提供了另外一个可以创建响应式对象的函数，那就是 reactive 函数。下面就来说说为什么要提供两种API

1、是为了适应不同的写法的人群

有的人可能喜欢这种写法

const a = 1
const b = 2

也有的人可能喜欢这种写法

const field = {
  a : 1,
  b : 1    
}

在这里不评价哪种合适，也没有什么准确的答案，两者的主要区别在于：一，我们使用了2个变量来存储值；而风格二则当作对象的属性存储。这两种风格的代码工作的都没问题，关键在于个人或团队的偏好：使用单独的变量还是使用对象封装，我觉得ref更偏向于第一类人，而reactive更偏向于第二类吧

2、ref只可以监听简单数据，reactive可以监听所有数据

ref这种写法简单，但也有弊端，经过尝试，我发现他只能监听一些如数字、字符串、布尔之类的简单数据而如果需要监听如上面代码一样的jsonArray我们在vue2种都会使用$set来进行变更，到了vue3我们终于可以愉快的使用reactive来实现了。

3、使用方式不一样

1、ref修改数据需要使用这样count.value=xxx的形式，而reactive只需要state.reactiveField=值这样来使用

2、第二点体现在template中引用时候为reactiveField，不需要state，也就是说我reactive对象里面字段是应该直接使用的

3、体现在reactive在return时候需要toRefs来转换成响应式对象

目前刚刚接触，我总结出的不同大概就这么些吧，我上面也提到了使用reactive需要用toRefs来包裹，那这个函数干嘛用的呢？

toRefs函数我是这么理解的 他能将reactive创建的响应式对象，转化成为普通的对象，并且这个对象上的每个节点，都是ref()类型的响应式数据。

今天分享大概就这么多吧，我还要去吧软件都安装回来，，，，下一次分享内容：composition生命周期、计算属性、watch属性的使用