vue组件开发那些事

使用vue开发感悟

刚开始开发vue的组件有些不太习惯，对vue templte的模板语法对比react渲染的内容写在render函数里面，
更改状态直接调用this.属性名而react是this.setState
vue引入组件后要在components里面注册组件，而react不需要注册组件。
vue的props属性需要声明，react直接拿来用
凡此种种，对比之后我更爱react，函数式思想简洁易懂。
但是vue比较小巧灵活，当所有的容器都准备好了，机器就开始运行了，后面对机器的一系列操作页比较简单。
在这个过程中，会遇到a litter坑坑。

开发前准备

开发前抽时间补了下唐金洲老师的课程《vue开发实战》课程挺好的实力推荐 git课程源码生态篇的知识已经够开发组件用了。《调试九法》里讲到要解决问题首先得理解系统，开发前需要对vue有一个清楚得理解，当然阅读官方文档是必不可少的。

• 不可以直接修改父组件的props属性。

• .触发 update 数据驱动视图改变。状态的改变未必会触发组件的更新，属性的改变页未必能触发组件的更新。状态未必是响应式的，响应式的状态未必添加到模板里。

• 对vue更新时生命周期的理解
  在beforeUpdated和updated之间会进行render执行。
  什么时候触发：状态发生改变或者$foreUpdata()强制跟新，
  这两个生命周期可以做什么：更新开始前移除事件监听器，更新后添加事件监听器。

• .在updated时候不能更改响应式的数据，会导致死循环，在updated的时候可以操作dom，添加事件监听器，有一次我就在updated的时候new了一个组件，并给组件添加了一个事件。这个事件的触发会导致响应式数据的变化，结果就是页面出现了重复的dom结点。并没有触发死循环。

• vue组件是什么时候被销毁的
  组件自己不能销毁自己,销毁是在离开或隐藏这个组件的时候，离开组件所在的路由，在这个组件的父组件上调用方法销毁组件，或者使其隐藏。

组件跨层级通信的几种方式

父组件provide数据，子组件inject的数据会往上去寻找，找到父组件中的数据就停止寻找，否则就继续往上寻找。父组件数据的改变要影响子组件，要使用observable

provide() {
   this.theme = Vue.observable({
     color: "blue"
   });
   return {
     theme: this.theme
   };
 },

子组件接受父组件提供的数据

 inject: {
    theme: {
      default: () => ({})
    }
  },

2 .使用emmit.js具体代码参见iview emmit.js
iview里有很多设计很棒的组件，经典的树形结构组件就是通过全局混入emmit.js 实现跨组件通信，设计非常巧妙，值得好好研究。
emmit使用递归向上或向下的方式查找指定的组件名称，找到后触发$emit

function broadcast(componentName, eventName, params) {
    this.$children.forEach(child => {
        const name = child.$options.name;

        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            // todo 如果 params 是空数组，接收到的会是 undefined
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}
export default {
    methods: {
        dispatch(componentName, eventName, params) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;

            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;

                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        },
        broadcast(componentName, eventName, params) {
            broadcast.call(this, componentName, eventName, params);
        }
    }
};

子组件状态发生 改变 dispatch(componentName, eventName, params)分发到响应组件名称的父亲，事件和传递的数据。

3.v-ant-refs 非递归获取组件实例，这个方法太牛了，但是我所开发的组件其实不需要这样用。

利用provide来缓存子组件的实例，E或F实例生成或更新的时候告诉A节点。

A节点
 provide() {
    return {
      setChildrenRef: (name, ref) => {
        this[name] = ref;
      },
      getChildrenRef: name => {
        return this[name];
      },
      getRef: () => {
        return this;
      }
    };
  },

D节点
<template>
 <div class="border1">
   <h2>D 结点</h2>
   <ChildrenG />
   <ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" />
   <ChildrenI />
 </div>
</template>
<script>
import ChildrenG from "./ChildrenG";
import ChildrenH from "./ChildrenH";
import ChildrenI from "./ChildrenI";
export default {
 components: {
   ChildrenG,
   ChildrenH,
   ChildrenI
 },
 inject: {
   setChildrenRef: {
     default: () => {}
   }
 }
};
</script>

H实例化完成或更新的时候可以主动去调用

F节点
<template>
  <div class="border2">
    <h3>F 结点</h3>
    <button @click="getARef">获取A Ref</button>
    <button @click="getHRef">获取H Ref</button>
  </div>
</template>
<script>
export default {
  components: {},
  inject: {
    getParentRef: {
      from: "getRef",
      default: () => {}
    },
    getParentChildrenRef: {
      from: "getChildrenRef",
      default: () => {}
    }
  },
  methods: {
    getARef() {
      console.log(this.getParentRef());
      console.log(this.$parent.$parent)
      //这样是递归的获取父组件的实例
    },
    getHRef() {
      console.log(this.getParentChildrenRef("childrenH"));
    }
  }
};
</script>

组件开发具体过程

独立的组件复杂度主要集中在细节，交互，性能优化，API设计上，完事开头难弄，API的设计和可扩展性决定了组件迭代的复杂性，一开始不可能会烤炉的所有的细节，但是整体架构要清晰可扩展，否则很有可能重构 --来自《vue.js实战》

设计
设计组件的拆分：父组件，子组件
子组件的状态：有哪些状态，是否需要props，组件自身状态改变机制
父组件：有哪些子组件，需要给子组件传递什么参数。

开发一个color-picker组件，直接上设计图，软件用的是PressOn
吗

color-picker.png

设计好这个组件可以清晰的codeing，后面开发就很快了
具体参见源码地址，很简单的一个color-picker
持续更新中...