vue3响应式基础

1.ref() 声明响应式状态

1.1 但值发生改变的时候，页面上是不会发生改变的，这样的代码并不是响应式的。

1.1.1页面效果。

1.2 正确的使用方法，先import {ref} from "vue"把它取过来，定值也要改变了使用ref（值）。

<script setup>
    import {ref} from "vue";
    let num1=6;
    let num2=ref(10);
    console.log(num1);
    console.log(num2);
</script>

1.2.1输出它是一个value对象。

1.2.2 所以我们要到num2的后面加上num2.value。

<script setup>
    import {ref} from "vue";
    let num1=6;
    let num2=ref(10);
    console.log(num1);
    console.log(num2.value);
</script>

1.2.3 结果。

 

1.2.4 花括号直接放num2就好了。

<template>
    <view>{{num1}}</view>
    <view>{{num2}}</view>
</template>
 
<script setup>
    import {ref} from "vue";
    let num1=6;
    let num2=ref(10);
    console.log(num1);
    setInterval(()=>{
        num2.value++;
        console.log(num2.value);
    },1000)
</script>

1.2.5 实现效果。 

1.3 ref（）里面也可以放字符串，数字，对象。

<template>
    <view>{{test}}</view>
    <view>{{arr}}</view>
    <view>{{obj}}</view>
</template>
 
<script setup>
    import {ref} from "vue";
    let test =ref("你好ref（）");//字符串
    let arr=ref([1,2,3,4]);//数组
    let obj=ref({name:"张三",age:19});//对象
    
</script>

1.3.1 运行效果。

1.3.2 当然也可以根据数字下标，对象如果只需要name的话用 obj点你需要的变量。

<template>
    <view>{{test}}</view>
    <view>{{arr[2]}}</view>
    <view>{{obj.name}}</view>
</template>

1.3.3 运行图。