摘要：我的项目开发过程中，组件通过render()函数渲染生成，并在组件外部定义了自定义拖拽指令。自定义拖拽指令规定了依据用户能够进行元素拖拽、缩放等一系列逻辑解决的动作。

本文分享自华为云社区《【Vue辣手问题解决】我的项目实现JS向Vue传值》，原文作者：SHQ5785 。

前言

我的项目开发过程中，组件通过render()函数渲染生成，并在组件外部定义了自定义拖拽指令。自定义拖拽指令规定了依据用户能够进行元素拖拽、缩放等一系列逻辑解决的动作。

另一个逻辑解决页面由Vue实现，该页面能够实时展现元素相干属性信息（包含size、width、height及left、top等属性）。

思路

  1. 监听器形式实现；
  2. 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调用promise返回的异步数据，导致页面局部始终无奈加载后盾返回的数据值。通过触发其余DOM操作（例如折叠栏位的操作），后盾数据能够失常渲染展现。解决逻辑大抵如下：

<template>    <div v-for="(items, index) in results" :key="items.itemsID">        <span v-for="(item, index) in items.appendItems" :key="item.itemID">            <el-button type="text" @click="handlerClick(item)">                {{item.itemName}}            </el-button>        </span>    </div></template><script>    results.foreach((result, index, results) => {        results[index].appendItems = []        aysnMethods(inputParams).then(res => {            results[index].appendItems = res.returnResults        })    })</script>

问题剖析

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

当vue实例生成后，再次给对象赋值时，并不会自动更新到视图下来； 当咱们去看vue文档的时候，会发现有这么一句话：如果在实例创立之后增加新的属性到实例上，它不会触发视图更新。

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

解决措施

通过以上问题剖析，可通过v-if管制页面渲染、销毁逻辑，在异步办法申请前销毁相应数据段，异步办法申请胜利后新建相应数据段。
代码如下：

<template>    <div v-if="showForm">        <div v-for="(items, index) in results" :key="items.itemsID">            <span v-for="(item, index) in items.appendItems" :key="item.itemID">                <el-button type="text" @click="handlerClick(item)">                    {{item.itemName}}                </el-button>            </span>        </div>    </div></template><script>    data(): {        return {            showForm: false        }    }    results.foreach((result, index, results) => {        results[index].appendItems = []        vm.showForm = false        aysnMethods(inputParams).then(res => {            results[index].appendItems = res.returnResults            vm.showForm = false        })    })</script>

点击关注，第一工夫理解华为云陈腐技术~