2018/11/22

vue 列表渲染注意事项

Vue中 列表渲染时
v-for="(item,key,index ) of list"
有三个参数：
item 代表属性值  key 代表属性名称 index 代表索引

操作数组时不能直接用数组下标的方法

如:vm.list[2]={id:1,text:"whmk"}

1、使用：pop push  shift unshift splice sort reverse 数组方法来操作数组
2、把list拷贝一份，对副本进行操作，再赋给list
如：Vm.list=[…vm.list,{id:1,text:"whmk}]
3、set方法  
Vue.set(vm.list,2,"whmk")/vm.$set(vm.list,2,"whmk")  把list的下标2的值改为whmk,如果没有下标为2的项，那么就创建这个项

操作对象时也不能使用常规的使用’ . '方法添加对象

如：vm.list.name="whmk"
1、通过拷贝一份list对象，对副本进行操作后才赋给list
	如:vm.list={
		…vm.list, //es6  展开属性值，类似于重写了vm.list属性
		name:"whmk"
	}
2、set方法  
Vue.set(vm.list,name,"whmk")/vm.$set(vm.list,name,"whmk")  把list对象属性名称为name的值改为whmk,如果没有这个属性，那么就创建这个属性

`上面这种思想 类似与React中对state的操作，不能直接操作this.state.list[3]=“xxx”,而要使用
this.setState((=({
	list:[…this.state.list,"xxx"]
}))`
此外 ：模板占位符避免冗余的外层div  vue 中 template 对应 React中的 Fragment`

在table、select、ul等内部使用组件时

1，在table、select、ul等内部使用组件时  
要使用is属性  指向要替换的组件名称
例如：<tr :is="row"></tr>
	<option :is="Option"></option>
	<li :is="Li"></li>

组件中的细节

1. 在子组件里面 使用data时 必须是一个函数 且返回一个对象(这样做的原因是让复用了多个组件的时候因为用的是同一个data，当有点击或其他事件发生时组件之间的都有独立的反应而不是都同时发生反应)

2. 如何在Vue中操作Dom 使用ref属性 指向当前这个元素
   使用方法： this.$refs.refName获取这个元素之后接下来就可以使用它来操作Dom
   如果ref指向的是一个组件，那么就是取得对这个组件的引用，可以使用它的属性方法等
   思想同 React 类似

3. 同样子组件不能直接修改父组件传递过来的数据
   需要拷贝一份，在副本上进行修改

4. 子组件可以对父组件传过来的值进行约束
   如:原来接受父组件的props是这样的：

   props:["content","orher"]
   

   现在可以这样来约束参数

 props:{
        content:{
        type:String,  //类型string
        required:true, //必须传入
        default:'defaultValue' //默认值

   	//用一个函数来校验传入的内容的长度必须大于5
        //最终返回true或false 来判断是否验证通过
         validator：function(value){
                return (value.length>5)
          }
    }  }

    思想与React prop-types类似

5. Props特性：父组件传过来，且子组件要用props接受才可以使用，而且在组件html标签上不会展示这个属性值

6. 非Props特性 父组件传过来，但子组件不接收，子组件上就不能使用这个属性，属性会展示在子组件的父级html标签上

7. 绑定原生事件：

   1、在组件上绑定一个事件实际上是一个自定义的事件，这个名称是一个自定义的名字，
   想在组件上触发这个事件，实际上要子组件绑定一个事件用$emit 向父组件触发一个事件。

   2、但上面的方法太复杂，简单的可以使用如：@click.native="handleClick" 给父组件上自己绑定一个点击事件，就不用子组件再用$emit 来向外触发了

8. 非父子组件的传值（Bus/总线/发布订阅模式/观察者模式）
   其实使用原型继承的原理

9. 动态组件 使用Vue 自带 component 组件 使用 :is 绑定组件名 来动态显示组件 v-once 提高了组件创建的性能

10. 使用transtion组件来包裹标签 实现动画效果

11. 使用Animate CSS库 使用注意
    在transtion 上要使用自定义动画名称className来绑定 Animate的动画名称

12. 想要在第一次进入页面时也有动画效果
    那么在transtion 上加上 appear属性 和自定义的appear-active-class来绑定自定义的类名

13. 当组件都有transition和animate的key-frames动画 那么以谁为最终的时长呢? 在transition组件上加上 type=“transition”的属性就以transition为准

14. 自定义时长 在transition组件上
    使用

:duration=“4000”
:duration="{enter:5000,leave:10000}"  自定义进入和离开的时长

JIRA ng bug

解决一个JIRA bug html模板使用 ng-if 来生成或移除DOM 而在js中使用$watch函数监听数据失效问题

如下所示：

心得：使用了ng-if 移除或生成DOM  $watch函数只在第一次生效，后续数据发生改变也不会生效，因为每次生成这个DOM就会生成一个新的作用域，不同的作用域当然就监听不到数据了，
可以使用ng-show替代，便可解决这个问题

链接：https://blog.csdn.net/weixin_36751895/article/details/78485672