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

原文出处：https://www.cnblogs.com/jackyfei/p/11887385.html