vue3的一些注意事项

 

一、Vue3 里 script 的三种写法

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，

1、最基本的 Vue2 写法

 html复制代码<template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       count: 1,
     };
   },
   methods: {
     onClick() {
       this.count += 1;
     },
   },
 }
 </script>

2、setup() 属性

 xml复制代码<template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 import { ref } from 'vue';
 export default {
 ​
   // 注意这部分
   setup() {
     let count = ref(1);
     const onClick = () => {
       count.value += 1;
     };
     return {
       count,
       onClick,
     };
   },
   
 }
 </script>

3、