一、vue3.x element-plus 表单遇到ref响应式丢失了的问题
image.png
二、el-input等ref绑定dom使用
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动态组件时，只有组件名，而并未渲染
<component :is="currentComponent" />
问题九.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
还有很多新功能，可以参考下面这篇文章
Vue 3 Snippets
推荐的第二个插件叫做Vue 3 Snippets，同样的，他也有自己的Vue2版本。它是干什么的呢，可以看一下下面这张图，我只输入了“v3”，它有很多提示，我们就先选择v3computed，选中回车即可。
image.png
然后它就给自动给我们写了如下代码
image.png
网友评论