Vue学习笔记:Vue组件的核心概念(下)

1.双向绑定和单向数据流：

• 本质上还是单向数据流
• 视图<——>数据
• 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