Vue 经验总结

1、data操作

添加：

1）数组 用push unshit 添加，用splice,pop 删除

2)直接obj.xx= 添加对象属性是不会更新到view的，需要用$set('objname',{}) 来修改对象。

新对象可以用:Object.assign({}, this.listobj, {show:!this.listobj.show }) 返回。

单属性添加可用this.$set('obj.name',value)

3)对于以有的字符串，数字可以直接修改

4)对于没有的基础类型，添加时用$set，虽然可以用，但是不推荐，vue会提示

5)对于数组对象，直接用下标添加对象属性是不会更新view的,可用$set('arr[0].tel',xxx)

6)对于数组对象，用push 添加对象元素是可以的

2、class 绑定

组件可以接受props传递过来的class 和bool值为添加类

 :class="{openclass:openshow,focusclass:focusshow}" 四个参数都props传递

但是对于嵌套组件引用顶级传递值，多层嵌套组件传递后用以上方法会把openclass当成class值绑定，而不会去解析。

但是输出的this.openclass 是传递的值。

于是找到了另一个绑定方法  :class="[show?openclass:'',showfocus?focusclass:'']"。用三元表达式和数组

3、计算属性使用

对于简单的可用三元表达式，或简单操作符+这些来实现。计算属性用来做表达式无法实现的。

4、$dispatch

在写树组件时，会用到组件不定级嵌套使用，这时如需要点击时触发绑定的事件。

如果用v-on一直传递下去，组件内创建methods内部用$emit触发绑定的事件。这样也是可以实现的。但是组件使用时绑定的数据太多了。

这时就可以用派生，顶层绑定接收到v-on绑定的事件，在events上创建监听事件，接收参数和$emit触发事件。而嵌套的组件用派生来触发顶层上监听的事件。

5、动态绑定和静态绑定

对于传递classname字符串这些可以用静态 openclass="active" 以字符串形式传递。

组件接收到的是一个变量，如子组件需要就需要用:openclass="openclass" 传递了。

对于class传递意见用数组，这样可以传递多个类。这样传递时就需要:class="[]" 动态绑定了，以js解析它如是变量就引用组件上的值

动态也可以传递字符串:a="' '" 

动态和静态的使用情况：

动态：对于传递数据需要动态的，如果子会修改数据就用.sync。如值页面和组件都会使用到就动态传递，对于个别的数组对象这些配置也可以用动态传递，在""内定义数组或对象来传递。

静态：它以字符串传递，解析成一个变量值为字符串再传递，它有来传递组件的配置信息不会和页面产生关系的。

静态属性呢，组件接收后也可以动态传递到子组件

6、创建动态值传递

组件在对数组对象操作时要识别对象，当然用id是可能的。但是不能保证所有传递的对象都有id呀。

所以需要为对象创建标识indexid 。可以用v-for循环时产生的$index，加上一些关键字。

7、组件内对dom操作

组件内减少对dom的操作这是真理。但有时就是需要，如组件获取页面宽高，设置组件样式等。

对于这些意见是在data上创建对象保存style。在标签上:style绑定。在ready内或方法内用js计算出值修改data style。

最好做到只修改数据，数据绑定到需要的地方。

8、style

在做项目时会遇到把动态背景绑定到style

:style="{backgroundImage:'url('+item.path+')'}"

动态绑定是必须的值是对象，键名用小驼峰vue会解析，如果是transform 还会添加上前缀

9、组件执行时需要触发或自动执行的方法。

组件开发尽量不要做ajax 来获取数据这些，因为如果页面中大量用组件就会发起很多请求。意见组件只接收数据。

还有一种情况需要触发执行方法，如在写上传组件时，iframe需要绑定load方法，这样呢在组件创建后iframe会触发一次事件。

这也是没办法的，只能在方法内做判断，return 回去不符合的。

var pre=event.target.contentWindow.document.body.querySelector('pre');
if(!pre){
return ;
}

10、组件的状态属性

组件内部的状态属性都在data上定义，传递状态也可以。目标就是组件状态组件data定义，所需参数props传递。

11、组件理想的状态

组件就是把单一功能，单一模块独立，可公用重复使用，降低耦合度。

就像boss说这件事交给你了，不要烦我了。组件也一样。