1. 计算属性和侦听器&methods
   1. computed
      1. 定义：要使用的属性不存在需要听过已有的属性计算得来
      2. 原理：借助Object。defineProperty（）方法提供的getter和setter
      3. 计算属性最终会出现在vm上，直接读取就可以进行调用
      4. 默认存在getter方法（不是说内部有这个函数，而是你如果只写一个函数就当作是getter），当计算属性要被修改，必须写setter函数去响应的修改，并且setter中要引起计算时依赖的数据发生变化
      5. get函数在初次读取的时候会执行一次，当依赖的数据发生变化的时候会再次被调用
      6. 注意
   2. lop
      1. 默认不检测对象内部值的改变（只是一层，有属性可以设置为深层次的）
      2. 两种写法
         1. 创建vue实例时传入 watch：{}配置
         2. 通过实例对象vm ，vm.$watch()监视
   3. methods
   4. 三者区别
      1. computed VS methods
         1. computed具有内部缓存机制（复用），效率更高，调试更方便
      2. computed VS watch
         1. computed可以完成的功能，watch都可以完成
         2. 但是watch能完成的功能， computed不一定能实现，eg：watch可以进行异步操作
      3. 重要小点
         1. 所有被vue管理的函数，最好写成普通函数，这样保证this指向vm或实例对象
         2. 所有不被vue管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数）这些最好写成箭头函数，这样this指向的是window
2. 基础知识
   1. 模版语法
      1. 插值语法:{{}xxx}
         1. 用于解析标签内容的（eg：<h1>{{xxx}}</h1>)
      2. 指令语法：v-xxx
         1. 用于解析标签的(eg：<a v-bind:href="xxx"></a>)
   2. v-xxx：指令（核心）
      1. v-bind
         1. 单向数据流通：data=>页面
            1. 可以动态绑定属性 eg：：href=“xxx”
            2. class和style样式动态设置 :class='"xxx"
            3. 绑定数据 :value="xxx"
            4. xxx可以是对象、数组、变量
      2. v-model
         1. 双向数据流通：data<=>页面 v-model：value=“xxx”可以简写为v-model=“xxx”
            1. 只可应用在输入元素中，input、textarea、chechked、radio、select
         2. 值绑定
            1. 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)
      3. v-on
         1. 可以使用v-on：xxx或者@xxx绑定事件 ，xxx是事件名，事件的回调在methods中写（不要使用箭头函数，否则你的this会指向window，就不是vm了），最终会配置在vm对象上。
            1. eg： v-on:click="demo($event)"使用$event可以进行传参，$event是一个占位符
      4. v-pre
         1. 跳过v-pre所在节点的编译过程，可以跳过没有使用指令语法，没有使用插值语法的节点，会加快编译
      5. v-once
         1. 所在节点在初次动态渲染后，就视为静态内容，以后数据的变化，不会影响到v-once所在结构的更新，可以用于优化性能
      6. v-cloak
         1. 使用css配合v-clock可以解决网速慢时页面展示出{{xxx}}问题
      7. 自定义指令
         1. 全局指令：Vue.directives（指令名，回调函数/配置对象）
         2. 局部指令：在Vue的构造函数中进行书写，directives：{指令名：回调函数/配置对象}
         3. 3个常用回调函数
            1. .bind :指令与元素成功绑定时调用
            2. .inserted 指令所在元素被插入页面时调用
            3. .update 指令所在模版结构被重新解析时调用
   3. 事件修饰符
      1. 事件修饰符（为v-on提供的）
      2. 按键修饰符
      3. 系统修饰符
      4. 鼠标按键修饰符
      5. 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
3. 核心
   1. 数据代理
      1. 通过vm对象（$或_开头 ）来代理data对象中的属性的操作，原理是使用Object.definePropery
      2. Object.definePropery（<要代理的对象>，<要添加的key>，<一些配置>）Object.definePropery是给对象添加属性的，并且默认情况下添加的属性不可以枚举
   2. v-for中的key
      1. vue引入虚拟dom的理念，遍历时会进行新旧值比较，没有发生变化的就不对其进行操作，这样减少频繁操作dom，避免消耗时间
         1. 所以在设置key值的时候尽量不要设置为index值，index会随着对象或数组个数改变而改变，尽量设置为一个唯一的值
   3. 生命周期
