搭建 vue3 移动端项目的问题记录

router 的钩子函数不生效

原因

router 文件目录：

├── route -- VUE 路由  
├ ├── index.js -- 路由入口  
├ └── router.js -- 路由表 

在 main.js 文件中 import 的是路由表 router.js 文件，不是挂载了钩子函数的 index 文件。

解决

引入挂载了路由钩子函数的 index 文件。

指令符注册的区别

在 vue3 项目中使用在 vue2 项目中的指令符注册文件，发现不生效。

vue2 中注册钩子函数

export default (Vue) => {
  Vue.directive('directive', {
    bind: (el, binding) => {
      // todo
    },
    unbind: (el) => {
      // todo
    },
  });
};

vue3 中注册钩子函数

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})

vue3 中不能直接通过函数注册，vue2 是默认传入 Vue，vue3 中需要传入 createApp 的 app 实例。

官网链接：v3.cn.vuejs.org/api/applica…

移动端适配后点击输入框屏幕宽高变大

原因

在点击输入框的时候，触发了浏览器的放大行为。

解决

在 html 文件的 viewport 中增加最大屏幕最大缩放 maximum-scale=1.0。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />

emit 原生同名事件的冒泡

现象

在一个上传图片组件中使用了 input 原生标签。在触发 input 的 change 事件时，在完成图片加载后会 emit 一个 change 方法。会发现绑定在组件上的 @change 函数被触发了两次。在注释掉 emit 的代码后发现还是会触发 @change 函数。

原因

因为触发了的 input 原生标签的 change 事件是会冒泡的，在组件上绑定的 @change 事件也会捕获到组件内部的 change 事件。

解决

（1）把绑定在组件上的 change 事件改名。 （2）是用 stopPropagation 让 change 事件不冒泡。