【vue3练习-01】setup()的李姐

首先它是一个函数，同时也是一个配置，所以它是跟以前的data，methods等配置是同一级，

然后他里面可以写数据、方法，也就是说2的data、methods都要写在setup里面，但是写法略有不同，具体参考下方代码

<template>
  <div class="hello">
    {{ name }}
    <button @click="fun">点击</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  // 同时可以在此处配置vue2的配置，而且vue2里面的配置可以直接拿到3里面的数据跟方法，但是3里面不能拿2里面的数据跟方法
  // 2.0版本跟3.0版本尽量不要混用
  setup() {
    //数据不再是写在data配置里面了而是直接let定义变量，至于为啥用let不用const，是因为这个变量会变的
    let name = "路飞"; 
    // 方法也不再是写在methods里面了而是直接写方法，但是不能再写简写形式了，需要写完整形式，function不能少
    function fun(){
      console.log('8347847')
    }
    //返回一个对象，对象里面包裹的是setup配置的数据、及方法，一定要返回才能在模板里面使用，不返回是使用不了的
    return {
      name,
      fun
    };
  },
};
</script>