一. 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 = reactiveany>
    (obj)

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

const updataUser = ()=>
{

user.name="上进小菜猪"
user.age=21
user.sex="男"
}
    

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

删除代理对象的值：

delete user.wife

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！