Vue3之setup

vue3是在vue2的基础上做了一些更新，所以学vue3只是在vue2的基础上对某些东西的知识更新。在vue3的里面有些并不推荐使用的vue2的方法属性依然能使用，这个需要分清楚。

vue3里面一个最大的特点是没有了vue2的data，methods等配置项属性，随之更换的是一个叫做setup的函数。

组件中所用到的所有东西全部放在setup这个函数里面。

不管是属性，还是方法，包括生命周期函数等全写这个函数里。

这个setup函数里面的东西最终要在模板使用，所以setup函数里面的东西最终都必须return返回出来，然后再模板里面就和之前vue2一样了，直接{{}}渲染就行了。

下面是基本的setup函数定义数据的基本使用：

<template>
  <h3>{{ nm }}</h3>
  <button @click="clickFn">点击</button>
</template>
<script>
export default {
  setup() {
  //所有的东西全部写在 setup 这个函数里面  没有data对象  没有methods
    let nm = "张三";
    let clickFn = ()=>{
        nm = "李四"
      }
    //所有需要用的数据都必须最终在 setup函数里面return返回
    return {
       nm,clickFn
      };
    },
};
</script>

到这里，页面可以看到渲染的数据了，但是发现这个数据并没有响应式，例如点击按钮让nm改变，以上的写法并没有效果。

所以，需要引入一个vue3提供的函数：ref 函数

我们需要把数据包裹在ref函数里面，这样的话，这个数据就有响应式了。

为什么使用ref函数就有响应式了？

其实ref函数还是使用的get和set实现的数据响应式。只不过vue3是把这个东西写在了原型对象上。

要注意的是，加上ref函数的数据，就会转化为一个对象，而真正的数据包含在value里面，所以我们在js里面使用的时候，要加上.value才能拿到这个数据，在模板里面不用加，直接写就行。

打印下ref函数声明的nm：

ref 函数

<template>
  <h3>{{ nm }}</h3>
  <button @click="clickFn">点击</button>
</template>
<script>
import {ref} from 'vue'
export default {
  setup() {
  //所有的东西全部写在 setup 这个函数里面  没有data对象  没有methods
  let nm = ref("张三");
    function clickFn() {
      nm.value = "李四"; 
    }
//所有需要用的数据都必须最终在 setup函数里面return返回
  return {
     nm,clickFn
  };
  },
};
</script>

到这里，数据就有响应式了。但是这是单个简单的数据，如果数据有多层数据的话，例如对象数据，那么这个.value的写法就不那么友好了。多层的数据每次写都要.value点下去才能拿到，所以会用到一个叫做reactive函数来解决。

reactive函数

<template>
  <h3>姓名：{{ obj.name }}</h3>
  <h3>年龄：{{ obj.age }}</h3>
  <h3>爱好：{{ obj.hobby }}</h3>
  <button @click="clickFn">点击</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  setup() {
    let obj = reactive({
      name:'张三',
      age:21,
      hobby:['篮球','足球']
    })

    function clickFn() {
     obj.name = "李四"; 
     obj.age = 30; 
     obj.hobby[0] = "乒乓球"
    }

    return {
     obj,clickFn
    };
  },
};
</script>

也就是说，如果只是一个简单的变量，那么就是用ref；js中取数据要.value;

如果是一个对象或者数组，就用reactive；js中取数据不需要.value;