前端学习历程--vue

---恢复内容开始---

一、对比其他框架

1、react：

共同点：

• 使用 Virtual DOM
• 提供了响应式（Reactive）和组件化（Composable）的视图组件。
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
• react路由使用redux，vue也用了类似的vuex

不同点：

• vue更轻量级，react社区更强大
• vue自动获得了 shouldComponentUpdate避免重复渲染
• 在处理动画时，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的，但是我们在实现这些检查时，也更加密切地关注了性能方面)。
• react的jsx使一切都变为js，vue仍使用template(也支持jsx)，这会更易读，易迁移
• Vue 可以让你在每个单文件组件中完全访问 CSS

scoped 属性会自动添加一个唯一的属性（比如 data-v-21e5b78）为组件内 CSS 指定作用域，编译的时候.list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

• vue-cli和create-react-app都包含了webpack，但Vue 支持 Yeoman-like 定制

2、angular1

相同点：

• 写法与ng几乎相同

不同点：

• 更灵活，也更简单
• 在 Vue 中指令和组件分得更清晰
• Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查，vue使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。

3、angular2

• ng2基于ts开发， ts静态类型检查在大规模的应用中非常有用，但中型项目不合适

 

二、使用

1、hello world

 

 

 

 

 

 

---恢复内容结束---

一、对比其他框架

1、react：

共同点：

• 使用 Virtual DOM
• 提供了响应式（Reactive）和组件化（Composable）的视图组件。
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
• react路由使用redux，vue也用了类似的vuex

不同点：

• vue更轻量级，react社区更强大
• vue自动获得了 shouldComponentUpdate避免重复渲染
• 在处理动画时，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的，但是我们在实现这些检查时，也更加密切地关注了性能方面)。
• react的jsx使一切都变为js，vue仍使用template(也支持jsx)，这会更易读，易迁移
• Vue 可以让你在每个单文件组件中完全访问 CSS

scoped 属性会自动添加一个唯一的属性（比如 data-v-21e5b78）为组件内 CSS 指定作用域，编译的时候.list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

• vue-cli和create-react-app都包含了webpack，但Vue 支持 Yeoman-like 定制

2、angular1

相同点：

• 写法与ng几乎相同

不同点：

• 更灵活，也更简单
• 在 Vue 中指令和组件分得更清晰
• Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查，vue使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。

3、angular2

• ng2基于ts开发， ts静态类型检查在大规模的应用中非常有用，但中型项目不合适

 

二、使用

1、hello world

2、绑定dom元素

3、v-on

4、组件注册

 

5、props组件接收属性

可以使用 v-bind 指令将待办项传到每一个重复的组件中

三、vue实例

1、构造器

组件构造器

 

2、构造函数的对象与data对象相互作用

3、$前缀：与构造函数中名称区分

4、没有控制器概念，逻辑放在生命周期钩子中

如 mounted、 updated 、destroyed

 

四、模板语法

1、vue底层将html编译为虚拟dom，也支持直接在render中写jsx

2、v-html中可以存放拼接模板，但不安全

3、使用js表达式

4、过滤器

只能在这两个地方使用

5、缩写

五、计算属性

1、模板表达式中需表达复杂逻辑时使用  计算属性

　　

reversedMessage就是计算属性，且依赖message

2、计算属性 vs methods

methods没有缓存机制，不管message是否改变，都执行函数，计算属性如果message不变，不会重新执行函数

3、computed vs watched

  

4、计算setter

运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。

5、watch：停止等待输入完毕

使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。