Vue3 + TypeScript 开发总结

目录

• Vue3 + TypeScript 学习

• 一， 环境配置

• 1.1 安装最新 Vue 脚手架
• 1.2 创建Vue3 项目

• 2. 1 Vue 2 局限性
• 2.2 Vue 3 如何解决Vue 2 局限

• 3.1 关于 Composition Api
• 3.2 什么时候使用Composition Api

• 4.2 ref 创建响应式变量
• 4.3 生命周期
• 4.4 watch
• 4.5 computed

• 5.1 接受两个参数

• 8.1 接口约束约束属性
• 8.2 组件使用 来 defineComponent 定义

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 () {
        // 定义响应式变量
        const title = ref('前端自学社区')
          // 访问该变量
        console.log(title.value)
        // 返回变量
        return {title}
    }
})
</script>

setup () {
        // 定义响应式变量
        const title = ref('前端自学社区')
        console.log(title)
        // 返回变量
        function getTitle(){
            console.log(title.value)
        }
        // 页面在加载
        onMounted(getTitle)
        return {title}
    },
    mounted() {
        console.log('测试 mounted 执行顺序')
    },

import {wathc} from 'vue'
// 定义响应式变量
const num = ref(0)
// 更新响应式变量
function  changeNum(){
            num.value++
}
// wathc 监听响应式变量
watch(
 num,(newValue, oldValue) => {
 console.log(`newValue为：${newValue},--------oldValue为：${oldValue}`)
   }
 )

import {ref,computed} from 'vue';
const num = ref(0)
//更新num
function  changeNum(){
   num.value++
 }
//监听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: "前端自学社区",
    });
    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}