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、源码

 

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！