Vue3+TypeScript基础

最新推荐文章于 2024-07-20 09:47:20 发布

ℝ.

最新推荐文章于 2024-07-20 09:47:20 发布

阅读量864

点赞数 1

文章标签： typescript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_61697263/article/details/131230405

版权

Vue3+Ts 入门

一、组合式API

1、计算属性API

单向响应

<template>
    姓：<input v-model="username.surname"> <br>
    名：<input v-model="username.name"> <br>
    单向响应：<input v-model="username.nick"> <br>
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { reactive } from 'vue';
const username = reactive({
    surname: "张",
    name: "三"
})
username.nick = computed(()=>{
   return username.surname + '*' + username.name
})
</script>

双向响应

<template>
    姓：<input v-model="username.surname"> <br>
    名：<input v-model="username.name"> <br>
    双向响应：<input v-model="username.nick"> <br>
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { reactive } from 'vue';
const username = reactive({
    surname: "张",
    name: "三"
})
username.nick = computed({
   get(){
    return username.surname + '*' + username.name
   },
   set(value){
    const arr = value.split('*')
    username.surname = arr[0]
    username.name = arr[1]
   }
})
</script>

2、监听属性API

监听整个对象

# 监听整个对象,由于是浅拷贝，他们新旧指向的是同一个对象
<template>
    <h2>年龄：{{ userInfo.age }}</h2>
    <button @click="userInfo.age++"> 年龄+1</button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

const userInfo = reactive({
    name: '张三',
    age: 20
})
watch(userInfo, (newVal, oldVal) => {
    console.log('新：');
    console.log(newVal);
    console.log('************************');
    console.log('旧：');
    console.log(oldVal);
})
</script>

监听对象中单个属性

# 监听对象中单个属性可以检测到新旧值的变化
<template>
    <h2>年龄：{{ userInfo.age }}</h2>
    <button @click="userInfo.age++"> 年龄+1</button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

const userInfo = reactive({
    name: '张三',
    age: 20
})
watch(()=>userInfo.age, (newVal, oldVal) => {
    console.log('新：');
    console.log(newVal);
    console.log('************************');
    console.log('旧：');
    console.log(oldVal);
})
</script>

监听多个对象

# 监听对象中多个属性
<template>
    <h2>姓名：{{ userInfo.name }}</h2>
    <button @click="userInfo.name+='是个傻逼'">改名</button>
    <br>
    <h2>年龄：{{ userInfo.age }}</h2>
    <button @click="userInfo.age++"> 年龄+1 </button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

const userInfo = reactive({
    name: '张三',
    age: 20
})
watch([()=>userInfo.name,()=>userInfo.age], (newVal, oldVal) => {
    console.log('新：');
    console.log(newVal);
    console.log('************************');
    console.log('旧：');
    console.log(oldVal);
})
</script>

监听对象中的对象（深度监听）

<template>
    <h2>年龄：{{ userInfo.hobby.like }}</h2>
    <button @click="userInfo.hobby.like += '很快乐'">点我</button>
    <br>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

const userInfo = reactive({
    name: '张三',
    age: 20,
    hobby: {
        like: '打球'
    }
})
watch(() => userInfo.hobby.like, (newVal, oldVal) => {
    console.log('新：');
    console.log(newVal);
    console.log('************************');
    console.log('旧：');
    console.log(oldVal);
}, { deep: true })
</script>

3、高级监听API （watchEffect）

基本使用(默认先执行一次)

# watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
<template>
    <h2>姓名：{{ userInfo.name }}</h2>
    <button @click="userInfo.name += '111'">修改</button>
    <br>
</template>

<script setup lang="ts">
import { reactive, watch, watchEffect } from 'vue';
const userInfo = reactive({
    name: '张三'
})
watchEffect(()=>{
    userInfo.name
    console.log('姓名变了');
})
</script>

监听预前处理oninvalidate参数

# oninvalidate 监听值修改前的回调
<template>
    <h2>姓名：{{ userInfo.name }}</h2>
    <button @click="userInfo.name += '111'">修改</button>
    <br>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue';
