20170525_使用vue遇到的相关问题

[openks]

---

title: 使用vue遇到的相关问题 date: 2017-05-25 14:44:15
description: 记录使用vue遇到的相关问题

1.Vue页面加载时Mustache标签尚未编译时导致页面闪烁问题

解决方法1：
使用v-cloak

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

详见这里
解决方法2：
使用v-text

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

详见这里

2.判断Vue页面运行环境

如果使用vue.js则表示使用开发环境如果使用vue.min.js则表示生产环境
在开发环境下devtools默认开启，在生产环境下则devtools默认关闭
在页面就可以使用Vue.config.devtools的值进行判断。

Vue.config.devtools = true

详见这里

[openks]

---

add 2018-01-17 10:45:35

3.扩展运算符如何只获取需要的部分字段（暂无解决方案）

object.assign(a,b)是会把b的所有可枚举属性与方法全部复制到a对象上，无法只复制部分字段

4.一个页面里使用两个相同的组件，但数据却只保存一个

可能是因为该组件的props接收的是同一个Object，而且在组件内部修改了该Object（或者使用sync）
这个逻辑是不对的，接收到的数据应该只用于展示,所有需要子组件修改的数据都要是简单数据类型（非数组对象等引用类型），如果只需要当前组件处理完后返回数据给父组件，可以直接在emit事件里把数据作为参数传递给父组件
子组件修改父组件数据时(即便通过sync也要)留意不能让父组件数据为对象

5.vue自定义组件对父组件暴露事件回调

this.$emit("eventName",[...args])

6.vue子组件向父组件传递大量数据该如何处理

this.$emit('enventName',[...args])

其中args参数可以是对象字面量,对象字符串，注意响应式对象问题

7.如何处理弹框组件在可视不可视时初始化数据问题

在改变弹窗组件可视不可视逻辑之前处理弹窗组件的初始化工作,弹窗组件添加初始化方法，父组件通过ref调用弹框组件的初始化方法 但是需要注意：

父组件调用子组件方法清空子组件数据可以使用ref,父组件通过ref调用子组件的方法，子组件里再通过ref调用孙组件的方法(如孙组件尚未mounted则子组件里拿不到孙组件的ref)

例子：弹框是一个组件，弹框里面有一个自己写的远程过滤组件 情景：点击按钮，出现弹框，清空弹框里的所有字段含该远程过滤组件 解决方案： 在点击按钮时通过ref调用弹框组件的清空数据方法，而在弹框组件里再通过ref是无法取到过滤组件的（仅限第一次），需判断子组件（弹框组件）能不能通过ref取到孙组件再分情况处理

8.多个页面需要使用多个二级代码的解决方案

所谓二级代码即同一接口不同参数返回同样数据结构但数据内容不同的对象数组 方法一： 放到mixin里，放到mixin里每个组件都会有该方法，任何需要该数据的组件都要调用该方法。 https://github.com/openks/learn-vue/issues/63#issuecomment-350648635 方法二： 放到vuex,即store里 https://github.com/openks/learn-vue/issues/71#issuecomment-357838118

[openks]

9.遍历树形结构获取所有节点数组

methods: {
  /** 获取树形结构的所有节点（含叶子节点和非叶子节点）
   * @method   getTreeNodeArray
   * @param    {Array}                nodeList 节点数组
   * @param    {String}                attr    子节点数组属性名
   * @return   {Array}                         所有节点数组
   */
    getTreeNodeArray (nodeList,attr) {
        let arr = []
        for (let i = 0, j = nodeList.length; i < j; i++) {
            let node = nodeList[i]
            arr.push(node)
            if ((typeof node[attr] !== 'undefined') && node[attr].length > 0) {
                arr = arr.concat(this.getTreeNodeArray(node[attr],attr))
            }
        }
        return arr
    }
  }

[openks]

---

add 2018-01-23 19:49:22

10.vue组件数据初始化相关问题

美好的计划： 通过vue-router的params从上一页带数据过来， 该数据在mounted方法赋值后渲染给本页的另外一个组件A当做参数，在组件A的mounted方法里通过该参数从服务端获取数据并渲染组件A 打脸的现实： 本页的组件会先渲染data里的初始化数据 虽然mounted方法里赋值会影响到组件A接收到的参数(会从空变为需要的值)但是组件A的mounted方法只会执行一次导致逻辑错误

<template>
<!-- 
组件里获取到的taskId为空字符串,
即便mounted方法里修改了taskId,
在组件里依旧是空字符串
解决方法一：
在data里直接初始化taskId
方法二：
在created方法里初始化taskId
-->
<component :taskId="taskId"></componenta>
</template>
<script>
components: {
    'component': component
},
data () {
  return {
      taskId: '',
    }
},
mounted () {
  this.taskId = this.$route.params.id + ''
}
<script>

data () {
  return {
    // 在data里初始化
      this.taskId = this.$route.params.id + ''
    }
},
created () {
  // 或者在created里初始化
  this.taskId = this.$route.params.id + ''
},

在beforeCreate里面对data赋的值会被data里面的赋值给覆盖, 建议在created里面做数据的初始化(如从router里带数据来在该组件里赋值) 其执行顺序为

beforeCreate->data/init->created->mounted 

[openks]

---

add 2018-03-13 15:30:05

v-if与v-else的复用问题

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

这样如果v-if与v-else里的结构类似会出现复用问题，需要对使用元素加上key进行区别

碰到现实问题： v-if和v-else里是两个<el-table>,通过<el-radio>进行切换会导致表格样式错乱, 是由于复用table导致的只需在两个<el-table>里分别加上key属性即可