vue3 + ts - 电脑学习网

发布时间：2023-05-27 文章分类：WEB开发, 电脑百科投稿人：赵颖字号：默认 | 大 | 超大打印

在 vue3.2 中，我们只需在script标签中添加setup。就可以做到，组件只需引入不用注册，属性和方法也不用 return 才能于 template 中使用，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

一、模板语法

1.使用 JavaScript 表达式

我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

2.调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

3.ref 获取元素

<template>
  <div id="haha" ref="haha"></div>
</template>

得给 ref 指定类型 HTMLElement

setup() {
  let haha = ref<HTMLElement|null>(null)
  console.log(haha)
  return {
    haha,
  }
},

haha.style.fontSize = '20px'

4.reactive

在模板使用直接 {{obj.name}} 即可

修改直接修改 obj[name] = ‘xxx’

ref 和 reactive的区别：

ref: 用来给基本数据类型绑定响应式数据，访问时需要通过 .value 的形式， tamplate 会自动解析,不需要 .value

reactive: 用来给复杂数据类型绑定响应式数据，直接访问即可

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
    name: string;
    age: number;
    gender: string;
};
const title = ref<string>("彼时彼刻，恰如此时此刻");
const userInfo = reactive<Person>({
  name: '树哥',
  age: 18
})
</script>

5.toRefs

setup() {
  const user = reactive({
    name: '小浪',
    age: 21,
  })
  let userObj = toRefs(user)
  return {
    ...userObj,
  }
}

6.ref 和 reactive的区别？

在功能方面，ref 和 reactive，都是可以实现响应式数据！

在语法层面，两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据；reactive定义的数据需要[data].[prpoerty]的方式更改数据。

const actTitle: Ref<string> = ref('活动名称');
const actData = reactive({
    list: [],
    total: 0,
    curentPage: 1,
    pageSize: 10
});
actTitle.value = '活动名称2';
actData.total = 100;

但是在应用的层面，还是有差异的，通常来说：单个的普通类型的数据，我们使用ref来定义响应式。表单场景中，描述一个表单的key:value这种对象的场景，使用reactive；在一些场景下，某一个模块的一组数据，通常也使用reactive的方式，定义数据。

那么，对象是不是非要使用reactive来定义呢？其实不是的，都可以，根据自己的业务场景，具体问题具体分析！ref他强调的是一个数据的value的更改，reactive强调的是定义的对象的某一个属性的更改。

7. 周期函数 onMounted

import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
    name: 'Gift',
    setup() {
        const counter = ref(0);
        onMounted(() => {
            // 处理业务，一般进行数据请求
        })
        return {
            counter
        }
    }
})

8.store使用

import { useStore } from "vuex";

const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。

import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
    name: 'Gift',
    setup() {
        const counter = ref(0);
        const store = useStore();
        const storeData = computed(() => store); // 配合computed，获取store的值。
        return {
            counter,
            storeData
        }
    }
})

9.router的使用

import { useRouter } from "vue-router";

const router = useRouter();
        const onClick = () => {
            router.push({ name: "AddGift" });
        }

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
    name: 'Gift',
    setup() {
        const counter = ref(0);
        const router = useRouter();
        const onClick = () => {
            router.push({ name: "AddGift" });
        }
        return {
            counter,
            onClick
        }
    }
})

10.关注点分离

关注点分离，应该分两层意思：第一层意思就是，Vue3的setup，本身就把相关的数据，处理逻辑放到一起，这就是一种关注点的聚合，更方便我们看业务代码。

第二层意思，就是当setup变的更大的时候，我们可以在setup内部，提取相关的一块业务，做到第二层的关注点分离。

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
    name: 'Gift',
    setup() {
        const counter = ref(0);
        const router = useRouter();
        const onClick = () => {
            router.push({ name: "AddGift" });
        }
        // 在该示例中，我们把获取商家列表的相关业务分离出去。也就是下面的merchant.ts
        const {merchantList} = useMerchantList();
        return {
            counter,
            onClick,
            merchantList
        }
    }
})

merchant.ts

import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
  const merchantList = ref([]);
  const fetchMerchantList = async () => {
    let res = await getMerchantlist({});
    merchantList.value = res.data.child;
  };
  onMounted(fetchMerchantList);
  return {
    merchantList
  };
}

11.interface

使用TS进行业务开发，一个核心的思维是，先关注数据结构，再根据数据结构进行页面开发。以前的前端开发模式是，先写页面，后关注数据。

比如要写一个礼品列表的页面，我们可能要定义这么一些interface。总而言之，我们需要关注的是：页面数据的interface、接口返回的数据类型、接口的入参类型等等。