const userInfo = reactive({
    name: '张三'
})
watchEffect((oninvalidate)=>{
    oninvalidate(()=>{
        console.log("before");
    })
    userInfo.name
    console.log('姓名变了');
})
</script>

停止监听

# 停止后不再监听值的变化
<template>
    <h2>姓名：{{ userInfo.name }}</h2>
    <button @click="userInfo.name += '111'">修改</button>
    <button @click="stop">停止监听</button>
    <br>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue';
const userInfo = reactive({
    name: '张三'
})
const stop = watchEffect((oninvalidate)=>{
    oninvalidate(()=>{
        console.log("before");
    })
    userInfo.name
    console.log('姓名变了');
})
</script>

4、响应式对象解构API

toRef()

<template>
    <h2>姓名：{{ AA }}</h2>
    <button @click="userInfo.name += '加1'">修改</button>
</template>

<script setup lang="ts">
import { reactive, toRef } from 'vue';
const userInfo = reactive({
    name: '张三'
})
const AA = toRef(userInfo,'name')
</script>

toRefs()

<template>
    <h2>姓名：{{ name }}</h2>
    <button @click="name += '加1'">修改姓名</button>
    <br>
    <h2>年龄：{{ age }}</h2>
    <button @click="age++">修改年龄</button>
</template>

<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue';
const userInfo = reactive({
    name: '张三',
    age: 20
})
const {name,age} = toRefs(userInfo)
</script>

5、生命周期API

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue';

console.log('setup执行');

onBeforeMount(() => {
    console.log('*** 挂载前 ***');
})
onMounted(() => {
    console.log('*** 挂载后 ***');
})
onBeforeUpdate(() => {
    console.log('*** 更新前 ***');
})
onUpdated(() => {
    console.log('*** 更新后 ***');
})
onBeforeUnmount(() => {
    console.log('*** 卸载前 ***');
})
onUnmounted(() => {
    console.log('*** 卸载后 ***');
})
</script>

6、ref 获取 dom

<template>
    <div ref="box">我是box</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
let box = ref(null)  // 本质是reactive({value:null})
// dom挂载后的生命周期
onMounted(()=>{
    console.log(box.value);
})
// 这里会输出null,setup是最先执行，此时dom还没生成
console.log(box.value);
</script>

7、Hooks

官方hooks

useAttrs()

// 父组件
<template>
    <SonVue tit="父组件传值1" title="父组件传值2"/>
</template>

// 子组价
<script setup lang="ts">
import { useAttrs } from 'vue';
let attr = useAttrs()
console.log(attr);
</script>

自定义hooks

鼠标跟踪器示例

# convertImg.ts

import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

# 在组件中的使用

<template>
    <div>横轴：{{ x }}</div>
    <div>纵轴：{{ y }}</div>
</template>
<script setup lang="ts">
import { useMouse } from '../../hooks/convertImg'
const { x, y } = useMouse()
</script>

第三方hooks

安装依赖npm install @vueuse/core

简单使用

<template>
    <div ref="el" :style="style" style="position: fixed;background-color: pink;">
         请拖动我 {{ x }}, {{ y }}
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDraggable } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el, {
    initialValue: { x: 40, y: 40 }
})
</script>

8、插槽

8.1、匿名插槽

A组件

<template>
    <B>
        这是XXX数据
        这是YYY数据
    </B>
</template>

<script setup lang="ts">
import B from '@/views/A/B.vue'
</script>

B组件：

<template>
    <div>
        <header>
            <div>头部</div>
            <slot></slot>
        </header>
        <footer>
            <div>底部</div>
            <slot></slot>
        </footer>
    </div>
</template>

8.2、具名插槽

A组件

<template>
    <B>
        <!-- 标准写法 -->
        <template v-slot:xxx>这是xxx数据</template>
        <template v-slot:yyy>这是yyy数据</template>
         <!-- 简写 -->
        <template #xxx>这是yyy数据</template>
        <template #yyy>这是yyy数据</template>
    </B>
