Vue学习笔记:Vue组件的核心概念(下)
张飞洪 人气:11.双向绑定和单向数据流:
- 本质上还是单向数据流
- 视图<——>数据
- v-model:仅仅是一个简写,用更少代码去实现功能。
- 自定义事件
- .sync 修饰符
2.虚拟DOM及KEY属性作用
- jquery:
- vue:
- virtual dom
- 新旧DOM树比较
同层级比较:
- 节点移动
-
- 不带Key移动
-
- 带Key移动
- 插入
-
- 有KEY(性能高)
- 节点删除新建
(算法因为同层级策略,无法达到最优解)
3.如何触发组件更新
数据驱动
任何修改DOM的行为都是在作死!
数据来源(单向)
状态data和属性props
- 状态是组件自身的数据
- 属性是来自父组件数据
- 状态改变未必会出发更新
- 属性改变未必会出发更新
响应式更新原理
4.计算属性和侦听器
计算属性:
可以在里面写些逻辑的属性
好处:
- 减少模板中计算逻辑
- 数据缓存
- 依赖固定数据类型(响应式数据)
侦听器
好处:
- 更加灵活,通用
- 可以执行任何逻辑,如函数节流,ajax异步获取数据,甚至操作节点。
二者区别
- 计算属性能做的,侦听器都能做,反之则不行
- 能用计算属性的尽量用它
5.生命周期的应用场景和函数式组件
生命周期
创建阶段分解
更新阶段分解
销毁阶段分解
函数式组件
- 申明:functional:true
- 无状态,无实例,没有this上下文,无生命周期
- 用途:临时变量用来存储重复计算
可以简单的认为他是一个方法,它的用法不同于计算属性:
- 必须依赖响应式数据;
- 模板中需要依赖v-for,v-if
- 可能依赖全局数据
TempVar.js
加载全部内容