vue基础篇

前言
vue基础知识图谱
生命周期
指令
组件
侦听器
计算属性

前言

这个系列的专题，我将它分为三个大的部分：基础篇，进阶篇，全家桶篇。　个人觉得这三个部分如果你有了明确的认识和大概的了解，配合一下实际的项目看看，自己开发一下，vue的掌握可以说就比较全面了。最好结合实际项目进行本专题的查看，该系列内容，更多专注于文本描述，只粘贴必要性代码。
推荐项目地址：vue-element-admin
如何运行该项目等，可以自行查看该官网内容。

vue基础知识图谱

vue基础篇 - 图1
基础篇我们从生命周期，组件，指令，计算属性等几个大模块说起。通过这些学习，你就知道一个较为完善的vue页面是怎样的了。

生命周期

vue的生命周期分为：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
这八个状态，其中我们在日常开发过程中，常用到的有：created(用来路由取参数，初始化页面时发出的http请求)，mounted(页面dom元素的处理，事件总线的监听等)，destroy(组件在销毁时的一些处理)，另外还有较为少见的生命周期：activated（进入），deactivated（退出），但是这两个生命周期，只在页面组件被keep-alive指令进行页面缓存时有用，会在进阶篇再为详细介绍一下。
关于生命周期的详细介绍，请转移到我以前整理过资料的博客地址进行查看，介绍的很详细：https://www.cnblogs.com/mamimi/p/9467174.html

指令

指令贯穿vue模板，可以说是用来连接数据与页面模板的工具。我将指令大概分为了：作用于模板语法，作用域页面事件两种。
常见的vue模板指令有：

模板数据的绑定：{{ }}, v-bind: (一般简写为 : 即可), v-html(会有被xss攻击的风险)
表单数据的双向绑定：v-model，表单双向绑定上也可以直接放修饰符，比如：v-model.lazy v-model.number v-model.trim
页面todoList的渲染：v-for
页面条件渲染：v-if v-else-if v-else, v-show
缓存页面指令：keep-alive
事件相关指令：v-click(简写：@click，以下类似)，v-mousedown，v-longtap等，另外需要注意的是，事件指令上一般可以挂载修饰符，比如v-click.stop=”event”, .stop, .catch, .prevent等等，具体作用请移步：vue官网事件修饰符解析

组件

与以前jq时代的插件又有何区别
组件：我们认为它包括：js，css，vue模板（html）三个部分，也就是说一个页面其实也就可以认为是一个组件。
插件：一般来说 js插件只是一个js文件而已，虽然这个说法在vue里也被重新定义了，但是暂时这样理解是没有问题的，后续会在进阶篇详细介绍vue插件。

特点
一个页面即是一个组件，我们在抽取组件时应该尽量保证高内聚，低耦合（也就是说，功能高度集中，完善，保持功能上的单一，与其他组件没有相互牵扯的模块，当然数据上可以有牵扯。）

传值
组件的传值可以说是vue组件上很重要的一点，面试上也是被作为一个基本技能考察。其原因在于：

模板页面大家都会写，都会画。但是数据之间的传输是否能够很拿手的处理好，会是很多小公司用来区别初中高阶段前端的一个标准。
组件化是vue的一大特色，主张将功能性单一的模块抽取成组件，一个页面由n个组件组成。这就意味着，一个页面上有多个vue组件文件的存在，那么相互之间的传值就显得格外重要。
页面组件的组成如下图，一个页面由多个组件组成。

组件之间的传值大致分为以下几种：

父传子：1. prop传值 2.$refs 方式，直接访问子组件的方法，事件总线
子传父：$emit，类似于事件总线eventBus（发布订阅者模式，可自行百度查看设计原理）
兄弟组件之间：vuex，事件总线eventBus

组件之间的传值，是vue的一个不难却很重要的知识点，主要用于考察如何将多个组件链接起来的能力。通用的传值方式有：vuex（数据状态管理），eventBus(事件总线，发布订阅模式)。当然，还有js原有的比如localstorage方法等。

侦听器

侦听器watch，用来观察某个变量，如何发生变化后，进行某些事件/数据处理。比如下图，其中每个被观察的值包括oldvalue与newValue

  watch: {
    currentPatient:{
      deep:true,
      handler(newPatient,oldPatient){
        if(oldPatient && newPatient.id !== oldPatient.id && this.conflictQuestion){
          //性别年龄冲突
          this.onSend(this.conflictQuestion);
        }
      }
    },

计算属性

计算属性：用来观察某数据，如果发生变化后，进行其他事件/数据处理。看起来跟watch好像很想，但是他们有性能方面的差距。
计算属性computed

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
```
computed:{
 ...mapState(['questionList']),
 simpleList(){
   return this.questionList.filter(ele=> ele.itemCode === '01')
 }
},
```
侦听器watch
不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　immediate：组件加载立即触发回调函数执行，
　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
```
watch: {
 currentPatient:{
   deep:true,
   handler(newPatient,oldPatient){
     if(oldPatient && newPatient.id !== oldPatient.id && this.conflictQuestion){
       //性别年龄冲突
       this.onSend(this.conflictQuestion);
     }
   }
 },
```

前言

vue基础知识图谱

生命周期

指令

组件

与以前jq时代的插件又有何区别

特点

传值

侦听器

计算属性