vue 实践

一. 递归组件

注意的点

1. 回调自身的停止条件

<template>
  <div class="treeview {{ class }}">
    <!--<icon name="fold" :width="14" :height="14" v-show="false"></icon>-->
    <div class="node-data" v-for="(index, node) in model">
      <div class="node" :class="{'node--active': isFold(index)}">
        <span class="tv-icon" v-show="isSelect(index)" @click.prevent="select(index, node[valuename])" >
          <icon name="check" :width="14" :height="14"></icon>
        </span>
        <span class="tv-icon" v-show="areValidNodes(node[children]) && !isOpened(index)" @click.prevent="toggle(index, node[valuename])" >
          <icon name="unfold" :width="14" :height="14"></icon>
        </span>
        <label class="tv-label" @click.prevent="toggle(index, node[valuename])">{{{ node[labelname] }}}</label>
      </div>
      <div v-if="areValidNodes(node[children]) && isOpened(index)" class="children">
        <div class="nodes">
          <treeview
            :tid="tid"
            :value.sync="value"
            :labelname="labelname"
            :valuename="valuename"
            :children="children"
            :model="node[children]"
            :parent-index.once="index"
            :track-value-list="calculate(trackValueList, node[valuename])"
            :track-index-list="calculate(trackIndexList, index)"
            class="treeview--inner"
            >
          </treeview>
        </div>
      </div>
    </div>
  </div>
</template>

2. 由超多组件引发的性能问题

看代码...

论v-if 和 v-show的用法

1. 父级v-if 错误 内部指令不执行
    父级v-show 错误 内部指令仍然执行 display：none，block

2. v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持tamplate标签

本质是计算量

二. vue生命周期的利用

重点关注 beforeDestroy

这里有代码君...

三. 用Object.freeze()提升性能

Object.freeze()

是ES5新增的特性，可以冻结一个对象，防止对象被修改。

<p v-for="item in list">{{ item.value }}</p>

new Vue({
    data: {
        // vue不会对list里的object做getter、setter绑定
        list: Object.freeze([
            { value: 1 },
            { value: 2 }
        ])
    },
    created () {
        // 界面不会有响应
        this.list[0].value = 100;

        // 下面两种做法，界面都会响应
        this.list = [
            { value: 100 },
            { value: 200 }
        ];
        this.list = Object.freeze([
            { value: 100 },
            { value: 200 }
        ]);
    }
})

对于纯展示的大数据，都可以使用Object.freeze提升性能

四. directive

网上有一种说法

认为dom操作都应该封装在指令中

怎么判断什么时候用和不用？

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

是否使用指令应该看你实现的是什么功能

而不是看是否操作了dom

我们看看原生的指令

<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>

title属性为不同的标签提供tooltip功能

这就是一个指令

v-on v-show 为原生vue指令

v-on v-show 为原生vue指令

Vue.directive('指令的名字', {
    bind: function(el, binding, vnode，oldVnode) {
        // 绑定指令时调用
    },
    unbind: function() {
        // 指令解除绑定时调用
    }
})

Vue提供了许多hook function，例如 inserted 、bind等

bind是只会在绑定的对象节点被插入父节点时调用一次的函数，与unbind相对应，unbind将也只会在元素被解除绑定时调用