webStorm Vue3 页面模板

webStorm Vue3 页面模板

<template>

</template>

<script>
import {
  provide,
  markRaw,
  computed,
  watch,
  watchEffect,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted} from 'vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
export default {
  name: "${COMPONENT_NAME}",
  components:{},
  props:{

  },
  //自定义事件父组件传递过来自定义事件名写在里面即自定义事件，没有写在里面即原生事件
  emits:[],
  /**
   * 声明周期 - 创建之前、完成（可以访问当前实例） 类似beforeCreate、create
   * @param 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
   * @param context 上下文对象
   *  attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.attrs。
   *  slots：收到的插槽内容，相当于this.slots。
   *  emit：分发自定义事件的函数，相当于this.emit
   */
  setup(props,context){
    console.log('---setup---',props,context)

    /**
     * 源数据
     */
    let data = reactive({

    })
    
    /**
     * 源方法：主要负责页面逻辑及事件函数
     */
    let fun = markRaw(reactive({
      'init':'(()=>{})'
    }))

    /**
     * 自定义hook函数主要用于发送axios请求
     * hook
     */
    let hooks = markRaw(reactive({
      'init':'引入js.导出方法'
    }))

    /**
     * 监视效应
     */
    watchEffect(() => {

    })

    /**
     * 监视
     */
    watch(data,(newValue,oldValue)=>{

    })

    /**
     * 计算属性
     */
    data.author = computed({
      get(){

      },
      set(value){

      }
    })

    /**
     * 像孙组件传递数据
     */
    provide('transferData',null);

    //通过组合式API的形式去使用生命周期钩子
    /**
     * 生命周期 - 挂载之前
     */
    onBeforeMount(()=>{
      console.log('---onBeforeMount---')
    })
    /**
     * 声明周期 - 挂载完成（可以访问DOM元素）
     */
    onMounted(()=>{
      console.log('---onMounted---')
    })
    /**
     * 生命周期 - 更新之前
     */
    onBeforeUpdate(()=>{
      console.log('---onBeforeUpdate---')
    })
    /**
     * 生命周期 - 更新之后
     */
    onUpdated(()=>{
      console.log('---onUpdated---')
    })
    /**
     * 生命周期 - 卸载之前
     */
    onBeforeUnmount(()=>{
      console.log('---onBeforeUnmount---')
    })
    /**
     * 生命周期 - 卸载完成
     */
    onUnmounted(()=>{
      console.log('---onUnmounted---')
    })

    /**
     * 返回一个对象（常用）
     */
    return {data,fun,hooks}
  },

}
</script>

<style scoped>

</style>

欢迎各位大佬指正不足之处~！