</template>

<script setup lang="ts">
import B from '@/views/A/B.vue'
</script>

B组件

<template>
    <div>
        <h1>
            子:A组件
        </h1>
        <header>
            <div>头部</div>
            <slot name="xxx"></slot>
        </header>
        <footer>
            <div>底部</div>
            <slot name="yyy"></slot>
        </footer>
    </div>
</template>

8.3、作用域插槽

A组件

<template>
    <B>
        <!-- 标准写法 -->
        <template v-slot="{ data }">{{ data.name }}==>{{ data.age }}</template>
        <!-- 简写 -->
        <template #default="{ data }">{{ data.name }}==>{{ data.age }}</template>
    </B>
</template>

<script setup lang="ts">
import B from '@/views/A/B.vue'
</script>

B组件

<template>
    <div>
        <section>
            <div v-for="item in list" :key="item.id">
            <slot :data="item"></slot>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const list = ref([
    {id:1,name:'张三',age:15},
    {id:2,name:'李四',age:18},
    {id:3,name:'王二麻子',age:20},
    {id:4,name:'刘五',age:28},
    {id:5,name:'小六子',age:22},
])
</script>

8.4、动态插槽 -【通过数据进行切换】

A组件

<template>
    <B>
        <template #[yyy]>这是yyy数据</template>
    </B>
</template>

<script setup lang="ts">
import B from '@/views/A/B.vue'
import { ref } from 'vue';
let yyy = ref('yyy')
</script>

B组件

 <header>
            <div>头部</div>
            <slot name="xxx"></slot>
            <div>底部</div>
            <slot name="yyy"></slot>
 </header>

9、Teleport（传送）

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

 <Teleport to=".main">这是传送1</Teleport>
 <Teleport to="#home">这是传送2</Teleport>
 <Teleport to="body">这是传送3</Teleport>

注意：必须dom存在才能传送

10、异步组件(提升性能)

Vue 提供了 defineAsyncComponent 方法来实现异步组件

<template>
  <A></A>
  <B></B>
  <div ref="target">
    <AsyncComp v-if="targetIsShow"></AsyncComp>
  </div>

</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';  // npm插件
import A from './A.vue';
import B from './B.vue';
const AsyncComp = defineAsyncComponent(() =>
  import('./C.vue')
)
const target = ref<any>(null);
const targetIsShow = ref(false);
 useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      targetIsShow.value = isIntersecting
    } 
  }
)
</script>

defineAsyncComponent 打包时做分包处理，异步组件是一个单独的js文件。

11、Mixin（混入）

含义：分发vue组件中可复用的功能。

注意：vue3中使用Hooks

// mixin.ts
import { ref } from "vue";
export default function() {
  let num = ref(1);
  let bel = ref(true)
  const btn = () => {
    num.value += 1
    bel.value = false
    setTimeout(() => {
      bel.value = true
    }, 3000);
  }
  return {
    num,
    bel,
    btn
  }
}

A组件使用

<template>
  <div style="width:300px;height: 200px;background-color: #f60;">
    <h1>A组件</h1>
    {{ num }}
    <button @click="btn">{{ bel }}</button>
  </div>
</template>
<script setup lang="ts">
import mixin from '../mixin/mixin';
let { num, bel, btn } = mixin();
</script>

B组件使用

<template>
   <div style="width:300px;height: 600px;background-color: blue;">
      B组件
         {{ num }}
          <button @click="btn">{{ bel }}</button>
    </div>
</template>

<script setup lang="ts">
import mixin from '../mixin/mixin';
let { num, bel, btn } = mixin();
</script>

12、Vue3生命周期

在组合API中，我们需要将生命周期钩子导入到项目中，才能使用，这有助于保持项目的轻量性。

import { onMounted } from 'vue'

除了 beforecate 和 created (它们被 setup 方法本身所取代)，我们可以在 setup 方法中访问的API生命周期钩子有9个选项

onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。

