Vue vdom 和diff算法 组件

虚拟dom是什么
它是一个Object对象模型,用来模拟真实dom节点的结构

虚拟dom的使用基本流程
1.获取数据
2. 创建vdom
3. 初次渲染 vdom
4. 将vdom渲染成真实dom
5. 数据更改
6. 使用diff算法比对两次vdom,生成patch 对象
7. 根据key将patch对象渲染到页面中改变的结构上,而其他没有改变的地方是不做任何修改的( 虚拟dom的惰性原则 )

diff算法是什么?运行之后返回什么?
diff算法是比较两个文件的差异,并将两个文件不同之处,将这个不同之处生成一个补丁对象(patch)
diff算法来源后端,是同级比较,给每一个层急打了一个标记(key)

.组件化开发基础
扩展 HTML 元素,封装可重用的代码

组件注册方式
a.全局组件
Vue.component
b.局部组件

组件编写方式与Vue实例的区别
*自定义组件需要有一个root element
*父子组件的data是无法共享
*组件可以有data,methods,computed…,但是data 必须是一个函数

组件通信
i. 父子组件传值 (props down, events up)
ii. 属性验证
props:{name:Number}
Number,String,Boolean,Array,Object,Function,null(不限制类型)
iii. 事件机制
a.使用 $on(eventName) 监听事件
b.使用 e m i t ( e v e n t N a m e ) 触 发 事 件 i v . R e f < i n p u t r e f = " m y t e x t " / > t h i s . emit(eventName) 触发事件 iv. Ref <input ref="mytext"/> this. emit(eventName)iv.Ref<inputref="mytext"/>this.refs.mytext
v. 事件总线
var bus = new Vue();

  • mounted生命周期中进行监听

动态组件
* 元素,动态地绑定多个组件到它的 is 属性
* 保留状态,避免重新渲染

你可能感兴趣的:(Vue vdom 和diff算法 组件)