使用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 非递归获取组件实例，这个方法太牛了，但是我所开发的组件其实不需要这样用。
image.png
利用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
持续更新中...
欢迎点赞嘿嘿嘿
网友评论