vue3 setup实现响应式

小伙伴们开始学习vue3了嘛    以下是俺的笔记     

 想了解看    1.响应式          想直接使用看    2.响应式

1.响应式

注：ref和reactive都需要引入，不管是方法还是数据，都需要在setup最后return才可以在Dom使用

（1）用ref

在vue3中ref（不同vue2中绑定在dom上的，那个ref依旧可以在vue3继续使用） ，vue中的ref函数可以实现响应式，只需要将你在setup中定义的数据，用ref裹就可以。

在使用ref中：

如果是简单数据类型，需要读取，如果是要在dom上读取数据，直接写数据名字就可以，见下方dom上age读取，如果是需要在js部分使用，读取需要用（你要修改的数据名字）.value 见下方hello中name的读取； 但是如果你需要修改需要用（你要修改的数据名字）.value去进行修改，比如下面代码块hello2中age的修改

如果是复杂数据类型，需要读取，如果是要在dom上读取数据，直接写数据名字就可以，见下方dom上obj.sex读取，如果是需要在js部分使用，读取需要用（你要修改的对象名字）.value .(你要修改的对象中数据名字)见下方hello中name的读取；

（2）用reactive

    reactive只能包裹复杂数据类型，不支持简单数据类型，会报错

   在定义复杂数据类型后，值直接用reactive包裹，如下方likeGirl 的定义，修改跟使用跟vue2中一样

注意   咱们写的是vue3,没有this

<template>
  <h1 @click="hello2">{{ age }}</h1>
  <h1 @click="hello2">{{ obj.sex }}</h1>
  <h1 @click="addGirl">女孩：{{ likeGirl }}</h1>
  <!-- <h1 @click="hello2">{{ age }}</h1> -->
</template>
 
<script>
  import {ref,reactive} from 'vue'
export default {
  name: "App",
  setup() {
    let name = ref("小蜜瓜");
    let age = ref(12);
    let obj = reactive({
      name:'南瓜',
      sex:'女'
    })
    let likeGirl = reactive(['sn','倪妮','刘浩存'])
    function hello2() {
     age.value = 13
     console.log(obj)
     obj.sex = '不详'
     likeGirl[0]='孙'
    }
 function addGirl(){
likeGirl.push('XX')
 }
    let hello = () => {
      alert(`我是${name.value}`);
    };
 
    return {
      addGirl,
      likeGirl,
      obj,
      age,
      name,
      hello,
      hello2,
    };
  },
};
</script>
 
<style>
</style>

2.响应式

综上所述  你一定觉得vue3好麻烦     所以直接像下面这样用，没错直接用reactive 包裹一个大的对象，里面写好你要用的数据，立马实现响应式

<template>
  <h1>{{ info.age }}</h1>
  姓：<input v-model="info.xing" /> 名：<input v-model="info.ming" /><br>
  全名 : <span>{{info.oneName}}</span>
  全名 : <input v-model="info.oneName" />
  喜欢女孩:<p>{{info.likeGirl}}<p/>
</template>
 
<script>
import { reactive } from "vue";
export default {
  name: "Demo",
 
  setup() {
    let info = reactive({
      name: "小蜜瓜",
      xing: "王",
      ming: "延欣",
      likeGirl: ['sn',"宋佳", "刘浩存"],
      age: 12,
      obj: {
        name: "南瓜",
        sex: "女",
      },
    });
 
    return {
      info,
    };
  },
};
</script>
 
<style>
</style>