【Vue棘手問題解決】項目實現(xiàn)JS向Vue傳值丨【W(wǎng)EB前端大作戰(zhàn)】

前言

項目開發(fā)過程中，組件通過render()函數(shù)渲染生成，并在組件內部定義了自定義拖拽指令。自定義拖拽指令規(guī)定了根據(jù)用戶可以進行元素拖拽、縮放等一系列邏輯處理的動作。

另一個邏輯處理頁面由Vue實現(xiàn)，該頁面可以實時展示元素相關屬性信息（包括size、width、height及l(fā)eft、top等屬性）。

思路

-方式實現(xiàn)；

Vuex state實現(xiàn);

代碼實現(xiàn)

.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實現(xiàn)方式 store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText); // -實現(xiàn)方式 // 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導致頁面數(shù)據(jù)渲染錯誤問題解決措施

場景描述

在Vue項目優(yōu)化過程中，頁面部分應用JS調用promise返回的異步數(shù)據(jù)，導致頁面部分始終無法加載后臺返回的數(shù)據(jù)值。通過觸發(fā)其他DOM操作（例如折疊欄位的操作），后臺數(shù)據(jù)可以正常渲染展示。處理邏輯大致如下：

問題分析

經過頁面數(shù)據(jù)輸出及debugger斷點調試，發(fā)現(xiàn)在頁面渲染結束前，異步數(shù)據(jù)并未處理完畢，導致頁面數(shù)據(jù)渲染問題。

當vue實例生成后，再次給對象賦值時，并不會自動更新到視圖上去； 當我們去看vue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。

受 ES5 限制，Vue.js 不能檢測到對象屬性的添加或刪除，即Vue未做到臟數(shù)據(jù)檢查。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。

解決措施

通過以上問題分析，可通過v-if控制頁面渲染、銷毀邏輯，在異步方法請求前銷毀相應數(shù)據(jù)段，異步方法請求成功后新建相應數(shù)據(jù)段。

代碼如下：

【W(wǎng)EB前端大作戰(zhàn)】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

Vue web前端

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。