我之前一直使用的React，最近到了新公司，需要使用Vue，虽然之前自己写过一些小demo，但是缺乏系统的学习，且之前自己看的vue1.x的内容，好多都过时了，现在补充一下vue2.x的相关知识。
-
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: ‘
-
{{ p1 }}
'
})
-
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
可以使用多重值的形式：
:
style
=“
display
:[‘-
webkit
-
box
’,’-
ms
-
flexbox
’,
‘
flex
']">
-
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
和
搭配可减少渲染次数
-
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
()
创建的实例所使用，包含其组件树中的所有组件
-
通过插槽
分发内容(其实就是类似于react的children)
-
动态组件
配合属性
is
来实现
-
解析DOM模板时需要注意下可能会有不生效的情况，需要使用is来传递组件
-
全局注册/局部注册
-
局部注册组件在子组件中不可用
-
全局注册的行为必须在根Vue实例创建之前发生
-
camelCase
的属性可以在组件中使用
kebab
-
case
-
可以以对象的模式指定每一个
props
属性的类型
-
父级
props
的更新会向下流动，反之则不行
-
由于JavaScript对象和数组是引用传入的，所以当子组件对props的改变将会影响到父组件
-
props类型校验可以是原生构造对象的中的任意一个，也可以自定义检验类型，通过
instanceof
检查
-
对于绝大多数特性来说，外部传入的值会替换掉组件内部设置好的值，如input的type属性，但有的属性则是会进行合并，如class
-
inhertAttrs
:
false
设置不希望根元素继承特性，可以使用
$attrs
属性来设置继承的目标元素
-
v
-
on
在设置事件监听器时，会把事件名全部转换成小写，推荐始终使用
kebab
-
case
的事件名
-
v
-
model
可以使用自定义组件中的
model
属性自定义
-
父组件模板的所有东西都会在父级作用域内编译，子组件的所有内容都会在子组件作用域内编译
-
插槽(
)/具名插槽(
name
=
“header">
)/作用域插槽(
slot
/
slot
-
scope
)
-
组件可用来缓存被切换后隐藏的组件的状态
-
$root
访问根实例，
$parent
访问父组件实例(不推荐)
-
父组件访问子组件，使用
$refs
属性来获取设置了
ref
属性的子组件
-
provide
属性允许我们指定要分享给后代组件使用的方法，然后后代组件使用
inject
属性来获得祖先组件分享的方法(依赖注入)
-
事件侦听器（
$emit
派发的事件）
-
v
-
on
指令侦听
-
$on
侦听一个事件
-
$once
一次性侦听一个事件
-
$off
停止侦听一个事件
-
慎用递归组件
-
尽量避免组件的循环引用
-
优先使用
template
来定义模板，而不是
inline
-
template
-
$forceUpdate
来强制更新view
-
组件包含大量静态内容时，可使用
v
-
once
来标记，缓存静态内容
