elementui下拉框visible-change没反应

elementui下拉框visible-change没反应,第1张

如果您使用的是Element UI组件库,并遇到"visible-change"事件不起作用的问题,您可以尝试以下方法解决:

检查绑定的回调函数:确保您正确地绑定了回调函数并编写了正确的代码。

检查是否正确引入Element UI:确保您正确引入了Element UI并正确配置了全局插件。

确保组件正确使用:检查您是否正确地使用了下拉框组件,包括您是否在模板中正确声明了下拉框。

检查数据是否正确:检查是否正确传递了参数,以及是否正确配置了"visible"属性。

如果以上方法都不能解决问题,建议您提供更多细节和代码片段,以帮助我们更好地了解您的问题。

解决办法

减低版本

升级 vue && vue-template-compiler(孔小弟选择)

升级之后的问题

发版线上部署问题

vue 源码版本是2612

很多介绍vue源码的文章对computed怎么计算值讲的很清楚,但是对computed 怎么搜集到依赖它的视图渲染watcher,以及怎么去通知对应的渲染watcher去更新讲解的很模糊或者干脆一笔带过。这篇文章主要讲解——computed watcher是怎么搜集到订阅它的渲染watcher。

文件在src/core/instance/statejs

当组件读取computed a的值的时候会执行 computedGetter函数,先是通过

计算出computed函数的值,然后通过

进行依赖搜集。

Deptarget指向当前组件的渲染watcher,进入watcherdepend()看看是怎么进行依赖搜集的

文件位于 src/core/observer/watcherjs

第一个问题:thisdeps的赋值

是在cleanupDeps函数中执行thisdeps = thisnewDeps,所以要看cleanupDeps在哪里被调用的,以及thisnewDeps中的值是哪里产生的

get函数是在computed 通过watcherevaluate()计算值的时候被调用的,讲解下这个函数的核心 *** 作

这个this是计算属性的watcher,调用depjs中的

作用是放到栈顶,同时将计算属性的watcher赋值给Deptaget

会调用 计算属性a的函数

由于引用到了i,所以会触发i的get 函数,就会调用depdepend(),实际上是i的依赖搜集,这里的dep对象属于i

depdepend() 位于src/core/observer/depjs

这里的Deptarget就是上面保存的computed watcher实例,会执行watcher中的addDep,这里的this就是i的dep实例

文件位于 src/core/observer/watcherjs

做了两件事

把栈顶的watcherd出,改变Deptarget的指向,此时指向组件的渲染watcher

这一步就是 将thisnewDeps的值赋给thisdeps,此时thisdeps中的数组中的对象其实就是i的dep实例

再回到 watcherdepend()

thisdeps[i]depend() 这里就是执行

此时Deptarget是组件的渲染watcher,所以实现的逻辑是组件渲染watcher调用addDep(this),其实就是持有i的dep,最终被i搜集到依赖。

转了这么大一圈,实际上是为了让组件的watcher被计算属性中引用的data变量搜集到,这也不难理解,既然组件依赖computed的变化,当然也依赖computed中的值的变化,示例中computed中的值变化来自于i的变化,所以当i变化时,就让去通知计算属性的watcher去重新计算,通知组件watcher重新渲染。

对于data中变量的响应式原理和依赖搜集、派发更新可以参考我的这篇文章

从源码的角度分析Vue视图更新和nexttick机制

参考:

>

1、前端视图层的概念,主要把每个页面分成了M(Model)、V(View)、VM(VM ViewModel)。VM是其中核心,M和V间的调度者。

2、M,保存的是每个页面中单独的数据(比如要渲染页面表格,ajax请求到后台的你个数组,此数据即为M)。

3、V,每个页面的html结构。

4、VM,一个调度者,分割了M和V,M和V不直接关联,通过中间的VM。V想要保存数据到M,都要有VM做中间处理;V想要渲染页面,需要调用VM,VM从M中取数据。

5、前端中使用MVVM思想,主要让开发更方便,MVVM提供了数据的双向绑定(由VM提供)。

是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层

Vuejs 不支持 IE8 及其以下版本,因为 Vuejs 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vuejs 支持所有兼容 ECMAScript 5 的浏览器。

React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

都有支持native的方案,React的RN,vue的Wee下

都支持SSR服务端渲染

都支持props进行父子组件间的通信

性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向的

virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要 *** 作直接thisxxx)

组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

以上就是关于elementui下拉框visible-change没反应全部的内容,包括:elementui下拉框visible-change没反应、vue项目版本升级以及项目中遇到的问题附带解决方案、从源码的角度分析vue computed的依赖搜集等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9333734.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-27
下一篇2023-04-27

发表评论

登录后才能评论

评论列表(0条)

    保存