0
点赞
收藏
分享

微信扫一扫

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

一. 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,

}

效果:

image-20230314194416743

加入一个新按钮:

<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

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

举报

相关推荐

0 条评论