首页 前端知识 Vue3 TypeScript基础

Vue3 TypeScript基础

2024-08-04 00:08:07 前端知识 前端哥 775 332 我要收藏

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>
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14689.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!