vue3 + ts ＜script setup＞语法糖

这里是引用

1.data
2.computed
3.父传子
4.子传父
5.原型链绑定和组件使用
6.父子组件 v-model
7.nextTick
8.插槽
9.路由useRoute和useRouter
10.路由守卫
11.生命周期
12.父组件调子组件的方法 ref
13.store

1.data

<template>
  <h1>{
    
    {
    
     name }}</h1>
  <h1>{
    
    {
    
     state.age }}</h1>
  <h1>{
    
    {
    
     sex }}</h1>
</template>

<script setup lang="ts">
import {
    
     reactive, ref, toRefs } from 'vue'
  // ref声明响应式数据，用于声明基本数据类型
  //const name = ref('东东吖')
    const name =ref<string>("")
  // 修改
  name.value = '小鲁班'

  // reactive声明响应式数据，用于声明引用数据类型
  const state = reactive({
    
    
    age: 24,
    sex: '男'
  })
  // 修改
  state.age = 24
  
  // 使用toRefs解构  template可直接使用{
    
    {name}}、{
    
    {sex}}
  const {
    
    age, sex} = toRefs(state)
  
</script>

2.computed

<template>
  <h1>{
    
    {
    
     count }}</h1>
  <h1>{
    
    {
    
    doubleCount}}</h1>
</template>

<script setup lang="ts">
import {
    
     ref,computed } from 'vue'
 // ref声明响应式数据，用于声明基本数据类型
  const count = ref(1)
  //computed获取双倍count' 
  const doubleCount =computed(()=>{
    
    
    return count.value*2
  })
</script>

3.父传子

父组件

<script setup lang="ts">
// 引入子组件(组件自动注册)
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="东东吖" />
</template>

<style>

</style>

子组件

<template>
{
    
    {
    
    props.msg}}
<!-- 可省略props 
  <h1>{
    
    {
    
     msg }}</h1>
</template>

<script setup lang="ts">
// import { defineProps } from 'vue'
// defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineProps: true】

// 声明props
const props = defineProps({
    
    
  msg: {
    
    
    type: String,
    default: "",
  },
});
</script>

4.子传父

//父组件：
<template>
  <HelloWorld :msg='state.msg' @changeMsg="changeMsg" />
</template>

<script setup lang="ts">
import {
    
     reactive } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";

const state = reactive({
    
    
  msg: "我是父组件原本的值",
});

const changeMsg = (val) => {
    
    
  state.msg = val;
};
</script>

子组件

//子组件：
<template>
  <h1>{
    
    {
    
     msg }}</h1>
<!-- 调用子传父事件 
  <button @click="changeMsg">点我</button>
</template>

<script setup lang="ts">
import {
    
     defineEmits } from "vue";
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

// 声明props
const props = defineProps({
    
    
  msg: {
    
    
    type: String,
    default: "",
  },
});

// 声明emit
const emit = defineEmits(["changeMsg"]);

// 声明子传父事件
const changeMsg = () => {
    
    
  emit("changeMsg", "我是子组件传过来的值");
};
</script>

5.原型链绑定和组件使用

main.ts

//main.ts

// 创建vue实例
const app=createApp(App)
// 获取原型
const prototype = app.config.globalProperties
// 绑定参数
prototype.name = '我是挂载在全局上的属性'
//第二种方式：
let helper = new TzPdmHelper(webSite);
app.config.globalProperties.$helper = helper;

//组件内获取使用
//引入
import {
    
     getCurrentInstance } from "vue";
// 获取原型
const {
    
     proxy } = getCurrentInstance();
// 输出
console.log(proxy.name);
console.log(proxy.$helper);

6.父子组件 v-model

父组件

//父组件：
<template>
<div>父组件：</div>
<div>{
    
    {
    
    state.msg}}</div>
<input type="text" v-model="state.msg">

  <HelloWorld
   v-model:msg='state.msg'
   v-model:age="state.age"
   />
</template>

<script setup lang="ts">
import {
    
     reactive } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const state = reactive({
    
    
  msg: "我是父组件原本的值",
  age:24
});

</script>

子组件

//子组件：
<template>
<div>子组件：</div>
<input type="text" v-model="msg">
<!-- 可省略props 
  <h1>{
    
    {
    
     msg }}</h1>
  <h1>{
    
    {
    
    age}}</h1>
</template>

<script setup lang="ts">
import {
    
     defineEmits } from "vue";
// 声明emit
const emit = defineEmits(["updata:msg", "updata:age"]);
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

// 声明props
const props = defineProps({
    
    
  msg: {
    
    
    type: String,
    default: "",
  },
  age: {
    
    
    type: Number,
    default: 0,
  },
});

</script>

7.nextTick

<template>
  <HelloWorld
   v-model:msg='state.msg'
   />
</template>

