Vue.js 是一款流行的前端框架，主要用于构建交互式的前端页面。本篇文章将从 Vue.js 2.0 的数据流向和生命周期两个方面，对 Vue.js 的核心特性进行详细介绍。
数据流向
在 Vue.js 中，数据流向的核心原则是单向数据流。这意味着，一个组件通过 props 将数据传递给子组件，子组件则通过 events 将数据传递回父组件。这样的设计模式符合 React 的 Flux 架构中的单向数据流模式。
Props
组件是 Vue.js 的核心概念之一，它们将界面分解成可重用和可组合的部分。组件可以接收来自父组件的数据，这些数据被称为 props。props 是一个对象，其中包含了组件接收的所有属性，每个属性都有一个对应的值。
下面是一个简单的例子，通过 props 向子组件传递数据：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -------
-------- ------
-
-
---------Events
在 Vue.js 中，组件可以通过事件来向父组件传递数据。父组件通过 v-on 指令来监听子组件触发的事件，并在事件处理函数中处理数据。
下面是一个简单的例子，通过 events 向父组件传递数据：
-- -------------------- ---- -------
----------
-----
------- ------------------ ----- -----------
------
-----------
--------
------ ------- -
---- -- -
------ -
------ -
-
--
-------- -
------ -- -
---------- -- -
----------------- -----------
-
-
-
---------生命周期
Vue.js 组件的生命周期可以看作是组件在不同阶段执行的钩子函数。在组件的生命周期中，可以在特定的时间点执行自定义逻辑，如初始化数据、调用后端接口、绑定事件等。
下面是 Vue.js 2.0 的生命周期图示：
生命周期钩子函数
Vue.js 2.0 的生命周期钩子函数包括了以下 8 个：
- beforeCreate：在实例初始化之后、数据观测之前被调用。
- created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount：在挂载开始之前被调用。相关的渲染函数首次被调用。
- mounted：实例挂载之后调用，这时 el 被新创建的 vm.$el 替换了。
- beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有的 DOM，比如复位滚动位置。
- updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。Vue.js 不能保证所有的 DOM 元素都是在这个钩子函数调用后更新。
- beforeDestroy：在实例销毁之前调用。实例仍然完全可用。
- destroyed：实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
下面是一个简单的例子，演示了组件的各个生命周期阶段的钩子函数：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -------
-------- ------
--
------------ -- -
---------------------------
--
------- -- -
----------------------
--
----------- -- -
--------------------------
--
------- -- -
----------------------
--
------------ -- -
---------------------------
--
------- -- -
----------------------
--
------------- -- -
----------------------------
--
--------- -- -
------------------------
-
-
---------章节小结
本文介绍了 Vue.js 2.0 的数据流向和生命周期。数据流向的核心原则是单向数据流，通过 props 和 events 进行父子组件之间的数据传递。生命周期是组件在不同阶段执行的钩子函数，通过这些钩子函数可以在特定的时间点执行自定义逻辑。希望本文对您深入了解 Vue.js 2.0 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67826a75935627c90007ac62
