Vue reactive简介

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