【Vue棘手问题解决】项目实现JS向Vue传值丨【WEB前端大作战】

网友投稿 616 2022-05-30

前言

项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令规定了根据用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。

另一个逻辑处理页面由Vue实现,该页面可以实时展示元素相关属性信息(包括size、width、height及left、top等属性)。

思路

-方式实现;

Vuex state实现;

代码实现

.js

// 鼠标按下事件 el.onmousedown = function (e) { ... document.onmouseup = function (e) { document.body.style.cursor = 'pointer'; document.onmousemove = null; document.onmouseup = null; isMove = false; document.body.removeChild(mask); // 元素样式relative下方位属性 let domStyle = { width: data.width, height: data.height, left: data.left, top: data.top } el.style.cssText = setStyle(el, domStyle) // Vuex state实现方式 store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText); // -实现方式 // window.postMessage({domStyle: domStyle}, '*') } }

.vue

computed: { ...mapGetters('dragModule', ['editLayer']), ...mapGetters('domAzimuth', ['directProps']), domStyle () { return this.directProps } }, // -方式中,务必在页面销毁前释放掉-,否则会造成内存泄漏! beforeDestroy () { // window.removeEventListener('message', this.listenerMessage) }, mounted () { // window.addEventListener('message', this.listenerMessage) }, watch: { domStyle (n) { let configs = [] let model = {} for (let name in this.editSoul.model) { let config = this.editSoul.model[name] model[name] = '' config.name = name if ('style' === name) { config.value = this.directProps } configs.push(config) } this.model = model this.configs = configs }, }

效果

拓展阅读-异步请求Promise导致页面数据渲染错误问题解决措施

场景描述

【Vue棘手问题解决】项目实现JS向Vue传值丨【WEB前端大作战】

在Vue项目优化过程中,页面部分应用JS调用promise返回的异步数据,导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作(例如折叠栏位的操作),后台数据可以正常渲染展示。处理逻辑大致如下:

问题分析

经过页面数据输出及debugger断点调试,发现在页面渲染结束前,异步数据并未处理完毕,导致页面数据渲染问题。

当vue实例生成后,再次给对象赋值时,并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

受 ES5 限制,Vue.js 不能检测到对象属性的添加或删除,即Vue未做到脏数据检查。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

解决措施

通过以上问题分析,可通过v-if控制页面渲染、销毁逻辑,在异步方法请求前销毁相应数据段,异步方法请求成功后新建相应数据段。

代码如下:

【WEB前端大作战】火热进行中:https://bbs.huaweicloud.com/blogs/255890

Vue web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:《R数据科学实战:工具详解与案例分析 》 —1.5 DBI—数据库数据查询、下载
下一篇:Deepin 下 使用 Rider 开发 .NET Core
相关文章