onMounted – 组件挂载时调用

onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

onActivated – 被 keep-alive 缓存的组件激活时调用。

onDeactivated – 被 keep-alive 缓存的组件停用时调用。

onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

二、组件间通信

1、props父传子

父组件

<template>
   <SonVue msg="父组件的值" />
</template>

子组件

<script setup lang="ts">
const props = defineProps(
    { msg: String }
)
console.log(props);
</script>

2、emit子传父

父组件

<template>
    <SonVue @getuser="getuser" />
</template>

<script setup lang="ts">
const getuser = (val:string) => {
    console.log(val)
}
</script>

子组件

<template>
    <button @click="buttonClick">传输</button>
</template>

<script setup lang="ts">
const emit = defineEmits(['getuser'])
const buttonClick = ()=>{
    emit('getuser','我是子组件传给父组件的值')
}
</script>

3、插槽通讯

匿名插槽

子组件

<template>
    <slot></slot>
</template>

父组件

<template>
    <SonVue>
        插槽传递
    </SonVue>
</template>

具名插槽

父组件

<template>
    <SonVue>
        <template #title>这是具名插槽</template>
    </SonVue>
</template>

子组件

<template>
    <slot name="title"></slot>
</template>

作用域插槽

含义

# 数据在子组件的自身，但根据数据生成的结构需要父组件决定

父组件

<template>
    <!-- 父组件将信息传递给子组件 -->
    <SonVue :person="person">
        <!-- 子组件接收父组件的插槽中传的值 -->
        <template #tab="scope">
            <tr v-for="(item, index) in scope.person" :key="index">
                <th>{{ item.name }}</th>
                <th>{{ item.age }}</th>
                <th>
                    <button>编辑</button>
                </th>
            </tr>
        </template>
    </SonVue>
</template>

<script setup lang="ts">
const person = [
    { name: '小明', age: 20 },
    { name: '小红', age: 18 }
]
</script>

子组件

<template>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <slot name="tab" :person="props.person"></slot>
    </table>
</template>
<script setup lang="ts">
const props = defineProps<{ person: { name: string, age: number } }>()
</script>

4、Provide / Inject

官网称为依赖注入，Provide 为提供，Inject为注入

Provide (提供)

父组件(祖先组件)

<template>
    <h1>我是父组件</h1>
    <SonVue></SonVue>
</template>

<script setup lang="ts">
import { provide, ref } from "vue";
let flag = ref<number>(10);
provide("flag", flag);
</script>

Inject (注入)

子组件(后代组件)

<template>
    <button>子组件</button>
    <div> {{ flag }} </div>
    <button @click="flag++">+1</button>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
const flag = inject('flag',ref(1))
</script>

注意：Provide / Inject是具有响应式的，而且是单向数据流。

三、路由（vue插件）

1、安装vue-router

npm install vue-router

2、创建router文件

