一. VUE的setup、ref、reactive和代理数据的使用

1.1 setup和ref

先来实现一个简单的点击按钮，数字增加的案例：

需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化

1.1.1 Vue2的方法实现：

Html先定义差值表达式来实时的渲染数值，绑定一个按钮事件。

<h2>setup和ref的基本使用</h2>
<h3>{{count}}</h3>
<button @click="updateCount">更新数据</button>

Js：

data(){
    return{
        count:0
    }
},
    methods:{
        updateCount(){
            this.count++;
        }
    }

成功实现了这个需求

1.1.2 Vue3的方法实现：

1.1.3 setup 的实现

• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

将上面的vue2代码改为Vue3实现，我们使用setup函数。

如下：发现无法实现的count的加减操作：

  setup(){
    let count = 0

    function updateCount(){
      count++
    }
    //返回的是一个对象。
    return{
      count,updateCount
    }
  }

分析原因：

此时的数据并不是响应式的数据（响应式数据：数据变化，页面跟着渲染变化）。

1.1.4 ref的实现

• 作用: 定义一个数据的响应式
• 语法: const xxx = ref(initValue):
  • 创建一个包含响应式数据的引用(reference)对象
  • js中操作数据: xxx.value
  • 模板中操作数据: 不需要.value
• 一般用来定义一个基本类型的响应式数据

报错的原因：count 是一个 Ref 对象，对象是不能进行++的操作。

在上面引用ref：

import { defineComponent ,ref} from 'vue';

因为ref返回的是ref对象。所以我们要对他的value进行加减。如果我们直接对count进行加减的话就发调用。（因为它是对象）

setup(){
    // let count = 0
    const count = ref(0)
    function updateCount(){
        count.value++
    }
    //返回的是一个对象。
    return{
        count,updateCount
    }

1.2 reactive

• 作用: 定义多个数据的响应式
• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

需求：显示用户的相关信息，点击按钮，可以更新用户的相关信息数据

template内容：

<template>
  <h2>上进小菜猪</h2>
  <h3>名字：{{ user.name }}</h3>
  <h3>年龄：{{ user.age }}</h3>
  <h3>媳妇：{{ user.wife }}</h3>
</template>

setup：

const user = reactive({
name:"小明",
age:20,
wife:{
name:"小猪",
age:21,
cars:["奔驰","宝马","奥迪"]
}
})

return{
user,

}

效果：

加入一个新按钮：

<button @click="updataUser"> 点击</button>

写updataUser监听的函数，改变user对象里的参数：

const updataUser = ()=>{
      user.name="上进小菜猪"
      user.age=21
    }

放行：updataUser

return{
user,updataUser

}

把数据变成响应式的数据 返回的是一个 Proxy 的代理对象，被代理的目标对象就是 obj 对象 user 现在是代理对象，obj 是目标对象 user 对象的类型是 proxy。

如下使用方式：

setup(){
const obj = reactive({
name:"小明",
age:20,
wife:{
name:"小猪",
age:21,
cars:["奔驰","宝马","奥迪"]
}
})

const user = reactive(obj)

const updataUser = ()=>{
user.name="上进小菜猪"
user.age=21
}

1.2.1 操作代理数据实现数据的更改

将代理对象设置为any类型。

const user = reactive<any>(obj)

在操作添加操作过程中，加入性别：

const updataUser = ()=>{
user.name="上进小菜猪"
user.age=21
user.sex="男"
}

运行发现，可以将性别成功的渲染到用户页面。

删除代理对象的值：

delete user.wife

总结：如果操作代理对象，目标对象中的数据也会随之变化，同时如果想要在操作数据的时候，界面也要跟着重新更新渲染那么也是操作代理对象