4.reactive和ref

1.ref函数

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

• 语法: const xxx = ref(Value)

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

  • JS中操作数据： xxx.value

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

• 备注：

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

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

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

 <p>当前的电影是:{{title}}</p>
        <p>当前电影的价格是:{{price}}</p>
        <p>电影详情是:<button @click="getInfo">点击查看详情</button>---{{info}} </p>

        <p><input type="text" v-model="mobile"> </p>
        <p>{{mobile}}</p>

        <p>当前商品的名字是:{{coffe.name}}</p>
        <p>当前商品的价格是:{{coffe.price}}</p>

import { ref } from "vue"
export default {
        // ref:创建一个包含响应式数据的引用对象 xxx.value
        //ref 可以接受基本数据类型,对象类型
        setup(props) {

            let title = "长津湖";
            let price = 56;
            // let info = "抗美援朝的故事";
            let info = ref("抗美援朝的故事");

            function getInfo() {
                console.log(info);
                info.value = `当前电影的名字是:${title},当前电影的价格是${price},详情是:${info.value}`;
            }
            let mobile = ref("123");
            //console.log(mobile);

            const coffe = ref({
                name: "瑞纳冰富桂拿铁",
                price: 48
            })
            // console.log(coffe.value.name)

            return {
                title,
                price,
                info,
                getInfo,
                mobile,
                coffe
            }

        }

2.reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

 <p>当前商品的名字是:{{iceCreame.name}}</p>
 <p>当前商品的价格是:{{iceCreame.price}}</p>

   import {
        ref,
        reactive
    } from "vue"

  export default {
        setup(props) {
        const iceCreame = reactive({
                name: "哈根达斯!!",
                price: 50
            })
            console.log(iceCreame.name, iceCreame.price);
            const count = reactive(1);
            console.log(count);
            return {
                iceCreame
            }        
        }
        }

3.reactive对比ref

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