2、Vue3.x 项目工程环境搭建中遇到的问题记录
一、vue3.x element-plus 表单遇到ref响应式丢失了的问题

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

2、

3、

4、

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

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


五、require is not defined
import.meta.glob('./api/*.js')
六、el-dialog不显示问题


七、实现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
}
}

八、TypeError: Cannot read property 'component' of null
:is没有绑定真实的值
九、如图:使用component动态组件时,只有组件名,而并未渲染
<component :is="currentComponent" />

解决方法:
确保引入的components组件名与currentComponent的值对应且一致,包括大小写。
十、echart的引用问题
// echarts5.0以前的版本
import echarts from 'echarts'
// echarts5.0
import * as echarts from 'echarts'
十一、监听props属性
watch(
() => props.chartData,
(val) => {
initChart(val)
}
)
十二、过滤器不生效

十三、使用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
那么就不会出现这个问题了。

编辑器分隔
即便Vue
的组件化开发,可以将单文件的代码长度大幅缩短,但还是动辄几百行甚是上千行。那么我们切换template
,script
和style
的时候就要频繁上下翻,虽然有的插件可以直接定位到css
,但是你回不去啊!所以这个功能简直是太人性化了。
安装完Volar
以后,打开一个.vue
文件,看vscode
的右上角,有这么一个图标,点一下。

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

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

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