vue3修改响应式代理值

Posted 2023-04-27

前端框架
vue3中如何使用ref和reactive定义和修改响应式数据？

国服第二切图仔
原创前端领域新星创作者
关注
1点赞·572人阅读
需求：vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？
1、字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等
<script setup>
import ref from 'vue'
// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
const message = ref('Hello World!')
// 但是在这个示例中更改这个值的时候，就可以实现数据和页面响应式绑定了。
function changeMsg(data)
//message=data 这种是不行的，无法实现双向绑定
message.value=data

</script>
<template>
<h1> message </h1>
<button @click="changeMsg('数据修改')">Reverse Message</button>
</template>
登录后复制

2、数组/对象：引入 reactive 用来定义对象数据包括数组和对象
vue3使用proxy，对于对象和数组都不能直接整个赋值
<script setup>
import reactive from 'vue'
const arr = reactive([]);
const arr2=reactive(arr:[]);
const load = () =>
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
//方法1 失败，直接赋值丢失了响应性
arr = res;
// 方法2 这样也是失败
arr.concat(res);
// 方法3 成功 插入数据，修改数据属性，但是很麻烦
res.forEach(e =>
arr.push(e);
);
// 方法4 成功
arr.value =res
//方法5 成功
arr2.arr = res
;
</script>
<template>
<h1>Demo</h1>
</template>
登录后复制

这里就是vue3中setup组合式api 参考技术A vue3中如何使用ref和reactive定义和修改响应式数据?
12月2日1、字符串/数字:“ref”是vue3中用来存储值的响应式数据源,它可以定义字符串,数字等 import ref from'vue' // “ref”是用来存储值...
CSDN编程社区 参考技术B 修改person中的值则需要通过user.name,user.age来响应式修改。

Vue.set 向响应式对象中添加响应式属性，及设置数组元素触发视图更新

一、为什么需要使用Vue.set？

　　vue中不能检测到数组和对象的两种变化：

　　1、数组长度的变化 vm.arr.length = 4

　　2、数组通过索引值修改内容 vm.arr[1] = ‘aa’

　　Vue.$set(target,key,value)：可以动态的给数组、对象添加和修改数据，并更新视图中数据的显示。

　　vue在构造函数new Vue()时，就通过Object.defineProperty中的getter和setter 这两个方法，完成了对数据的绑定。所以直接通过vm.arr[1] = ‘aa’的方法，无法修改值去触发vue中视图的更新，必须还得通过Object.defineProperty的方法去改变，而Vue.$set（）就封装了js底层的Object.defineProperty方法。

　　所以我们需要利用Vue.set() 响应式新增与修改数据。

二、Vue.set使用

　　Vue不能检测到对象属性的添加或删除。

　　由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能是响应式的。例如：

data () {
    return {
        form: {
            total: 10
        }
    }
}
 
// this.form.total是响应式的
 
// 若直接增加属性，是非响应式的
this.form.showFlag= true  //非响应式的

　　使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。Vue.set(this.form, ‘showFlag‘, true)

　　还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名：this.$set(this.form, ‘showFlag‘, true)

　　这样，this.form.showFlag 就是响应式的了。

　　Vue.set(target, key/index, value) 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.obj.newProperty = ‘hi‘)

　　官方文档：https://cn.vuejs.org/v2/api/#Vue-set

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值。

• 用法：

  向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi‘)

  注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。意思是，set 这个方法只能用于data 里面的子数组对象，而不能直接用于data (这个根数据)或者vue 实例

var vm = new Vue({
el:"#div",
  data: {
    items: [‘a‘, ‘b‘, ‘c‘]
  }
});
 
Vue.set(vm.items,2,"ling")

　　设置数组元素：Vue.set(vm.items, 2, "ling") 表示把 vm.items  这个数组的下标为2 的元素，改为"ling"，把数组  ["a","b","c"] 修改后是 ["a","b","ling"]