// 礼品创建、编辑、列表中的每一项，都会是这个数据类型。
interface IGiftItem {
  id: string | number;
  name: string;
  desc: string;
  [key: string]: any;
}
// 全局相应的类型定义
// 而且一般来说，我们不确认，接口返回的类型到底是什么（可能是null、可能是对象、也可能是数组），所以使用范型来定义interface
interface IRes<T> {
    code: number;
    msg: string;
    data: T
}
// 接口返回数据类型定义
interface IGiftInfo {
    list: Array<IGiftItem>;
    pageNum: number;
    pageSize: number;
    total: number;
}

在一个常见的接口请求中，我们一般使用TS这么定义一个数据请求，数据请求的req类型，数据请求的res类型。

export const getGiftlist = (
  params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
  return Http.get("/apis/gift/list", params);
};

12.支持多个v-model

//父组件
<template>
  <child v-model="name" v-model:email="email" />
  <p>姓名：{{ name }}</p>
  <p>邮箱：{{ email }}</p>
</template>
<script lang="ts" setup>
import child from './child.vue'
import { ref } from 'vue'
const name = ref<string>('张三')
const email = ref<string>('666@qq.com')
</script>

// 子组件
<template>
  <button @click="updateName">更新name</button>
  <button @click="updateEmail">更新email</button>
</template>
<script lang="ts" setup>
// 定义emit
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'update:email', value: string): void
}>()
const updateName = () => {
  emits('update:modelValue', '李四')
}
const updateEmail = () => {
  emits('update:email', '123456@qq.com')
}
</script>

如果v-model没有使用参数，则其默认值为modelValue，如上面的第一个v-model，注意此时不再是像Vue2那样使用$emit('input')了，而是统一使用update:xxx的方式。

13.watch

watch(data,()=>{},{})

参数一，监听的数据

参数二，数据改变时触发的回调函数（newVal,oldVal）

参数三，options配置项，为一个对象

1、监听ref定义的一个响应式数据

<script setup lang="ts">
import { ref, watch } from "vue";
const str = ref('彼时彼刻')
//3s后改变str的值
setTimeout(() => { str.value = '恰如此时此刻' }, 3000)
watch(str, (newV, oldV) => {
  console.log(newV, oldV) //恰如此时此刻 彼时彼刻
})
</script>

2、监听多个ref

这时候写法变为数组的形式

<script setup lang="ts">
import { ref, watch } from "vue";
let name = ref('树哥')
let age = ref(18)
//3s后改变值
setTimeout(() => {
  name.value = '我叫树哥'
  age.value = 19
}, 3000)
watch([name, age], (newV, oldV) => {
  console.log(newV, oldV) // ['我叫树哥', 19]  ['树哥', 18]
})
</script>

3、监听Reactive定义的响应式对象

<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
  name: '树哥',
  age: 18
})
//3s后改变值
setTimeout(() => {
  info.age = 19
}, 3000)
watch(info, (newV, oldV) => {
  console.log(newV, oldV) 
})
</script>

4、监听reactive 定义响应式对象的单一属性

<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
  name: '树哥',
  age: 18
})
//3s后改变值
setTimeout(() => {
  info.age = 19
}, 3000)
watch(()=>info.age, (newV, oldV) => {
  console.log(newV, oldV) // 19 18
}
</script>

停止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

但是我们采用异步的方式创建了一个监听器，这个时候监听器没有与当前组件绑定，所以即使组件销毁了，监听器依然存在。

这个时候我们可以显式调用停止监听

<script setup lang="ts">
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)
const stop = watchEffect(() => {
  /* ... */
})
// 显式调用
stop()
</script>

(以下一样)

不同数据类型的监听

基础数据类型的监听：

const name = ref<string>('张三')

watch(name, (newValue, oldValue) => {
console.log('watch===', newValue, oldValue)
})

复杂数据类型的监听：

interface UserInfo {
  name: string
  age: number
}

const userInfo = reactive<UserInfo>({
  name: '张三',
  age: 10
})
// 监听整个对象
watch(userInfo, (newValue, oldValue) => {
  console.log('watch userInfo', newValue, oldValue)
})

// 监听某个属性
watch(() => userInfo.name,  (newValue, oldValue) => {
  console.log('watch name', newValue, oldValue)
})

支持监听多个源

const name = ref<string>('张三')
const userInfo = reactive({
age: 18
})

// 同时监听name和userInfo的age属性
watch([name, () => userInfo.age], ([newName, newAge], [oldName, oldAge]) => {
//
})

14.watch和watchEffect区别：

1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）

2、watch需要传递监听的对象，watchEffect不需要

3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下

4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。

15.computed

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
    <h1>{{add}}</h1>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const add = computed(() => count.value +1)
</script>

标签 ts, Vue, vue3