Vue3入门基础之setup语法糖以及响应式的写法区分

第一种 ：不采用语法糖以及不考虑响应式数据 

 
 
<script>
export default {
  name: "App",
  //不采用语法糖，且不考虑响应式数据
  setup(){
    // 数据
    let name = "张三"
    let age = 20
 
    // 方法
    function say(){
      alert(`你好${name}，年龄${age}`)
    }
    return {
      name,age,say
    }
  }
};
script>
 
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
style>

 第二种 ： 采用语法糖写法以及响应式数据(基本数据类型)

 
<script setup>  //setup语法糖
import {ref} from 'vue'
let a = ref(1)
const add = () =>{
	a.value++
	console.log(a);
}
// This starter template is using Vue 3