创建项目
yarn 安装的 vue3.0+vite+ts
yarn create @vitejs/app my-vue-ts-vite --template vue-ts
示例
这个时候你在App.vue发现这个 script setup语法糖
<template>
<h1><a href="">{{ count }}</a></h1>
<h1>{{state.data.a}}</h1>
<button @click="count++">count ++</button>
</template>
<script setup>
import {ref,defineProps,reactive,watch } from 'vue';
import {helloLog} from '/@/hooks/hello'
/*
基本数据类型
引用数据类型(复杂类型) 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/
const count =ref(0);
const state = reactive({
data:{a:1}
})
defineProps({
msg: {
type: String,
required: true
}
})
watch(count,(e)=>{
console.log('count变化了:>> ', e);
})
function name(params) {
console.log('原始html用法 ',helloLog());
}
//
</script>
<style scoped lang="scss" >
h1{
a {
color: #42b983;
}
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
</style>
总结模板
组件
<template>
<div></div>
</template>
<script setup>
import {ref,defineProps,reactive,getCurrentInstance } from 'vue';
const internalInstance = getCurrentInstance();//获取当前实例
const route = internalInstance?.appContext.config.globalProperties.$route;
/*
基本数据类型
引用数据类型(复杂类型) 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/
const count =ref(0);
const state = reactive({
data:{a:1}
})
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<style scoped lang="scss" >
</style>
普通页面
<template>
<div>
<HelloWorld/>
</div>
</template>
<script setup>
import {ref,defineProps,reactive,getCurrentInstance } from 'vue';
const internalInstance = getCurrentInstance();//获取当前实例
const route = internalInstance?.appContext.config.globalProperties.$route;
import HelloWorld from '/@/components/HelloWorld.vue'
/*
基本数据类型
引用数据类型(复杂类型) 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/
const count =ref(0);
const state = reactive({
data:{a:1}
})
</script>
<style scoped lang="scss" >
</style>
个人评价
script setup语法糖提供了传统html函数使用方式的便利性+组件化开发的效率,组件导入即可使用无需扔到components,需要计算属性引入 watch即可