vue2迁移vue3时遇到的bug
创始人
2025-05-28 18:14:40
0

1 npm 发布vue组件,样式无法生效
vue.config.js中配署
css:{
    extract: false
}
这句话的意思是,将Css和is不分开打包,CSs将作为内联样式注入到js中,这样install组件后就有样式了
2 navigator.geolocation不生效
发现在谷歌浏览器中是不执行的,原因是在谷歌浏览器里navigator.geolocation的使用,只能使用 htps协议,普通的htp协议是无法执行的。
解决方法:
换成ie 和火狐Q都可以正常使用的,或者使用https协议
3 迁移vue3时没有listenersvue2中使用listeners vue2中使用listenersvue2中使用attrs从父组件传递数据给子组件嵌套组件,父组件通过通过listeners监听子组件的事件vue3把把listeners监听子组件的事件 vue3把把listeners监听子组件的事件vue3把把attrs和listeners统一合并到listeners统一合并到listeners统一合并到attrs中
4 record声明解释
type Record = {
    [P in K]: T;
};
keyof any //即 string | number | symbol
[P in K]的意思是对象的key可以取 string,number,symbol.
5 elementpuls中el-dialog中没有visiable属性了,变成v-model控制显示弹框
6  slot=“footer” -> v-slot:footer
7 this.$confirm在 import { ElMessageBox } from ‘element-plus’
8 vue2的popver中v-popver 变成vue3 ref="popoverRef"这种绑定形式 并且控制显示的api变成 v-model:visible
const input:any = ref()  const input:any = ref({})  const input:recordable = ref()
9 defineProps:要么设置默认值要么只设置参数的类型限制
withDefaults既可以设置默认值也可以设置参数类型
ts定义类型和默认值
withDefaults
interface prop {
  width: String | Number;
  height: String | Number;
}
const withdefau = withDefaults(defineProps(), {
  width: “”,
  height: “”,
});
10 vue3监听watch
1.监听单个的ref 如果ref是简单数据类型,要加value,复杂数据类型不用加
const user = ref({
  username: ‘jack’,
  age: 19,
  pet: {
    name: ‘小花’,
    age: 2
  }
})
const changeUser = function () {
  user.value.pet.name = ‘xiaohei’
}
watch(user.value, (newVal) => {
  console.log(‘user发生了变化’, newVal)
})
2.监听多个数据组成的数组,参数的顺序需要和数组中的顺序一致
watch([firstName, lastName], ([newFirstName, newLastName]) => {
  fullName.value = newFirstName + newLastName
})
3.监听getter函数
watch(
  () => firstName.value + lastName.value,
  (newVal) => {
    fullName.value = newVal
  }
)
4.监听reactive创建的响应式对象 会隐式创建一个深度监听器。不管嵌套数据的哪一层发生变化,回调函数都会执行
const person = reactive({
  username: ‘jack’,
  age: 18,
  sex: ‘男’,
  pet: {
    name: ‘小花’,
    age: 2
  }
})
const change = function () {
  person.pet.name = ‘xiaohei’
}
watch(person, (newVal) => {
  console.log(‘person发生了变化’, newVal)
})
// 只监听reactive创建的响应式对象的某个属性呢?==> 改为getter函数的写法(不然就监听person整体)
watch(
  () => person.pet,
  (newVal) => {
    console.log(‘person发生了变化’, newVal)
  },
  { deep: true }
//当使用 getter 函数作为源时,回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发,你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时,如果回调函数由于深层级的变更而被触发,那么新值和旧值将是同一个对象。
11 vue vite修改刷新后不实时更新 可能是路由名称大小写问题
12 vue2和vue3的template vue3的slot的时候去使用

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...