vue3组合式api之setup中定义变量（二）

1.定义响应式变量有以下方式

1）通过引入ref（简单变量赋值）

2）通过引入reactive（对象）

注意：reactive对象如果是嵌套对象暴露在模板的时候，通过方法改变属性值你会发现没有任何变化这个时候就需要引入torefs

<template>
    <div class="about">
      <h1>{{name}}</h1>
      <h2></h2>
      <span @click="changeobj">加减</span>
    </div>
  </template>
  <script>
  import {ref,reactive} from 'vue'
  export default {
   
      setup(){
            let obj = reactive({
                name:'张三',
                age:18,
                person:{
                    name:'小张'
                }
            })
            function changeobj(){
                obj.name='李四'
            }
          return {...obj,changeobj}//obj是个对象通过解构之后在页面点击不会产生任何变化
      }
  }
  </script>
  <style>
  
  </style>
  

以上情况点击加减那么没有任何反应

<template>
    <div class="about">
      <h1>{{name}}</h1>
      <h2></h2>
      <span @click="changeobj">加减</span>
    </div>
  </template>
  <script>
  import {ref,reactive,toRefs} from 'vue'
  export default {
   
      setup(){
            let obj = reactive({
                name:'张三',
                age:18,
                person:{
                    name:'小张'
                }
            })
            function changeobj(){
                obj.name='李四'
               
            }
          return {...toRefs(obj),changeobj}//obj是个对象通过解构之后在页面点击不会产生任何变化
      }
  }
  </script>
  <style>
  
  </style>
  

需要引入torefs 点击才会触发响应式