vue初窥

组件化开发

vue与angular一样，都是作为组件化开发的前端框架。传统开发中，一个页面要包含多个视图，比如传统的后台管理系统基本页面包含了标题、左边导航栏，右边内容区域，以及底部的footer，传统的做法是各自作为一个页面然后include进来，这样虽然能简化开发的复杂度，不过组件之间的数据交互就非常麻烦。而应用组件化开发，上述每一个元素都是一个独立的组件，一个单独的vue实例，拥有着自己的数据源、命名空间、方法、生命周期等。

特别在spa普及应用的今天，组件化开发非常有意义，一个页面由多个组件组成，而组件之间可以是嵌套的，所以最终会形成一个组件树。组件有点web自定义标签的味道，当我们定义好了组件，就可以在页面中像普通html标签，如a、Buttton一样去使用，非常方便。

vue默认的组件是父组件可以向子组件通信（通过props属性传递），而子组件是无法向父组件、兄弟组件通信的，但是我们可以使用vue的插件vuex的store来实现统一的状态管理，所有状态都放在组件之间的store对象中，所有组件获取状态都从store中获取，这样就可以实现多组件之间的通信，而且代码更加简洁高效。这在后面会单独开一个章节去说明它。

数据双向绑定

数据双向绑定也是vue的特色之一，这个特性也是要相对于传统的开发才能发现其便利性。双向就是相对于单向，传统基于dom的前端数据渲染，是从数据源获取数据后直接写在dom上，当dom的数据发生改变时，我们需要先去获取dom的值再去做相应的处理。而双向绑定的就是将我们的数据绑定到dom上，dom改变了，我们对应的数据源也会发生变化，并且数据源一旦发生改变，会实时更新到dom上，保证了数据源与dom的数据一致。注意这里所说的数据源只是前端的数据对象而已，而不是后端的数据接口数据，要更新到后端需要事件触发。vue的对象，data函数是默认的数据源，completd是加工了的数据，method是相关的操作函数，也可以返回对象。这些函数对象可以使用vue.$data，vue.$method等表示。

在template中，我们引用一个数据源，可以使用{{message}}这种moustache形式，双括号中可以是data、completed或者method等钩子函数，method必须是返回一个数据对象。如果是在hmtl的特性中引用这些数据源，就不能使用双括号，而是用v-bind，
比如,其中appid是通过v-bind绑定到href特性中的。如果我们的数据是一段html源数据，我们需要渲染出来而不是作为文本展示，就要使用v-html，但是注意这样很容易导致xss攻击，所以我们的数据源不能面向用户，相关的html需要做过滤。

vue生命周期

vue的声明周期表明了vue的实例从创建到销毁的过程，其包含的声明周期钩子函数分为created、mounted、updated、destroyed，这些都是相对于一个vue实例，也就是一个组件。

计算属性

completed钩子函数可以将一些需要经过处理的数据在这里计算后，再展示给用户。比如我们需要将msg对象反转后再展示出来。而这种方式往往会跟method方法类似，因为我们method中也可以处理数据后再返回。不过不同的是completed只有在依赖的对象，如例子是msg对象，改变的时候才能触发，而method是会实时调用，如果我们计算的逻辑非常耗性能，一般就要使用completed，因为completed会有缓存机制。completed不只是返回对象（getter),也可以是setter，默认是只有getter，我们只要在complete对象中声明get、set就能使用。比如一个页面包含一个table，table的数据通过complete获取，当执行增加row的操作后，我们可以直接向completed中set进去table，这样table就能完整显示刚刚加入的row，而不用再触发一次接口。