携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
前言
Vue和React属于当下主流框架，初学者（包括我）在选择的时候可能会犯难，我给个个人建议：初学选啥都一样，看个人爱好，想UI和JS一起写的推荐React，想数据渲染简单一点的选择React，两者在编码上存在 互相借鉴 ，都推荐使用Hooks编码，原理也大差不差，会其中一个，另一个在花个一周时间可以很快上手，相当于买一送一，很实惠了。
本系列主要介绍以下模块：
- 1.基础模版语法指令
- 2.比较常用的特性
- 3.组件化开发
- 4.前后端的一些交互功能
- 5.一些路由知识
比较常用的特性
这里想到的特性有：表单操作，计算属性，侦听器，过滤器，还有Vue的生命周期，分主次介绍。
2.1、表单操作
官方文档，大致记住 input，textarea，select，radio，checkbox，Date这些基本用法，此处的表单修饰符也可同双向数据绑定中的一致，表单的提交回显操作比较简单，整体思路无非就是，form 标签头部绑定个ref ，后续通过这个ref对象给各个item项进行 v-model 赋值，提交时只需提交这个form表单对象，回显时将后端返回的数据对表单对象进行赋值，即可实现回显操作。
2.2、计算属性
官方文档，计算属性目的是为了让复杂逻辑简单化和让模版更简洁。例如官方文档里的例子，让字符串翻转。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
如果页面中有多出需要该类效果，复杂而又冗余的代码显然不是最好的选择，这时我们只需在js中加入计算属性，元素使用时调用该类方法就好。
computed: {
reverseString: function(){
return this.msg.split('').reverse().join('');
}
}
刚开始学这里的时候我就有个疑惑，这特喵跟函数方法有什么区别 ，后来我猜清楚计算属性是基于他们的依赖进行缓存的，而方法不存在缓存。
在后来，接触项目之后，我才知道 computed 有多重要，在涉及联动方面，一个组件的变化需要依赖其他组件，怎么判断当前组件是否更新状态？这就需要用到 computed 了。举个简单的例子，有个多个下拉框，A下拉框当前取到某值时，B模块组件隐藏，C下拉框禁用，很简单是吧，确实很简答，监听A下拉框状态，在对BC做事件处理就好。
2.3、侦听器
官方文档 ，虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。所以Vue通过.watch选项提供了一个通用方法。其作用大致为：数据变化时执行异步或开销比较大的操作。
2.4、过滤器
官方文档，过滤器 filter 通常用在两个地方：双花括号插值和 v-bind 表达式 ，作用与常见的文本格式化。比如常见的格式化数据(首字母大写，指定日期格式等)
<!-- 过滤器使用-->
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 过滤器是 JavaScript 函数，因此可以接收参数 -->
{{ message | filterA('arg1', arg2) }}
//自定义过滤器
Vue.filter('自定义过滤器名称', function (value) {
//业务逻辑
})
还有局部过滤器，大体相同，就不说了
2.4、生命周期
官方文档，Vue实例从创建到销毁的过程，就是生命周期。
简单来说就是创建 -> 挂载DOM -> 更新数据 -> 销毁的这么一个过程，按自己理解的话，可大致理解为：
- beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个undefined状态；
- created: 此时实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom（一般在这时就可以绑定事件处理函数了）；
- beforeMount: 此时el和数据对象都有了，只不过在挂载到虚拟的dom节点上；
- mounted: vue实例已经挂在到真实的dom上，可以操作dom节点；
- beforeUpdate: 这时响应式数据更新开始调用，（数据是新的，页面是旧的）
- updated：数据更新完成，新的dom已经更新；
- beforeDestory： vue实例在销毁前调用，在这里还可以使用；
- destoryed：所有事件监听器会被移除；
生命周期这块我是参照 该博主的。
