vue3中的reactive函数声明数组方式
目录
- reacitve函数如何声明一个响应式数组
- 解决办法
- 使用reactive包裹数组赋值
- 需求
- 代码
reacitve函数如何声明一个响应式数组
如以下案例
<template>
<div>
<div v-for="item in arr" :key="item">
{{item}}
</div>
<button @click="change">change</button>
</div>
</template>
<script>
import { defineComponent, reactive,ref } from 'vue';
export default defineComponent({
setup(props,context) {
let arr = reactive([])
function change(){
console.log("change...");
let newArr = [1,2,3]
arr = newArr
}
return{
arr,
change
}
},
});
</script>
<style scope></style>
点击change按钮，发现并没有什么变化，这是因为arr = newArr这行代码让arr失去了响应式。
解决办法
使用ref函数
setup(props,context) {
let arr = ref([])
function change(){
console.log("change...");
let newArr = [1,2,3]
arr.value = newArr
}
return{
arr,
change
}
},
使用数组的push方法
setup(props,context) {
let arr = reactive([])
function change(){
console.log("change...");
let newArr = [1,2,3]
arr.push(...newArr)
}
return{
arr,
change
}
},
创建一个响应式对象，对象的属性是数组
<template>
<div>
<div v-for="item in arr.list" :key="item">
{{item}}
</div>
<button @click="change">change</button>
</div>
</template>
<script>
import { defineComponent, reactive,ref } from 'vue';
export default defineComponent({
setup(props,context) {
let arr = reactive({
list:[]
})
function change(){
console.log("change...");
let newArr = [1,2,3]
arr.list = newArr
}
return{
arr,
change
}
},
});
</script>
使用reactive包裹数组赋值
需求
将接口请求到的列表数据赋值给响应数据arr
代码
const arr = reactive([]);
const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
// 方法1 失败，直接赋值丢失了响应性
// arr = res;
// 方法2 这样也是失败
// arr.concat(res);
// 方法3 可以，但是很麻烦
res.forEach(e => {
arr.push(e);
});
};
方法1：vue3 使用 proxy，对于对象和数组都不能直接整个赋值；
方法2：concat 不改变原数组
// 方法4
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
// 方法5
const state = ref([])
state.value = [1, 2, 3]
// 方法6
const arr = reactive([])
arr.push(...[1, 2, 3])
// 亦或者
arr.length = 0 // 清空原数组
arr.push(...res) // 解构然后push进去
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
setup+ref+reactive实现vue3响应式功能
setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之
-
vue3的ref,computed,reactive和toRefs你都了解吗
目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&
-
Vue3.0中Ref与Reactive的区别示例详析
目录 Ref与Reactive Ref Reactive Ref与Reactive的区别 shallowRef 与shallowReactive toRaw ---只修改数据不渲染页面 markRaw --- 不追踪数据 toRef --- 跟数据源关联 不修改UI toRefs ---设置多个toRef属性值 customRef ---自定义一个ref ref 捆绑页面的标签 总结 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据.方法中修
-
Vue3中reactive函数toRef函数ref函数简介
目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段
-
对Vue3中reactive的深入理解
目录 Vue3 reactive的理解 1.什么是reactive? 2.reactive注意点 Vue3笔记 reactive函数 Vue3 reactive的理解 1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy来实现的 2.reactive注意点 reactive参数必须是对象(json/arr) 如果给reactive传递了其他对象,默认
-
vue3中的reactive函数声明数组方式
目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template> <div> <div v-for="item in arr" :key="item"> {{item}} </div> <button @click="ch
-
Vue3中操作dom的四种方式总结(建议收藏!)
目录 前言 通过ref直接拿到dom引用 适用场景 示例代码 通过父容器的ref遍历拿到dom引用 适用场景 示例代码 通过:ref将dom引用放到数组中 适用场景 示例代码 通过子组件emit传递ref 适用场景 示例代码 写在最后 前言 最近产品经理提出了很多用户体验优化的需求,涉及到很多dom的操作. 小张:“老铁,本来开发Vue2项目操作dom挺简单的,现在开发vue3项目,突然感觉一头雾水!” 我:“没事,原理都差不多,查查资料应该没问题的!” 至此将Vue3中dom操作常见的几种方式
-
vue2.x中h函数(createElement)与vue3中的h函数详解
目录 1. vue2.x的 h 函数(createElement) 2. vue3 h函数配置项 2.1 v-model实现(以下开始为官网实现) 2.2 v-on 2.3 事件修饰符 2.4 插槽 2.5 component 和 is 2.6 自定义指令 2.7 内置组件 2.8 渲染函数的返回值 2.9 JSX 总结 1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 inn
-
Vue中的reactive函数操作代码
reactive函数 之前给大家介绍过vue3.2 reactive函数问题小结,喜欢的朋友点击查看. 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数,ref函数可以用基本类型也可以对象类型) 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是“深层次的”. 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. <tem
-
浅谈JavaScript中变量和函数声明的提升
现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.
-
php中使用array_filter()函数过滤数组实例讲解
在数组中元素的过滤上,有一种方法比较特殊,结合了回调函数的使用,通过键值来与函数进行对应.相信说到这里很多人对于这种函数方法已经很好奇了,它就是array_filter() 函数的使用.接下来我们对该函数的定义.语法.参数.返回值.实例进行全面的介绍,具体过滤方法展现如下. 1.定义 array_filter用回调函数处理数组中的各个元素. 重点在于过滤(而不是新增)某个元素,当你处理到一个元素时,如果返回了false,那么这个元素将会被过滤掉.PS:保持了原来的索引. 2.语法 array a
-
vue3中的render函数里定义插槽和使用插槽
目录 render函数里定义插槽和使用插槽 定义插槽 定义有插槽的组件使用插槽 vue3 render函数小变动 render函数的参数 render函数签名 VNode属性格式 render函数里定义插槽和使用插槽 vue3中this.slots和vue2的区别 vue3:this.slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用.如v-slot:foo插槽分发的内容通过th
-
关于vue3中的reactive赋值问题
目录 vue3 reactive赋值问题 vue3 reactive的坑 清空数组 清空对象 vue3 reactive赋值问题 vue3中直接对reactive整个对象赋值检测不到 let obj = reactive({ name: 'zhangsan', age: '18' }) obj = { name: 'lisi' age: '' } // 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身 // 如需要对 reactive 赋值 // 方法1: 单个赋值 obj['name
-
vue3 中的toRef函数和toRefs函数的基本使用
目录 这篇我们看下toRef和toRefs的基本使用 Vue3的toRef 这篇我们看下toRef和toRefs的基本使用 我们知道ref可以用于创建一个响应式数据,而toRef也可以创建一个响应式数据,那他们之间有什么区别呢?事实上,如果利用ref函数将某个对象中的属性变成响应式数据,修改响应式数据是不会影响到原始数据. import {ref} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice'
-
详解vue3中setUp和reactive函数的用法
1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU