开始

这个是一份个人快捷代码复制文件, 使用 md 工具打开导航栏, 可以快捷搜索复制到 vue3 的相关代码,

当前版本建议使用 vue3.2

组件名称

<script lang="ts">
export default { name: 'MenuItem' }
</script>

导入图片

<script lang="ts">
import passIcon from "@images/a2.png";
</script>

生命周期

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在``中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。

onBeforeMount

import {onBeforeMount} from 'vue'

onBeforeMount(()=>{
    console.log('before mount:',myRef.value)
})

onMounted

import {onMounted} from 'vue'

onMounted(()=>{
    console.log('mounted:',myRef.value)
})

onUnmounted

import {onUnmounted} from 'vue'

onUnmounted(()=>{
    clearInterval(timer);
})

语法

ref

页面元素

返回元素本身, 才不会都是响应

const myRef = ref<HTMLElement | null>(null)

const myRef = ref<any>(null)

import {ELForm} form 'element-plus'
const formRef = ref<InstanceType<typeof ELForm>>()

页面

<template>
  <div ref="myRef">
      <p>Test ref in Vue3</p>
  </div>
  <el-form ref="formRef"></el-form>s
</template>

computed

计算属性

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

const count = ref(0); //不用 return ，直接在 templete 中使用

const addCount=()=>{ //定义函数，使用同上 
    count.value++; 
} 

//定义计算属性，使用同上
const howCount=computed(()=>"现在count值为："+count.value);
</script>

读写

// 读写模式操作
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

watchEffect

用于有副作用的操作，会自动收集依赖。

和 watch 区别: 无需区分deep，immediate，只要依赖的数据发生变化，就会调用

//定义监听，使用同上 //...some code else 
watchEffect(()=>console.log(count.value));

watch

import {watch} from 'vue'

watch(() => plusOne.value, () => {
    
})

props

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>
<!-- 或者 -->
<script setup lang="ts"> 
    import { ref,defineProps } from 'vue';
    
    type Props={ 
        msg:string 
    }
    defineProps<Props>(); 
</script>

emit

使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit

<!-- 父组件 -->
<div @change="change" @onSaveOk="paymentTest" ></div>

<!-- 子组件 -->
<script setup>
  import { defineEmits } from 'vue'

  // 获取
  const emit = defineEmits(['change'])
  // 或者
  const emit = defineEmits(['on-save-ok'])
  
  // 使用
  const showDrawer = () => {
      emit('change')
    }
  
</script>

nextTick

nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它

import { nextTick } from 'vue'

异步

setup() {
   const message = ref('Hello!')
   const changeMessage = async newMessage => {
     message.value = newMessage
     await nextTick()
     console.log('Now DOM is updated')
   }
}

普通

setup () {    
    let otherParam = reactive({
      showA:false
    })
    nextTick(()=>{
      otherParam.showA = true
    })
    return {
      otherParam 
    }
}

页面

<a-boo v-if="otherParam.showA"></a-boo>

vue2

this.abc = false
this.$nextTick(() => {
   //你要执行的方法
     this.abc = true
})

useAttrs

useAttrs：见名知意，这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 class、属性、方法。

<template>
    <component v-bind='attrs'></component>
</template>
<srcipt setup lang='ts'>
   const attrs = useAttrs();
<script>

useSlots

useSlots: 顾名思义，获取插槽数据

// 旧
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>

component

普通组件

<template>
    <!-- 使用组件 -->
    <Example />
</template>
<script setup>
// 引入组件
import Example from './example.vue;
</script>

动态组件

<template>
    <!-- 使用组件 -->
    <component :is="DynamicComponent"></component>
</template>
<script setup>
// 引入动态组件
import DynamicComponent from './dynamicComponent.vue;

</script>

异步组件

一个

<template>
    <!-- 使用组件 -->
    <component :is="AsyncComponent"></component>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
// 定义异步组件
const AsyncComponent: defineAsyncComponent(() => import('./asyncComponent.vue'))

</script>

多个

<template>
    <button @click="btnClick">click</button>
    <!-- 使用组件 -->
    <component v-if="currentTabComponent" :is="currentTabComponent"></component>
