Vue3中通过ref函数和reactive函数实现响应式数据

ref函数 

作用: 定义一个响应式的数据

语法: const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

• JS中操作数据： xxx.value

• 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

• <template>
    <div>
      <p>姓名：{{name}}</p>
      <p>年龄：{{age}}</p>
      <p>性别：{{sex}}</p>
      <button @click="fn">点击修改姓名</button>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    // 使用Vue3的方式来定义数据和方法
    setup(){
      // 创建响应式数据的引用对象
      let name = ref('张三')
      let age = ref(18)
      let sex = ref('男')
      console.log(name);    // 打印结果为响应式数据的引用对象
      function fn () {
        // JS中操作数据： xxx.value
        name.value = '李四'
      }
      return {
        name,
        age,
        sex,
        fn
      }
    }
  }
  </script>
  

  在fn方法中我们打印了一下name属性 控制台中输出的为一个响应式数据的引用对象（reference对象，简称ref对象）。

备注：

• 接收的数据可以是：基本类型、也可以是对象类型。

• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

• 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

 reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

• 

  对Proxy不是很熟悉的小伙伴可以看一下我的另一篇文章Proxy代理

• reactive定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

• <template>
    <div>
      <p>姓名：{{name}}</p>
      <p>年龄：{{info.age}}</p>
      <p>性别：{{info.sex}}</p>
      <p>爱好：{{info.hooby}}</p>
      <button @click="fn">点击修改姓名</button>
    </div>
  </template>
  
  <script>
  import { ref, reactive } from 'vue'
  export default {
    name: 'App',
    // 使用Vue3的方式来定义数据和方法
    setup(){
      let name = ref('张三')
      // 通过reactive定义一个对象类型的响应式数据 返回的是一个代理对象
      let info = reactive({
        age: 18,
        sex: '男',
        hooby: ['抽烟', '喝酒', '打麻将']
      })
      console.log(info)   // 代理对象（Proxy的实例对象，简称proxy对象）
      function fn () {
        name.value = '李四'
        info.age = 22,
        info.hooby[0] = '敲代码'    // 与vue2不同的是可以直接通过数组的索引修改数据 也能够被vue监测到
      }
      return {
        name,
        info,
        fn
      }
    }
  }
  </script>
  

reactive对比ref

• 从定义数据角度对比：

  • ref用来定义：基本类型数据。

  • reactive用来定义：对象（或数组）类型数据。

  • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

• 从原理角度对比：

  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

• 从使用角度对比：

  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

  • reactive定义的数据：操作数据与读取数据：均不需要.value。