4. vue数据监视
   1. 会监视data中所有层次的数据
      1. 如何检测对象中的数据
         1. 通过setter实现数据的监视，并且在new Vue（）时就传入要监视的数据
            1. 对象创建后追加的属性，vue默认不做响应式处理
            2. 如需给后添加的属性做响应式，可以使用Vue.set(target,propertyName/index,value)或者vm.$set(target,propertyName/index,value)
      2. 如何检测数组中的数据
         1. 通过包裹数组更新元素的方法实现，本质就是完成以下两件事情：1.调用原生对应的方法对数组进行更新 2.重新解析模版，进而更新页面
            1. 不可以通过this.arr[0]="xxx",对数组进行更改，不会是响应式的
            2. 实在想改：1.可以使用Vue.set()或者vm.$set()方法，2.使用push()，pop() ,shift(), unshift(), splice(), sort(), reverse()
            3. 可以通过this.arr[0].name="xxx"，对数组中的属性进行操作，仍然还是响应式
      3. 注意事项：Vue.set() 和vm.$set(),不能给vm或者vm的根数据添加属性
5. 生命周期(本质是一个函数)
   1. 挂载流程
      1. beforeCreate
         1. 此时无法通过vm访问到data中的数据、methods方法
      2. created
         1. 可以通过vm访问到data中数据，methods中的方法
      3. beforeMount
         1. 页面呈现的是未经vue编译的dom结构，所有对Dom的操作，最终都不会奏效
      4. mounted
         1. 页面中呈现的是经过vue编译的dom，对dom的操作均有效。到这初始化阶段结束
         2. 一般在此阶段进行：开启定时器、ajax请求、发送网络请求、订阅消息，绑定自定义事件等初始化操作
   2. 更新流程（数据发生更改时）
      1. before Update
         1. 数据是新的，但是页面是旧的，页面尚未和数据保持同步
      2. updated
         1. 数据是新的，页面也是新的，页面和数据保持同步
   3. 销毁流程
      1. beforeDestroy
         1. 此时vm中所有的data，methods，指令等等，都处于可用的状态，马上要执行销毁过程
         2. 一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作
         3. 一般不会在此阶段对数据进行操作，因为即使操作了，也不会触发更新流程
      2. destroyed
6. 组件化编程
   1. 单文件组件
   2. 非单文件组件
      1. 基本使用
         1. 定义组件：Vue.extend(options ). options和new Vue(options)时传入的options是一样的
         2. 注册组件
            1. 局部注册
            2. new Vue（）的时候传入components选项
            3. 全局注册
            4. Vue.component("组件名"，组件)
      2. VueComponent
         1. 通过Vue.extend生成的组件，本质上是一个VueComponent的构造函数，每次调用Vue.extend，返回的都是一个新的VueCommponent，不同组件是不同的对象
         2. this指向
            1. 定义的组件中的data，methods，watch，computed中函数的this是VueComponent实例对象
            2. new Vue（）中的this是vue实例对象
      3. 内置关系
         1. VueComponent.prototype.__proto===Vue.prototype
7. ref&props&mixin
   1. ref
      1. 给元素或子组件打标识，应用在html标签上获取的是真实的dom，应用在组件的标签上获取的是组件实例对象vc
      2. 打标识：<h1 ref="xxx"></h1>
      3. 获取标识：this.$ref.xxx
   2. props
      1. 父组件给子组件传递数据
         1. 传递数据：通过v-bind进行传递数据<Demo :name='xxxx'. :age="xxxx">
         2. 接收数据：1.只接收props：['name','age'] 2.限制类型props：{name：String，age:Number} 3.限制类型，限制必要性，指定默认值
      2. props是只读的
   3. mixins混入
      1. 可以把多个组件共用的配置提取成一个混入对象
      2. 注册混入
         1. const mixins={xxxx}
      3. 使用混入
         1. 全局混入：Vue.minix(xxx) 局部混入：mixins：['xxx']
      4. 组件和混入对象包含同名选项，会进行合并，发生冲突的时候以组件优先
8. WebStorage
   1. localStorage
   2. sessionStorage
   3. 区别
   4. 相关api
      1. .setItem('key' , 'value')
      2. .getItem('key')
      3. .removeItem('key')
      4. .clear()
      5. （键值对均是string类型）可以使用JSON.Stringify(xxx) =>将xxx对象变为字符串 的形式 返回的数据是字符串格式，可以通过JSON.parse(xxx)进行解析