<script setup lang="ts">
import {
    
     reactive ,nextTick } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const state = reactive({
    
    
  msg: "我是父组件原本的值",
});
 // 调用nextTick
nextTick(()=>{
    
      
 console.log("nextTick执行了...");
 state.msg="我是nextTick执行后的值"
})
</script>

8.插槽

父组件

//父组件：
<template>
<HelloWorld>
   <!-- 匿名插槽 
    <span>我是默认插槽</span>
    <!-- / 具名插槽 
    <template #title>
      <h1>我是具名插槽1</h1>
      <h1>我是具名插槽2</h1>
      <h1>我是具名插槽3</h1>
    </template>
    <!-- 作用域插槽 
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{
    
    {
    
     scope.name }}，年龄{
    
    {
    
     scope.age }}</footer>
    </template>
  </HelloWorld>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

</script>

子组件

//子组件：
<template>
<!-- 匿名插槽 
  <slot/>
  <!-- 具名插槽 
  <slot name='title'/>
   <!-- 作用域插槽 
  <slot name="footer" :scope="state" />
</template>

<script setup lang="ts">
  import {
    
     useSlots, reactive } from 'vue'
  const state = reactive({
    
    
    name: '东东吖',
    age: '25岁'
  })
  script内如何获取插槽信息
  const slots = useSlots()
  // 匿名插槽使用情况
  const defaultSlot = reactive(slots.default && slots.default().length)
  console.log("defaultSlot",defaultSlot) // 1
  // 具名插槽使用情况
  const titleSlot = reactive(slots.title && slots.title().length)
  console.log("titleSlot",titleSlot) // 3
</script>

9.路由useRoute和useRouter

①新建router/index.ts

//新建router/index.ts
import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
  {
    
     
    path: '/',
    redirect: '/home'
  },
  {
    
     
    path: '/home',
    name: 'home',
    component: () => import('../pages/home/Index.vue'),
    meta: {
    
    
      showFooter: true,
      requireAuth: false,
    }
  },
  {
    
     
    path: '/about',
    name: 'about',
    component: () => import( '../pages/about/Index.vue'),
    meta: {
    
    
      showFooter: true,
      requireAuth: false,
    }
  },


];

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes,
});

export default router;

②在main.ts将路由router注册

//在main.ts将路由router注册
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts'


const app=createApp(App)
app.use(router).mount('#app')

③在页面打印结果

//在页面打印结果
import {
    
     useRouter, useRoute } from "vue-router";

// 必须先声明调用
const router = useRouter();
const route = useRoute();

// 路由信息
console.log("router", router);
console.log("route",route);

10.路由守卫

// 路由守卫
router.beforeEach((to, from, next) => {
    
    
 console.log("to",to);
 console.log("from",from);
 next()
})

11.生命周期

选项式 API 的生命周期选项和组合式 API 之间的映射
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activated -> onActivated
deactivated -> onDeactivated

12.父组件调子组件的方法 ref

父组件

<template>
  <HelloWorld
  ref='sonRef'
   />
</template>
<script setup lang="ts">
import {
    
     onMounted } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const zTreeRef = ref();

onMounted(() => {
    
    
sonRef.value.init()
});
</script>

子组件

<template>
<div>子组件</div>
</template>
<script setup lang="ts">
const init=()=>{
    
    
console.log('初始化')
}
//导出方法
defineExpose({
    
    
 init
});
</script>

13.store

vuex:【vue进阶之旅】vuex五大核心概念
① 基础使用流程

//下载pinia
npm install pinia -S

main.ts

//main.ts

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts'

// 引入pinia
import {
    
     createPinia } from 'pinia'

// 创建vue实例
const app=createApp(App)

// 创建 Pinia 实例
const pinia = createPinia()

// 注册挂载到vue实列
app.use(router).use(pinia).mount('#app')

store/index.ts

// store/index.ts

import {
    
     defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    
    
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
    state:()=>{
    
    
        return {
    
    
            info:"hello,东东吖，我是Pinia"
        }
    },
    getters:{
    
    },
    actions:{
    
    }
})

组件内使用

//组件内使用

<template>
    <div>
   <h1>{
    
    {
    
     mainStore.info}}</h1>
    </div>
</template>

<script setup lang="ts">
import {
    
     useMainStore } from "../../store/index.ts";
const mainStore = useMainStore();


</script>

<style scoped>

</style>

② state 中数据的解构访问
store/index.ts

// store/index.ts
import {
    
     defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    
    
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
    state:()=>{
    
    
        return {
    
    
            info:"hello,东东吖，我是Pinia",
            count:10
        }
    },
    getters:{
    
    },
    actions:{
    
    }
})

组件内使用

//组件内使用

