记录一些 关于vue2 -＞ vue3 杂七杂八的坑/变化

记录一些 关于vue2 -> vue3 杂七杂八的坑

最大的两个问题 ：

① element-ui 换了,vue3 用的是 element-plus

②devtools 换了，vue3要安装另一版本的插件 chrome商店 、 github

左边 vue3项目用 右边 vue2 项目用

其他 很多变化 需要看官网

v-lazy 资源包 换成 vue3-lazy

.sync 语法换成 v-model 参考官方

slot 只能加到template标签里，语法 v-slot:xxx 或 #xxx

.native 语法已去除

vscode 报错 ‘v-model’ directives require no argument.
官方解决方案

在VScode中，打开 “文件>首选项>设置” 找到右侧用户设置
搜索vetur.validation,找到下面这句
"vetur.validation.template": false 

我解决方案
.eslintrc文件 配置添加

 'vue/valid-v-model': 'off',

我的eslint

/*
 * @Author: chengsl
 * @Date: 2022-01-06 09:29:40
 * @LastEditors: chengsl
 * @LastEditTime: 2022-10-31 09:59:16
 * @Description: Eslint 配置, 本配置针仅对个人编码喜好, 支持的技术栈为: vue3 + element-plus + vue/cli + js + scss
 * @40@remarks: vue3框架, 装几个eslint的资源时注意版本, 低版本不兼容;
 *  我装的相关的 eslint 插件以及其版本如下:
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "@vue/cli-plugin-eslint": "^5.0.8",
 */
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/vue3-recommended', 'plugin:vue/recommended', 'prettier'],
  parserOptions: {
		ecmaVersion: 2020,
		ecmaFeatures: {
			jsx: true
		}
  },
  globals: {
    axios: true,
    Vue: true
  },
  rules: {
		// "no-var": "error", // 要求使用 let 或 const 而不是 var
		"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
		"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
    'vue/multi-word-component-names': "off",
    'no-console': 'off',
		"vue/no-v-model-argument": "off",
    'no-unused-vars': 'error',
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/v-model-argument': 'off',
    'no-useless-escape': 0,
    'vue/valid-v-model': 'off',
		'vue/no-v-html':'off' // 允许 v-html 指令，项目中有需要
  }
}
// @see: http://eslint.cn

关于 this 和 Vue.prototype 的使用

// vue配置到 Vue.prototype
app.config.globalProperties.$getNowDateTime = function () {
    return new Date()
}
// 1.选项式API 取值方式同vue2
console.log(this.$getNowDateTime())

// 2.组合式API
const { $getNowDateTime} = getCurrentInstance().appContext.config.globalProperties
console.log($getNowDateTime())

// 3.单文件组件
import { getCurrentInstance } from 'vue'
const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
console.log('that---', that.proxy.$getNowDateTime())

单文件组件的相关语法

import { ref, onMounted, watchEffect, nextTick, getCurrentInstance } from 'vue'
// 定义父组件传递过来的参数
const props = defineProps({
    visible: Boolean, // 显示弹窗
    customerInfo: {
	type: Object, // 顾客信息记录
	default: ()=>{}
    }
})

// 定义emits
const emit = defineEmits(['update:visible', 'updateCustomerInfo'])
// <el-button @click="$emit('update:visible', false)">取消</el-button>
emit('update:visible', false) // 发消息给父组件 修改visible的值 
emit('updateCustomerInfo', {}) // 发消息要父组件执行updateCustomerInfo方法  并传参{}

// 定义组件内的数据
const dialogVisible = ref(false) // 显示弹窗

// 挂载后
onMounted(async()=>{
    // 在挂载后生命周期阶段要做的事
    await nextTick()
    // 重新渲染后 要做的事
    const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
    console.log('that---', that.proxy.$getNowDateTime()) // 参考上方要点1
})

// 监听器
watchEffect(async()=>{
    dialogVisible.value = props.visible
    if(props.visible) {
	await nextTick()
	getDialogHeight('.edit-customer-dialog', 200)
    }
})

wait ……