v3的reactive和ref

reactive

1. 作用：定义一个对象类型的响应式数据
2. 语法：const 代理对象 = reactive（源对象）接受一个对象（或数组），返回一个代理对象（proxy对象）
3. reactive定义的响应式数据是"深层次的"
4. JS操作数据：xxx 不需要.value

   <template>
       <div>
           <div>姓名：{{ info.name }}</div>
           <div>年龄：{{ info.age }}</div>
           <div>性别：{{ info.sex }}</div>
           <div>好朋友：{{ info.hobby }}</div>
           <button @click="change">改变</button>
       </div>
   </template>
   
   <script>
   import { reactive } from "vue";
   export default {
       setup() {
           //数据
           let info = reactive({
               name: '阿雷',
               age: 23,
               sex: '男',
               con: {
                   cc: {
                       bb: 66
                   }
               },
               hobby: ['果冻', '蜜桃']
           })
           //方法
           function change() {
               info.name = '小黑'
               info.age = 22
               info.sex = '哈啊哈'
               info.con.cc.bb = 99
               info.hobby[0] = '笑吕'
           }
           //返回对象 常用
           return {
               info,
               change
           }
       }
   }
   </script>

ref 

1. 作用：定义一个响应式的数据
2. 语法：const xxx = ref（initValue）

• • 创建一个包含响应式数据的引用对象（reference对象 简称：ref对象）
  • JS中操作数据：xxx.value
  • 模板中读取数据：不需要.value，直接{{ xxx }}

<template>
    <div>
        <div>你是：{{ name }}</div>
        <div>我是：{{ nameTow }}</div>
        <button @click="fun">别点</button>
        <div>多种类小黑：{{ onefun.one1 }}</div>
        <div>多种类小黑：{{ onefun.two }}</div>
    </div>
</template>

<script>
import { ref } from "vue";
export default {
    setup() {
        //数据响应式
        let name = ref('小小六')
        let nameTow = ref('果冻')
        let onefun = ref({
            one1: '别怕',
            two: '我是小黑'
        })

        //方法
        function fun() {
            // name.value = '小黑'
            // nameTow.value = '变身'
            //模板上呈现不用.value
            onefun.value.one1 = '良品'
            onefun.value.two = '滂hong'
        }

        //返回对象 常用
        return {
            name,
            nameTow,
            onefun,
            fun,
        }
    }
}
</script>

<style lang="scss" scoped></style>

reactive和ref对比

• 从定义数据角度对比：
  • ref用来定义: 基本类型数据
  • reactive用来定义: 对象 (或数组)类型数据
  • 备注: ref也可以用来定义对象 (或数组)类型数据,它内部会自动通过 reactive 转为代理对象
• 从原理角度对比：
  • ref通过 object.defineProperty()的 get 与 set 来实现响应式(数据劫持)。
  • reactive通过使用Proxy来实现响应式 (数据劫持)，并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref定义的数据: 操作数据需要 .value ，读取数据时模板中直接读取不需要 .value
  • reactive定义的数据: 操作数据与读取数据：均不需要 value。