使用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节点
D 结点
H实例化完成或更新的时候可以主动去调用
F节点
F 结点
组件开发具体过程
独立的组件复杂度主要集中在细节,交互,性能优化,API设计上,完事开头难弄,API的设计和可扩展性决定了组件迭代的复杂性,一开始不可能会烤炉的所有的细节,但是整体架构要清晰可扩展,否则很有可能重构 --来自《vue.js实战》
设计
设计组件的拆分:父组件,子组件
子组件的状态:有哪些状态,是否需要props,组件自身状态改变机制
父组件:有哪些子组件,需要给子组件传递什么参数。
开发一个color-picker组件,直接上设计图,软件用的是PressOn
吗
color-picker.png
设计好这个组件可以清晰的codeing,后面开发就很快了
具体参见源码地址,很简单的一个color-picker
持续更新中...
欢迎点赞嘿嘿嘿