// src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
const routes = [
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../views/index/index.vue')
  },
  {
    path: '/account',
    name: 'account',
    component: () => import('../views/account/index.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router

3、全局引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'

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

4、使用

app.vue设置路由出口

// App.vue
<template>
  <router-view></router-view>
</template>

index.vue 跳转到 account.vue

<template>
  <div>
    <h1>首页</h1>
    <!-- 路由跳转方式 1 -->
    <router-link to="/account">去个人中心</router-link>
    <!-- 路由跳转方式 2 -->
    <button @click="gotoAccount">去个人中心</button>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
// useRoute 类似于 vue2 的 this.$route
useRoute == this.$route
// useRouter 类似于 vue2 的 this.$router
useRouter == this.$router

const router = useRouter();
const gotoAccount = () => {
  console.log(router);
  router.push('/account')
}
</script>

四、Typescript的支持

1、模板中的TS - 类型推断

<template>
    {{ (x as number).toFixed(2) }}  // 正确
    {{ (<number>x).toFixed(2) }}  // 正确
    {{ x.toFixed(2) }}  // IDE提示：类型“string | number”上不存在属性“toFixed”
</template>

<script setup lang="ts">
let x:string | number = 1
</script>

2、全局接口的抽取

1.src下定义types文件夹命名xx.d.ts

2.建立全局接口global.d.ts
interface globalInterface{
    name:string
    age:string
}

3.组件中直接使用
<script setup lang="ts">
const props = defineProps<{person:globalInterface[]}>()
</script>

4.如果不是在src下则需要在tsconfig.json中配置全局目录
{
  {
 ...
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], //配置全局目录
  "references": [{ "path": "./tsconfig.node.json" }]
}

3、类型增强

1.使用环境：全局定义的数据，函数在vue组件中直接访问报错

2.index.html中定义数据
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
       const  global=1
    </script>
  </body>
</html>

3.定义类型增强
// common.d.ts
declare const global:string;

4.组件中直接读取
<script setup lang="ts">
console.log(global)
</script>

4、父传子props通讯 - TS

父组件

<template>
    <SonVue msg="父组件传过来的值"></SonVue>
</template>

子组件

<template>
    {{ props.msg }}
</template>

<script setup lang="ts">
interface msgInterface{
    msg:string
}
// withDefaults 帮助程序为默认值提供类型检查，并确保返回的 props 类型删除了已声明默认值的属性的可选标志。
const props = withDefaults(defineProps<msgInterface>(),{
    msg:'dasdas'
})
console.log(props.msg);
</script>

5、子传父emit通讯 - TS

父组件

<template>
    <SonVue @getuser="getuser"></SonVue>
</template>

<script setup lang="ts">
const getuser = (a:number)=>{
    console.log('我是父组件打印的值');
}
</script>

子组件

<template>
    <button @click="buttonClick">传输</button>
</template>

<script setup lang="ts">
const emit = defineEmits<{(e:'getuser',id:number):void}>()  // (e: 事件名, 键名：类型): void
const buttonClick = ()=>{
    emit('getuser',1)
}
</script>

6、依赖注入类型推断

父组件（祖先组件）

<template>
    <button>我是父组件</button>
    <SonVue></SonVue>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue';

let flag = ref<number>(99)
provide('flag',flag)
</script>

子组件（后代组件）

<template>
    <h2>我是子组件</h2>
    <div>{{flag}}</div>
    <button @click="(flag as number)++">+1</button>
</template>

<script setup lang="ts">
import { Ref, inject, ref } from 'vue';

const flag:Ref<number | string> = inject('flag',ref(1))
</script>

五、指令的重构

1、v-model指令

父组件

<template>
  {{ num }}
  <HelloWorld v-model="num" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
const num = ref(1)
</script>

子组件

<template>
  <input type="text" v-model="value">
</template>
<script lang="ts" setup>
import { computed } from "vue";
const props = defineProps<{modelValue:number}>();
const emit = defineEmits<{(e:'update:modelValue',id:number):void}>();
const value = computed({
  get(){
    return + props.modelValue
  },
  set(value){
    emit('update:modelValue',+value)
  }
})
</script>

v-model原理

<template>
  {{ num }}
  <HelloWorld :modelValue="num" @update:modelValue="num = $event"/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
const num = ref(1)
</script>

2、自定义指令

2.1、自定义指令简单使用

全局自定义指令

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)
app.directive('focus',{
    mounted(el){
        el.focus()
    }
})
app.mount('#app')

使用自定义指令

<template>
  <input type="text" v-model="value" v-focus />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
let value = ref('全局自定义指令')
</script>

局部自定义指令

<template>
<input type="text" v-focus />
</template>
<script setup lang="ts">
const vFocus  = {
    mounted: (el: any)=>{
        el.focus()
    }
}
</script>

2.2、自定义指令详解

自定义指令的生命周期

<template>
    <!-- 自定义指令，参数，修饰符 -->
    <div v-move:a.x="{ background: 'red' }"></div>
</template>
<script setup lang="ts">
import type { Directive, DirectiveBinding } from 'vue';
type Dir = { background: string };
const vMove: Directive = {
    // 元素初始化的时候
    created() { },
    // 指令绑定到元素后调用 只调用一次
    beforeMount() { },
    // 元素插入父级dom调用
    mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
        console.log(dir.value.background);
        el.style.background = dir.value.background
    },
    // 元素被更新之前调用
    beforeUpdate() { },
    // 元素被更新之后调用 改用updated
    updated() { },
    // 在元素被移除前调用
    beforeUnmount() { },
    // 指令被移除后调用 只调用一次
    unmounted() { }
}
</script>

