vue(33)vue中CompositionAPI中setup响应式变量的声明

1.在setup中普通声明的变量,并返回时该变量不是响应式的,即改变该变量的值不会刷新页面。

<template>
  <div class="home">
    {{num}}
    <br>
    <button @click="add()">change</button>//这里点击的时候在方法中即使改变了num的值,页面上还是num的初始值,因为它不是响应式的
  </div>
</template>

<script>
export default {
  setup() {
    let num = 0;
    function add(){
      num++;
      console.log(num);
    }
    return { num ,add};
  },
};
</script>
 
2.使用ref()可以声明响应式的变量
<template>
  <div class="home">
    {{num}}//在这里用num的值时不用写num.value
    <br>
    <button @click="add()">change</button>
  </div>
</template>

<script>
import{ref}from 'vue'
export default {
  setup() {
    let num = ref(0);//这里num就是一个响应式的变量了
    function add(){
      num.value++;//用ref声明后在setup中访问或者改变num的值时要用num.value。但是在template中使用时直接可以使用num
      console.log(num.value);
    }
    return { num ,add};
  },
};
</script>
 
3.ref()不能声明响应式的对象,要声明响应式的对象用reactive()
<template>
  <div class="home">
    {{user.age}}
    <br>
    <button @click="add()">change</button>
  </div>
</template>

<script>
import{ref,reactive}from 'vue'
export default {
  setup() {
    let user = reactive({
      name:'tom',
      age:0
    });
    function add(){
      user.age++;//使用reactive声明响应式对象后不用像ref那样用.value来访问或者修改,直接像正常变量那样使用就可以
      console.log(user.age);
    }
    return { user ,add};
  },
};
</script>
 
4.使用readonly将响应式变量变为只读的,这样就可以将一个响应式变量变为非响应式不可更改的变量
<template>
  <div class="home">
    {{u.age}}
    <br>
    <button @click="add()">change</button>
  </div>
</template>

<script>
import{ref,reactive,readonly}from 'vue'
export default {
  setup() {
    let user = reactive({
      name:'tom',
      age:0
    });
    let u = readonly(user);
    function add(){
      u.age++;
      console.log(u.age);
    }
    return { u ,add};
  },
};
</script>
 
5.解构返回reactive声明的对象中的属性时,该属性不是响应式的
<template>
  <div class="home">
    {{age}}
    <br>
    <button @click="add()">change</button>
  </div>
</template>

<script>
import{ref,reactive,readonly}from 'vue'
export default {
  setup() {
    let user = reactive({
      name:'tom',
      age:0
    });
    function add(){
      user.age++;
      console.log(user.age);
    }
    return { ...user ,add};//...user表示解构返回user对象中的没个属性,这里表示返回一个name和age变量,但这样返回后name和age不是响应式的
  },
};
</script>
 
6.为了解决5所示的问题,可以使用toRefs来将一个reactive声明的对象的属性解构为响应式的变量返回
<template>
  <div class="home">
    {{age}}
    <br>
    <button @click="add()">change</button>
  </div>
</template>

<script>
import{ref,reactive,readonly,toRefs}from 'vue'
export default {
  setup() {
    let user = reactive({
      name:'tom',
      age:0
    });
    function add(){
      user.age++;
      console.log(user.age);
    }
    return { ...toRefs(user) ,add};//使用toRefs后返回name和age变量就是响应式的了
  },
};
</script>
posted @ 2021-07-11 11:15  maycpou  阅读(725)  评论(0编辑  收藏  举报