Vue基础知识点

基础知识：

• vue的生命周期： beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed
• vue常用指令： v-for、v-bind（缩写形式:prop）、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-if、v-model、v-once、v-html、v-show...
• vue自定义组件：Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>' })
• vue常用实例方法和属性: data/$data、methods/$methods、$el、computed(计算属性)、$watch、$set、$event、$emit...
• 如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用methods里的方法来更新属性（methods里的方法每次重新渲染都会执行）
• 计算属性默认提供了getter，你还可以给它设置setter
• 当你数据变化是异步或者开销较大时，可以使用watch侦听器来响应数据的变化
• v-bind:class的值可以是一个对象，可实现类似react中classnames模块的功能
• 自定义组件上的class会被渲染拼接到template的根节点的class属性上（自定义组件上可使用v-bind:class来做class的判断显示逻辑）
• v-bind:style可以用来绑定内联样式，这个内联样式的值可以由一个对象来定义（类似css in js的模式）,且可以被定义为数组(多个样式对象)
• v-bind:style可以使用多重值的形式：<div :style=“display:[‘-webkit-box’,’-ms-flexbox’, ‘flex']"></div>
• v-if/v-else/v-else-if的时候，可以用key来管理可复用的元素
• v-if是’真正’的渲染，它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建
• v-if是惰性的，初始为假，什么也不做，直到为真的时候才渲染元素
• v-show总是渲染元素，只是简单的进行切换
• v-if的切换开销大，v-show则是初始渲染开销大，频繁切换使用v-show，运行时经常改变则使用v-if
• v-if和v-for一起使用时，v-for的优先级更高
• v-for可遍历数组，第二个参数是索引
• v-for可遍历对象，第二个参数是key，第三个参数是索引
• v-for和<template>搭配可减少渲染次数
• v-for和自定义组件使用时，需要使用props来传递值
• 尽可能的为遍历子元素加上key，获得渲染优化
• 数组变异方法：push/pop/unshift/shift/splice/sort/reverse改变原始数组
• 数组非变异方法：filter/concat/slice 不改变原始数组，总是返回新数组
• Vue不能检测到数组索引赋值（使用vm.$set解决）和修改length长度赋值(使用splice解决)的情况
• Vue不能检测对象属性的添加和删除(使用vm.$set或Object.assign)
• is=“todo-item”这种属性的写法比较适合DOM模板
• 事件修饰符，它们可串联使用：.stop、.prevent、.capture、.self、.once、.passive(尤其适合移动端)
• .passive不用同时和.prevent使用，后者会被忽略
• 按键修饰符: .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right
• 系统按键修饰符:.ctrl、.alt、.shift、.meta(⌘|⊞|◆)、.exact(允许精确控制系统修饰符组合键触发)
• 鼠标修饰符： .left、.right、.middle
• v-model会忽略表单元素的value、checked、selected，仅仅使用实例中的数据作为数据源
• 表单事件修饰符：.lazy、.number、.trim
• 组件是可复用的vue实例，具有vue实例大多数属性和方法
• 组件可复用，每个组件有独立的空间
• 组件上的data必须是一个函数，这样做避免影响了其他组件
• 通过Vue.component()全局注册的组件可在其被注册后的任何通过new Vue()创建的实例所使用，包含其组件树中的所有组件
• 通过插槽<slot>分发内容(其实就是类似于react的children)
• 动态组件<component>配合属性is来实现
• 解析DOM模板时需要注意下可能会有不生效的情况，需要使用is来传递组件

Vue组件

• 全局注册/局部注册
• 局部注册组件在子组件中不可用
• 全局注册的行为必须在根Vue实例创建之前发生
• camelCase的属性可以在组件中使用kebab-case
• 可以以对象的模式指定每一个props属性的类型
• 父级props的更新会向下流动，反之则不行
• 由于JavaScript对象和数组是引用传入的，所以当子组件对props的改变将会影响到父组件
• props类型校验可以是原生构造对象的中的任意一个，也可以自定义检验类型，通过instanceof检查
• 对于绝大多数特性来说，外部传入的值会替换掉组件内部设置好的值，如input的type属性，但有的属性则是会进行合并，如class
• inhertAttrs:false设置不希望根元素继承特性，可以使用$attrs属性来设置继承的目标元素
• v-on在设置事件监听器时，会把事件名全部转换成小写，推荐始终使用kebab-case的事件名
• v-model可以使用自定义组件中的model属性自定义
• 父组件模板的所有东西都会在父级作用域内编译，子组件的所有内容都会在子组件作用域内编译
• 插槽(<slot></slot>)/具名插槽(<slot name=“header"></slot>)/作用域插槽(slot/slot-scope)
• <keep-alive>组件可用来缓存被切换后隐藏的组件的状态
• $root访问根实例，$parent访问父组件实例(不推荐)
• 父组件访问子组件，使用$refs属性来获取设置了ref属性的子组件
• provide属性允许我们指定要分享给后代组件使用的方法，然后后代组件使用inject属性来获得祖先组件分享的方法(依赖注入)

• 事件侦听器（$emit派发的事件）

  • v-on 指令侦听

  • $on 侦听一个事件

  • $once 一次性侦听一个事件

  • $off 停止侦听一个事件

• 慎用递归组件
• 尽量避免组件的循环引用
• 优先使用template来定义模板，而不是inline-template
• $forceUpdate来强制更新view
• 组件包含大量静态内容时，可使用v-once来标记，缓存静态内容