vue

 1. 关于数组的操作

当利用索引直接设置数组的某一项时，例如：this.items[indexOfItem] = newValue

当你修改数组的长度时，例如：this.items.length = newLength

以上数组会改变，但是页面dom不会发生变化，只有push/shift等方法起作用，或者

 vue中对数组改变使用this.$set(数组名，下标，值)

1.2  vue双向数据绑定，当数据发生变化后，页面会响应式进行变化，但是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新---比如当我们对数组中操作修改或者添加不起作用，可以使用vue.set.  vue.$set

同理，当页面渲染结束后 ，对象添加某值不会响应式

2.  关于父子组件的传值问题

当父组件传值item时候，子组件使用到父组件的item.left.src时候，可能报错后渲染出来了，可以先使用判断条件

computed:{
leftData(){
return item.left || {}
} }
之后再在标签中使用{{leftData.src}}

或者在props属性中设置默认值

props：{
item:{
type:Object,
default(){
return{
    left:{src:''},
     right:{src:''}
}
}
}
}

3.     关于对props传值的操作

在子组件不能直接操作父组件直接传值过来的数据，建议使用data数据初始化（注意因为传值为数组或对象时候对props进行操作会对父组件数据产生影响）

 当需要对传值过来的数据进行数据操作**************

props:{
bodata:{
    type:Object,
    default(){
    return{
    left:{logo:''},
    right:{logo:''}
    }
    }
}
}     //父组件传值过来

data(){
    return{
    leftData:{}
    rightData:{}
    }

}    //设置初始值

watch:{   //监听获取该传值
    bodata(newVal){
    this.leftData = newVal.left  
    this.rightData = newVal.right        }
}

之后对leftData  和 rightData  进行操作 ，    
在方法中处理数据，
一般计算属性不进行传值，在标签中{{}}进行调用计算属性

methods:{
    more(leftData,rightData){
       reuturn leftData  - rightData
    }
}

{{more(lefeData  , rightData)}}

computed:{
        more(){
            if(this.leftData > this.rightData){    
           return this.leftData - this.rightData  
            //本地data数据进行操作，禁止直接操作props值防止影响父组件数据
      }} 
{{more()}}

4. vue路由跳转刷新

provide /inject 组合   作用是： 允许一个祖先组件向其所有子孙后代注入一个依赖， 无论组件层次有多深，并在其上下游关系成立时间里始终生效

<router-view  v-if="isRouterAlive"></router-view>
provide(){
    return {
        reload:this.reload
}
},
data(){
return{
isRouterAlive:true,
}
},
methods:{
reload(){
 this.isRouterAlive = false;
this.$nextTick(function () {
 this.isRouterAlive = true
}
});
}

inject: ['reload'],
this.reload();

5.关于v-for设置不同的icon与绑定不同的事件

6.获取dom节点实在mounted阶段，ref是定位在有v-if、v-for、v-show中的DOM节点，返回来的只能是undefined，因为在mounted阶段他们根本不存在，就需要调用VUE的全局api ： this.$nextTick(() => {})

7.手机上查看vue项目，连接同一网络，查看该电脑上ip，修改为vue上host，手机输入该ip与端口进行连接

8.:title="'当前报告id为' + pdfId" 

9.计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。注意与watch的区别