vue3 开发问题总结

‘slot’ attrbutes are deprecated

• 原因：sloat属性已弃用；

// 之前
<structure>
   <div  sloat='header'> // 报错 'slot' attrbutes are deprecated
</structure>
//vue3 插槽使用
<structure>
<template v-sloat='header'>
     <div  sloat='header'> 
 </template>
</structure>

往vue的原型上面添加方法

//vue2
vue.prototype.$alert = ()=>{
 console.log("添加成功")
}
//使用
this.$alert()
// vue3
vue.config.globalProperties.$alert = ()=>{
 console.log("添加成功")
}
//使用
const

.sync 语法糖替换

// vue2
<pick show.sync = 'areShow' :title='标题'/>

//vue3
pick v-model：show = 'areShow' :title='标题'/>

<script setup》（实验性 vue 语法）setup 区别

• 1 变量方法组件的使用

<script setup> 
let a = ref(['1111']) //页面可直接使用
 </script>
//setup {} 需要return
setup(props,contxt){
 let a = ref(['1111'])
 return {a}
}

• 2 props和emit的使用

<script setup>
  const props = defineProps({
    foo: String
  })
  const emit = defineEmits(['change', 'delete'])
  // setup code
</script>

setup(props,content){
	console.log(props.foo)
	content.emit('change','dddd');
}
</script>

注册全局组件

• 使用webpack的api,require.context()；函数获取特定的上下文,用来实现自动化导入模块；

• require.context函数接受三个参数

  • directory {String} -读取文件的路径

  • useSubdirectories {Boolean**}** -是否遍历文件的子目录

  • regExp {RegExp} -匹配文件的正则

• 文件结构
  

  const requireComponent = require.context(
       './components',
       false,
       /\.vue$/);
       /*require.context（）执行后，返回一个函数接受三个参数
      *keys() {Function} -返回匹配成功模块的名字组成的数组
      *resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
      *id {String} -执行环境的id,返回的是一个字符串
*/
   requireComponent.keys().forEach((fileName: string) => {
   console.log(fileName)  // ./calendar.vue
   const componentConfig = requireComponent(fileName);
   const componentName = fileName
       .replace(/^\./, '')
       .replace(/\.\w+$/, '')
       .split('/')
       .map((kebab) => {
         return kebab.split('-').reduce((prev, next) => {
              return  prev +next.charAt(0).toUpperCase() + next.slice(1)
          }, '')

       }).join('')
   // 全局注册组件
   console.log(componentName);//Calendar
   app.component(componentName, componentConfig.default || componentConfig)
});

路由注册

• 结构
• 

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router';
import commonRoutes from './common.routes';
let routerList: Array<RouteRecordRaw> = [];   //  路由数据
const requireComponent = require.context('./modules', true, /\.routes.ts$/);
requireComponent.keys().forEach( (key: string) => {
    const routerConfig :Array<RouteRecordRaw> = requireComponent(key).default;
    routerList.push(...routerConfig)
});

 let routes = [...routerList, ...commonRoutes];
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
export default router;

• vuex和vueRouter最后在入口文件使用既可以了
  

vuex，vueRouter，原型上方法 在页面的使用

import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
 const ctx = getCurrentInstance();
 const store = useStore();
 const router = useRouter();
 const route =useRoute ()
store.commit("loanBillState/resetState") //触发muttion里的方法
store.dispatch("getUserInfo"); //触发action里的方法
store.getters["specialFundsRqState/loanAmount"] //获取getters里的值
store.state.generalState.invoiceList // 获取state中的值
type.value = route.query.type; //vueRouter取值
router.push({
        path: "/loanBill/obligorInfo",
        query: { type: type.value },
      }); // router路由跳转
  
  //vue原型上的方法应用
   ctx.proxy.$loading(false);
   //或者用上方截图中挂载的
   $app.$loading(true)；

hooks应用

• vue3hooks和之前vue2x中的minix类似，不过相比于minix能知道相应方法监听之类的是在那里混入的，使用会更清晰一些。
• 例

// hooks
export function deom(state, type) {
let getReqErr = (res) => {
        if (res.activeStatus === "1") {
           console.log('报错')
            return false;
        }
        return true;
    };
  let parseDebtor = () => {
     let debtorData = state.debtorData;
     let debtorArr = [];
     for (let i = 0; i < debtorData.length; i++) {
      debtorArr.push debtorData[i].value;
        }
        return debtorArr.join(";");
    };
	onActivated(() => {
	        store.dispatch("getUserInfo");
	    });
	 watch(() => state.basicInfoData, () => {
	        if (state.validateAll) {
	            console.log("触发校验")
	        } else {
	          console.log("不触发全部校验")
	        }
	    })
    return{
    getReqErr,parseDebtor 
}

//使用
import { deom } from "@/hooks/loan-bill";
 const {  getReqErr,parseDebtor} = deom(vuexState,'updata');
 getReqErr();

ref获取dom；

  <basic-form ref="children" /></basic-form>
  <script>
  let children = ref(null);//变量名要和要获取ref名相同
  console.log(children) //dom
  return{
  children 
  }
  </script>

watch监听多个变量时

watch([usedAmount,userRate],(newA,oldA)=>{
  console.log(newA,oldA)//返回数组[新值1，新值2]，[老值1，老值2]；
})

• vue3总体使用感觉还可以，建议使用< script setup>< /script>这种形式的,不然页面变量和方法还需要return出去，十分恶心。使用这种方法相对setup（）这种，props取值和emit触发要改变一下，vueRouter的路由钩子各别可能不太好用。

修改样式deep击穿

• vue3.x 对于修改样式 /deep/会有警告爆出修改为::v-deep.双冒号+v-deep修改。最优办法官方推荐:deep(你要修改的标签)
• 例： ::v-deep .filed-box{ color:#416484}
  :deep(.filed-box){ color:#416484}

监听页面高端判断移动端键盘是否弹出

• vue2时。我设置了两个变量记录页面的本来高度和变化高度，然后用watch监听来判断相关操作。但是升级为vue3后，监听不起作用力。后来直接在OnMounted中写的相关操作

let docmHeight = document.getElement,clientHeight || document.body.clientHeight;
let showHeight = document.getElement,clientHeight || document.body.clientHeight;
onMounted(()=>{
	showHeight = document.getElement,clientHeight || document.body.clientHeight;
	if(docmHeight >showHeight ){
	  alert("键盘弹出")
	}else{
	  alert("键盘收起")
	}
})