vue杂谈

今年7月开始，项目由老旧的freemarker+dojo+jQuery修改成了前后端分离的Vue+elementui，对开发来说是件好事，前后端分离意味着并不需要互相前后端同事不需要互相等待。只要数据结构确定下来了，就可以各自完成各自的工作，最后调一下接口就好，前端可以mock数据用于测试。刚开始用肯定会有很多问题。

首先我们需要学习es6+的知识。其中promise、字符串模板、Array中新增的遍历的方法和箭头函数等，虽然知识点不多，只是用处很大，也都值得深挖。

vue中碰到的几个问题。

1. 循环中的key的作用

vscode编辑器，写循环的时候不带key会报出错误来。项目中使用了表格的动态列，选择显示列后，表格进行刷新，按照选择列显示。

在低分辨率下出现了一个很神奇的问题，选择列表设置选择创建时间的时候，创建时间的值为空，再继续选择所属配置组的时候，创建时间显示的值和更新时间一模一样，当然实际值是不一样的，这个问题就是有于列表的列中没有加key，这列数据没有更新导致的问题，加个不重复的key就可以解决这个问题。

以上是具体代码。不加key时这三列显示不正确。剩余属性均是循环展示的，这几个属性为特殊属性。 key为vNode中的唯一标识符，通过key diff算法会更加精确，diff算法中会进行新旧节点交叉对比，当无法匹配的时候会使用新节点的key与旧节点的key进行比对。当不加key的时候，会复用节点，导致之前节点的状态被保留，从而导致页面数据未更新的问题。

2. 双向修改值或者互相引用对象。

实际项目开发的时候，肯定会使用很多的组件，而且还有可能是组件套着组件的，这时候避免不了的去传递参数，写代码的时候经常不经意的把传递的参数就修改了，但是这时候访问页面console会报错，我们可以追踪下到底是哪个参数被修改。我这里经常出现的一个问题是这样的： 表单数据如下：

formdata:{
    id:'',
    name:'',
    group:{
        id:'',
        name:'',
        models:[]
    }
}

页面第一次载入的时候会把formdata.group 设置成group列表的第一个选项，（group为下拉单选框），v-model设置成formdata.group.id, 选择以后其他的发现选中状态有两个，其实在赋值过程中默认给id了一个值，选择其他的以后会把列表中的值修改掉，列中中会出现两个id相同的group。所以会导致有两个选中状态的下拉数据。

3. $emit 和 $on

使用事件总线传值时，$emit 和$on方法是存在先后顺序的，必须是$on事件监听的绑定要在$emit事件发送之前建立，否则就是能监听到事件，但是传递的值也会丢失。

4. 样式不生效

使用其他ui库的时候，避免不了要去修改本身ui组件的样式，样式中如果加scoped，则不会生效，这种全局修改的样式最好放到一个文件，全局引入。

5. watch内部属性不生效

完整的深度watch监听：

    data：{
        handler(val){
            .....
        },
        immediate:true,
        deep:true //是否深度监听
    }

handler：为监听属性变化后的处理方法。 deep：为是否深度监听 immediate：为是否立即执行，这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

后续会补充其他