生命周期的简写

<template>
    <!-- 自定义指令，参数，修饰符 -->
    <div v-move:a.x="{ background: 'red' }">自定义指令生命周期简写</div>
</template>
<script setup lang="ts">
import type { Directive, DirectiveBinding } from 'vue';
type Dir = { background: string };
const vMove: Directive = (el: HTMLElement, dir: DirectiveBinding<Dir>)=>{
    el.style.background = dir.value.background
}
</script>

自定义拖拽指令

<template>
    <!-- 自定义指令，参数，修饰符 -->
    <div v-move style="
      background-color: red;
      width: 200px;
      height: 200px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    ">
        <div style="background-color: black; width: 200px; color: white">
            自定义指令
        </div>
    </div>
</template>
<script setup lang="ts">
import type { Directive } from 'vue';
const vMove: Directive = (el: HTMLElement) => {
    const move = (e: MouseEvent) => {
        console.log(e);
        el.style.left = e.clientX + 'px'
        el.style.top = e.clientY + 'px'
    }
    // 鼠标按下
    el.addEventListener('mousedown', () => {
        // 鼠标按下拖拽
        document.addEventListener('mousemove', move);
        // 鼠标松开
        document.addEventListener('mouseup', () => {
            // 清除事件
            document.addEventListener('mousemove', move)
        });
    })
}
</script>

3、响应式原理

3.1、了解Proxy代理

Proxy代理的get方法

<script>
  let obj = {
    name: "小明",
    age: 26,
  };
  let agent = new Proxy(obj, {
      /*
          target表示obj这个对象
          property表示读取的属性的key
      */
    get(target, property) {
        console.log("执行了get方法");
        return target[property];
    },
  });
  console.log(agent.age);
</script>

Proxy代理的set方法

let obj = {
    name: "小明",
    age: 26,
};
let agent = new Proxy(obj, {
    /*
        target表示obj这个对象
        property表示读取的属性的key
        newValue表示设置的值
    */
    set(target, property, newValue) {
        console.log('执行了set方法');
        target[property] = newValue
        return true
    },
});
agent.age=30
console.log(agent.age);

注意：定义 Proxy 代理对象的 set 的时候，要返回 return true ，特别是在严格模式下，否则，
     会报错 'set' on proxy: trap returned falsish for property 'age'

3.2、了解Object.defineProperty

Object.defineProperty(对象.定义属性,用来为一个对象添加新属性)

<script>
      let person  = {
          name: "小明",
          sex: '男',
      };
	  // 为 person对象 传输了一个新属性 “age”，并且设定它的值为 18
      Object.defineProperty(person,'age',{
          value : 18
      })
      console.log(person)
</script>

Object.defineProperty() 的get()方法

<script>
        let person = {
            name: '张三',
            sex: '男',
        }
        function Observer(obj) {
            const keys = Object.keys(obj)
            keys.forEach((key) => {
                Object.defineProperty(this,key,{
                    get() {
                        return obj[key]
                    }
                })
            })
        }
        const obs = new Observer(person)
        console.log(obs.sex);
</script>

Object.defineProperty() 的set()方法

<script>
        let person = {
            name: '张三',
            sex: '男',
        }
        function Observer(obj) {
            const keys = Object.keys(obj)
            keys.forEach((key) => {
                Object.defineProperty(this,key,{
                
                    set(val) {
                        console.log('set方法调用了')
                        obj[key] = val
                    }
                })
            })
        }
        const obs = new Observer(person)
        obs.name=15
</script>