2、Vue3.x 项目工程环境搭建中遇到的问题记录

一、vue3.x element-plus 表单遇到ref响应式丢失了的问题

image.png

二、el-input等ref绑定dom使用

1、

dom设置ref.png

2、

声明ref.png

3、

使用.png

4、

setup中别忘记return.png

三、Vue3.0，组件不加载进来，提示Failed to resolve component

尽量使用kebab-case.png

四、移除了$listeners，并且不兼容

2.x.png

3.x.png

五、require is not defined

 import.meta.glob('./api/*.js')

六、el-dialog不显示问题

3.x的el-dialog.png

2.x的el-dialog.png

七、实现Vue.2.x里面的$emit功能

// 数组语法

app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})
// 在setup中使用
setup(props, ctx) {
  const handleSetLineChartData = (type) => {
    ctx.emit('handleSetLineChartData', type)
  }
  return {
    handleSetLineChartData
  }
}

顺便提一句.png

八、TypeError: Cannot read property 'component' of null

:is没有绑定真实的值

九、如图：使用component动态组件时，只有组件名，而并未渲染

问题九.png

解决方法：
确保引入的components组件名与currentComponent的值对应且一致，包括大小写。

十、echart的引用问题

// echarts5.0以前的版本
import echarts from 'echarts'

// echarts5.0
import * as echarts from 'echarts'

十一、监听props属性

watch(
  () => props.chartData,
  (val) => {
    initChart(val)
  }
)

十二、过滤器不生效

vue3.x过滤器已删除.png

十三、使用computed返回的值要用.value

十四、其他小知识

1、filter

Vue3移除了filter

2、this不能在setup使用的问题

获取组件实例方法getCurrentInstance()
这个方法可以获取到当前组件的实例，相当于Vue2中的this。

3、$el

Vue2使用$el --> this.$el.getBoundingClientRect()
Vue3使用$el --> const { ctx } = getCurrentInstance()
ctx.$el.getBoundingClientRect()

4、v-model

• 非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
• prop：value -> modelValue；
• event：input -> update:modelValue；
• 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；
• 新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；
• 新增：现在可以自定义 v-model 修饰符。

十五、插件推荐

先推荐两个vscode插件

Volar

首先推荐Volar，使用vscode开发Vue项目的小伙伴肯定都认识Vetur这个神级插件，有了它可以让我们得开发如鱼得水。 那么Volar可以理解为Vue3版本的Vetur，代码高亮，语法提示，基本上Vetur有的它都有。

特色功能

当然作为新的插件出山，肯定有它独有的功能。

多个根节点编辑器不会报错

Vue3是允许我们有多个根节点的，但是我们如果使用Vetur就会报错，不会影响运行，但是看起来就很烦。 所以当我们转向Volar那么就不会出现这个问题了。

image.png

编辑器分隔

即便Vue的组件化开发，可以将单文件的代码长度大幅缩短，但还是动辄几百行甚是上千行。那么我们切换template，script和style的时候就要频繁上下翻，虽然有的插件可以直接定位到css，但是你回不去啊！所以这个功能简直是太人性化了。

安装完Volar以后，打开一个.vue文件，看vscode的右上角，有这么一个图标，点一下。

image.png

它就会自动给你分隔成三个页面，分别对应template，script和style，这样就太舒服了有没有。

image.png

还有很多新功能，可以参考下面这篇文章

Volar - vue终极开发神器！

Vue 3 Snippets

推荐的第二个插件叫做Vue 3 Snippets，同样的，他也有自己的Vue2版本。它是干什么的呢，可以看一下下面这张图，我只输入了“v3”，它有很多提示，我们就先选择v3computed，选中回车即可。

image.png

然后它就给自动给我们写了如下代码

image.png