<template>
  <h1>{
    
    {
    
     mainStore.count }}</h1>
  <h1>{
    
    {
    
     mainStore.info }}</h1>
  <hr />
  <h1>{
    
    {
    
     count }}</h1>
  <h1>{
    
    {
    
     info }}</h1>
  <p>
    <button @click="alertData">修改数据count</button>
  </p>
</template>

<script lang="ts" setup>
import {
    
     toRefs } from 'vue'
import {
    
     storeToRefs } from 'pinia'
import {
    
     useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const {
    
     count, info } = storeToRefs(mainStore);
const alertData = () => {
    
    
  mainStore.count  = 10
}
</script>

<style>
</style>

③ state 中数据的修改方式（actions和组件中）

// 一般的修改

<template>
  <h1>{
    
    {
    
     mainStore.count }}</h1>
  <h1>{
    
    {
    
     mainStore.info }}</h1>
  <hr />
  <h1>{
    
    {
    
     count }}</h1>
  <h1>{
    
    {
    
     info }}</h1>
  <p>
    <button @click="alertData">修改数据count</button>
  </p>
</template>

<script lang="ts" setup>
import {
    
     toRefs } from 'vue'
import {
    
     storeToRefs } from 'pinia'
import {
    
     useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const {
    
     count, info } = storeToRefs(mainStore);


const alertData = () => {
    
    
  // 方式一：最简单的方法，如下
  // 解构后更改方式
//   count.value  = 10
  // 结构前更改方式
//   mainStore.count  = 10
  // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化
//   mainStore.$patch({
    
    
//     count: mainStore.count   1,
//     info: "hello"
//   })
  // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state
  mainStore.$patch(state => {
    
    
    state.count  = 10
    state.info = "pinia批量更新" state.count
  })
}
</script>

<style>
</style>

//通过actions修改
// store/index.ts

import {
    
     defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    
    
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
    state:()=>{
    
    
        return {
    
    
            info:"hello,东东吖，我是Pinia",
            count:10
        }
    },
    getters:{
    
    },
    
// store/index.ts
// 类似于vue2组件的methods，用于封装业务逻辑，修改state
// // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
actions:{
    
    
    changeState (){
    
    
        this.count  = 10
        this.info = "actions修改数据"
    },
    changeStates (num:number){
    
    
        this.count  = num   2
        this.info = "actions修改数据"
    }
}

})

//组件内使用

<template>
  <h1>{
    
    {
    
     mainStore.count }}</h1>
  <h1>{
    
    {
    
     mainStore.info }}</h1>
  <hr />
  <h1>{
    
    {
    
     count }}</h1>
  <h1>{
    
    {
    
     info }}</h1>
  <p>
    <button @click="alertData">修改数据count</button>
  </p>
</template>

<script lang="ts" setup>
import {
    
     toRefs } from 'vue'
import {
    
     storeToRefs } from 'pinia'
import {
    
     useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const {
    
     count, info } = storeToRefs(mainStore);

const alertData = () => {
    
    
  // 方式四：通过 actions 来修改数据
  mainStore.changeState()
  mainStore.changeStates(10)
}

</script>

<style>
</style>

③ getters 的使用
store/index.ts

// store/index.ts
import {
    
     defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    
    
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
    state:()=>{
    
    
        return {
    
    
            info:"hello,东东吖，我是Pinia",
            count:10
        }
    },

    // 类似于组件的computed，用来封装计算属性，具有缓存的功能
    getters:{
    
    
        // 函数接收一个可选参数：state状态对象
       count10(state){
    
    
           return state.count  = 10
       },
       count20(state){
    
    
           return this.count  = 20
       },
       // 若使用this.count，则必须指明返回数据的类型
       count11():number{
    
    
           return this.count  = 11
       }
   },
    
// store/index.ts
// 类似于vue2组件的methods，用于封装业务逻辑，修改state
// // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
actions:{
    
    
    changeState (){
    
    
        this.count  = 10
        this.info = "actions修改数据"
    },
    changeStates (num:number){
    
    
        this.count  = num   2
        this.info = "actions修改数据"
    }
}

})

组件内使用

//组件内使用

<template>
  <h1>{
    
    {
    
     mainStore.count }}</h1>
  <h1>{
    
    {
    
     mainStore.info }}</h1>
  <hr />
  <h1>{
    
    {
    
     count }}</h1>
  <h1>{
    
    {
    
     info }}</h1>
  
 <h1>{
    
    {
    
     mainStore.count10 }}</h1>
 
  <p>
    <button @click="alertData">修改数据count</button>
  </p>
</template>

<script lang="ts" setup>
import {
    
     toRefs } from 'vue'
import {
    
     storeToRefs } from 'pinia'
import {
    
     useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const {
    
     count, info } = storeToRefs(mainStore);

const alertData = () => {
    
    
  // 方式四：通过 actions 来修改数据
  mainStore.changeState()
  mainStore.changeStates(10)
}

</script>

<style>
</style>