vue setup响应式变量

setup响应式变量

一、非响应式变量

1 效果

开发中发现setup()中的变量居然不是响应式的，值得内容变成1了但是页面上还是0

2、源码

二、响应式变量

1、效果

使用ref()可以声明响应式的变量

2、源码

三、响应式的对象用reactive()

1、效果

2、源码

四、readonly将响应式变量变为只读

1、效果

2、源码

<template>
  <div class="home">
    {{u.age}}
    <br>
    <button @click="add()">变化</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>

五、解构返回reactive声明的对象中的属性时，该属性不是响应式的

1、效果

2、源码

六、使用toRefs解决上面的问题

1、效果

2、源码