Vue reactive简介

2022-09-14 11:32:41 阅读：231 来源： 互联网

标签：Map Vue const 简介 reactive array 取值赋值

reactive() ： 定义响应式变量，仅支持对象、数组、Map、Set等集合类型有效。对String、number、boolean、等原始类型无效

1、使用前必需引入 reactive

<script setup>
    import {
        reactive
    } from 'vue'
</script>

2、定义语法：

<script setup>
    import {
        reactive
    } from 'vue'

    // 数组
    const array = reactive([1, 2, 3, 4])
    
    // JSON对象
    const object = reactive({
        foo: 'aaa',
        boo: 'www'
    })
    
    // Map类型
    const object1 = reactive(new Map([
        ['k', 1],
        ['j', {
            a: 1
        }]
    ]))
</script>

注意：用另一个变量定义reactive时，该变量的变动会影响到reactive变化。同样reactive的变动也会同步影响到该变量。

<script setup>
    import {
        reactive
    } from 'vue'

    const a = [1, 2, 3, 4]
    const array = reactive(a) //引用变量a
    
    // 此处更改，会影响到array[0]的值
    a[0] = 5
    // array[0]的更改，也会影响到变量a
    array[0] = 78
    console.log(a[0]);
    
    // 但是a 不等于 array，它们仅仅是值相同
    console.log( a === array );
</script>

3、取值、赋值方法：

<script setup>
    import {
        reactive
    } from 'vue'

    // 数组
    const array = reactive([1, 2, 3, 4])
    // 数组取值
    let a = array[0]
    // 数组赋值  a = 56 不会响应更改array的值
    array[0] = 56
    
    // JSON对象
    const object = reactive({
        foo: 'aaa',
        boo: 'www'
    })
    // 对象取值
    a = object.foo
    // 对象赋值
    object.foo = 'ccc'
    
    // Map类型
    const object1 = reactive(new Map([
        ['k', 1],
        ['j', {
            a: 1
        }]
    ]))
    // Map取值
    a = object1.get('k')
    // Map赋值
    object1.set('k', 77)
</script>

a) reactive取值赋值不需要.value方式，直接取值或赋值。

b) 任何赋值操作的结果，是将值赋过去，而不是将响应式赋过去。所以被赋值对象的改变，不会影响到reactive的原始值，比如：

const array = reactive([1, 2, 3, 4])
let a = array[0] //这里仅是将值赋过去，而不是将响应式赋过去

// 这里修改了a的值，不会影响到array[0]的值。
a = 999

4、reactive是深层次响应式，即：无论数据多少级、对象多少个子节点、孙节点的变化，都会同步响应到视图。

标签：Map,Vue,const,简介,reactive,array,取值,赋值
来源： https://www.cnblogs.com/wm218/p/16692382.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue reactive简介