setup语法糖-简单的写法

在Composition API中，在setup函数中声明的数据、函数等内容，都需要通过 return 对外暴露，才能被组件的视图模板（template）使用，这就造成了书写上的不方便。于是，Vue官方又给我们推出了一个新的setup语法糖。

使用setup语法糖，就可以不用写setup函数了。并且，数据和函数也不用返回，组件也不需要注册了。

1.setup语法糖的基本形式

<template>
</template>

<script setup>
//此处直接写setup函数中的内容
</script>

  <style>
  </style>

● 在script标签中使用setup属性即可。
● 运行时，script标签中的内容会被重新编译成 setup() 函数的形式。
● 而且，声明的数据、函数不需要通过 return 暴露，即可被 template所使用

2.响应数据的使用

    <template>
        <div id="container">
            {{num}}<br>
            {{obj.userid}}
            <button @click="add">+</button>
            <ul v-for="(item,index) in userList" :key="item.userid">
                <li>{{item.userid}}-{{item.username}}</li>
            </ul>
        </div>
    </template>

    <script setup>
        import {ref,reactive} from 'vue'
        let num=ref(10);//可以用ref包装基本类型
        let obj=reactive({userid:1,username:'wang.qj'})
        let userList=reactive([{userid:1,username:'张三'},{userid:2,username:'李四'}])
        let add=()=>{
            num.value++
            obj.userid=2;
            userList[0].username="张三sss"
        }
        
    </script>

    <style>
    </style>

ref 和 reactive 都可以做响应式数据，它们的区别如下：

● reactive：用于定义引用类型。只能修改数据，不能改变其引用。
● ref：用于定义基本类型和引用类型。可以修改数据，也可以改变其引用。
○ 在方法中修改数据时需要使用 value属性。因为，Ref的本质是通过Reactive创建的，Ref(10) 就相当于：Reactive({value:10});
○ 在视图模板调用可以省略value属性的书写。
（个人理解：可以用ref定义基本类型，用reactive定义引用类型）

3.其他语法的使用

计算属性、监听器、生命周期方法

             <div>
          {{ num }}
          {{ newNum }}
            <button @click="add">add</button>
             </div>

    <script setup>
    import { ref, computed, watch, onMounted } from 'vue';
    const num = ref(10);
    const newNum = computed(() => {
      return num.value*2;
    })
    const add = ()=>{
      num.value++;
    }
    watch(num,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    })
    //生命周期函数
    onMounted(() => {
      console.log("DOM挂载后!");
    });
    </script>

4.引入组件

引入的组件不必注册，可以直接使用。

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

    <script setup>
    // @ is an alias to /src
      import HelloWorld from '@/components/HelloWorld.vue'
    </script>

5.组件传值

defineProps用于父组件向子组件传值。
defineEmits用于子组件向父组件传值。