</template>
<script setup>
import { defineAsyncComponent, shallowRef } from 'vue';
// 定义异步组件
const components = {
    AsyncComponent: defineAsyncComponent(() => import('./asyncComponent.vue'))
}
const currentTabComponent = shallowRef('')

// 切换异常组件
function btnClick() {
    // 异步组件，用对象嵌套，就可以用 字符 去匹配异步组件了。
    currentTabComponent.value = currentTabComponent.value ? '' : components['AsyncComponent']
}
</script>

provide，inject

提供数据

父组件

<template>
  <MyMarker />
</template>

<script>
import MyMarker from '../components/MyMarker'
import {provide,readonly} from 'vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
      
      // 改为响应数据 
      // 只能监听一些如数字、字符串、布尔之类
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    provide('location', location)
    provide('geolocation', geolocation)
      
      // 给子组件提供修改数据方法
    const updateLocation = () => {
      location.value = "hahaha"
    }
    provide('updateLocation', updateLocation)
      
      // 防止数据被子组件修改
    provide('location', readonly(location))
      
  },
}
</script>

子组件

<template>
  <div>{{ location }} - {{ geolocation }}</div>
</template>

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  name: 'MyMarker',
  setup() {
    const location = inject('location')
    const geolocation = inject('geolocation')
    
    // 接收修改数据方法
    const updateLocation = inject('updateLocation')

    return {
      location,
      geolocation
    }
  }
}
</script>

应用：刷新页面

App.vue

<template>
  <router-view v-if="isRouterAlive"></router-view>
</template>
 
<script setup lang="ts">
import { ref, reactive, provide, inject, nextTick, watch } from 'vue';

const isRouterAlive = ref(true)
const change = ref(false)

provide("reload", change)

watch(() => change.value, (newValue: any, oldValue: any) => {
  reload()
})

const reload = () => {
  isRouterAlive.value = false

  nextTick(() => {
    isRouterAlive.value = true
  })
}
</script>

子页面

<script>
import {inject} from 'vue'
const reload = inject("reload")    
reload.value = !reload.value
</script>

defineExpose

当父组件要调用子组件方法时,子组件要暴露方法给父组件调用

defineExpose({ childMethod })

官方包

router

跳转页面

import { useRouter } from 'vue-router'

const router = useRouter()

// 路由跳转
const goto = () => {
    router.push('/')
}

router.push({
    name: 'about',
    params: { id: e.key }
})

页面获取参数

import {useRoute} from 'vue-router'

const route = useRoute()
console.log(route.query) // {name: "阿强呀"}


watch(() => route.path, () => {
    
  })

总结

import { onBeforeRouteUpdate, useRoute,useRouter } from "vue-router";
import { computed, watch } from "@vue/runtime-core";
 
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
 
    路由跳转
    router.push("/");//跳转首页
 
    计算属性赋值路由方法
    menuActive: computed(() => route.name),
    menuOpened: computed(()=>route.meta.parentNode)
 
    监听路由变化   
    注意：route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route         
         对象：
     
    watch(
      () => route.meta,
      (val, oval) => {
        console.log("watchsssssss", val, oval);
      }
    );
      
    导航守卫 监听路由变化
    onBeforeRouteUpdate((to) => {
      console.log(to, "=====");
    });
 
    }
}
 
在html中使用
 
 @click="()=>$router.push('/home')"

页面参数

// 组件

// 跳转

element-plus

import { ElMessageBox, ElNotification } from 'element-plus'

// ElMessageBox
alert confirm prompt

vue2

directives

局部指令

// v-focus="editing"

<script lang="ts">
export default {
  name: 'Todo',
  directives: {
    focus(el, { value }, { context }) {
      if (value) {
        context.$nextTick(() => {
          el.focus()
        })
      }
    }
  },
}
</script>

其他

require ts

如果在模块里是导出默认 export default model,那么在ts里引入时，要在require后加一个.default

const model=require("@/model.js").default

也可以具名导出 export {model}，引入时要加一个.model

const model=require("@/model.js").model

总结

控制台看不到代码错误时候可以复制一份错误文件, 然后在运行文件中进行删代码操作

结束

欢迎加我讨论

个人vue3语法快捷查询

开始