Front-end practical case丨How to realize JS transfer value to Vue

Abstract: development of the 160adc0c1f13df project, the component is rendered and generated by the render() function, and a custom dragging instruction is defined inside the component. The custom drag instruction specifies a series of logical processing actions that the user can perform element drag, zoom, etc.

This article is shared from the HUAWEI CLOUD community " [Vue Tricky Problem Solving] Project Realization of JS Transfer Value to Vue", the original author: SHQ5785.

Preface

During the project development process, the component is rendered and generated by the render() function, and a custom dragging instruction is defined inside the component. The custom drag instruction specifies a series of logical processing actions that the user can perform element drag, zoom, etc.

Another logical processing page is implemented by Vue, which can display element-related attribute information (including size, width, height, and left, top and other attributes) in real time.

Ideas

1. Listener mode implementation;
2. Vuex state implementation;

Code

.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
      },
}

effect

Extended reading-Asynchronous request Promise leads to page data rendering error problem solving measures

Scene description

During the optimization process of the Vue project, the asynchronous data returned by the JS call promise was used in the page part, which caused the page part to always fail to load the data value returned in the background. By triggering other DOM operations (such as the operation of folding fields), the background data can be rendered and displayed normally. The processing logic is roughly as follows:

<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>

problem analysis

After the page data output and debugger breakpoint debugging, it is found that the asynchronous data has not been processed before the page rendering ends, which causes the page data rendering problem.

When the vue instance is generated, when assigning a value to the object again, it will not be automatically updated to the view; when we look at the vue document, we will find this sentence: if you add a new attribute to the instance after the instance is created, It will not trigger a view update.

Due to ES5 restrictions, Vue.js cannot detect the addition or deletion of object attributes, that is, Vue fails to check dirty data. Because Vue.js converts the property to getter/setter when it initializes the instance, the property must be on the data object in order for Vue.js to convert it and make it responsive.

solution

Through the analysis of the above problems, the page rendering and destruction logic can be controlled through v-if, the corresponding data segment can be destroyed before the asynchronous method request, and the corresponding data segment can be created after the asynchronous method request is successful.
code show as below:

<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>

Click to follow, the first time to understand the fresh technology of