npm install -g @vue/cli
yarn global add @vue/cli

vue create projectName

vue add typescript

<template>
    <div>
        <h1>{{title}}</h1>
    </div>
</template>

<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({
    setup () {
        // 定義響應(yīng)式變量
        const title = ref('前端自學(xué)社區(qū)')
        
          // 訪問該變量
        console.log(title.value)
        // 返回變量
        return {title}
    }
})
</script>

setup () {
        // 定義響應(yīng)式變量
        const title = ref('前端自學(xué)社區(qū)')
        console.log(title)
        // 返回變量
        function getTitle(){
            console.log(title.value)
        }
        // 頁面在加載
        onMounted(getTitle)
        return {title}
    },
    mounted() {
        console.log('測試 mounted 執(zhí)行順序')
    },

import {wathc} from 'vue'

// 定義響應(yīng)式變量
const num = ref(0)
// 更新響應(yīng)式變量
function  changeNum(){
            num.value++
}

// wathc 監(jiān)聽響應(yīng)式變量
watch(
 num,(newValue, oldValue) => {
 console.log(`newValue為：${newValue},--------oldValue為：${oldValue}`)
   }
 )

import {ref,computed} from 'vue';

const num = ref(0)

//更新num
function  changeNum(){
   num.value++
 }
//監(jiān)聽num變化
 const nums = computed(() =>{
  return num.value * 3
 })

props:{
        obj:{
            type:Object
        }
    },
     setup (props,{attrs,slots,emit}) {
            console.log(attrs)
            console.log(slots)
            console.log(emit)
             console.log(props.obj)
     }

import { provide, defineComponent, ref, reactive } from "vue";

<template>
  
  <Son/>
  
</template>


<script>
    import { provide, defineComponent, ref, reactive } from "vue";
    export default defineComponent({
    setup() {
            const father = ref("我父組件");
    const info = reactive({
      id: 23,
      message: "前端自學(xué)社區(qū)",
    });
    function changeProvide(){
      info.message = '測試'
    }
    provide('father',father)
    provide('info',info)
    return {changeProvide};
    }
    
})
</script>

<template>
    <div>
        <h1>{{info.message}}</h1>
        <h1>{{fatherData}}</h1>
    </div>
</template>

<script>
import {provide, defineComponent,ref,reactive, inject} from 'vue'
export default defineComponent({
    setup () {
        const fatherData = inject('father')
        const info = inject('info')
        
        return {fatherData,info}
    }
})
</script>

export default  interface queryType{
    page: Number,
    size: Number,
    name: String,
    age:  Number
}

import queryType from '../interface/Home'


    data() {
        return {
            query:{
                page:0,
                size:10,
                name:'測試',
                age: 2
            } as queryType
        }
    },

import { defineComponent } from 'vue'

export default defineComponent({
    setup(){
        return{ }
    }
})

export default  interface Product {
    name:String,
    price:Number,
    address:String
}

 

import  Product from '@/interface/Product' 
import {reactive} from 'vue'
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) as Product
       
return {fatherData,info,product}