一直没用 Vue2.0 做过什么正经项目, 所以也没有仔细研究新版本有哪些不一样的地方。所以用这篇文章来纪录在实际项目中使用 2.0 的一些要点。
Vue
事件
vm 对象派发事件变更为 $emit 方法。父容器监听事件的方式不再是定义 events 对象, 而是可以像 dom 元素一样, 使用 v-on:my-event="myEventHandler" 的方式 (同样可以使用 @ 简化 v-on) 定义事件回调
组件内调用自身
组件内只需要先定义 name, 就可以用这个组件名调用自身, 实现递归组件。
生命周期
组件的 created 生命周期方法调用时，dom元素都还没有被渲染，所以此时取不到 $el, $refs 等值；可以在 mounted 生命周期方法里去取 dom 元素。
列表结构 keep-alive
使用 v-for 生成列表结构的时候，有时需要让组件的实例暂存下来，以达到私有状态存储或者避免新创建的开销之目的。
通过 vue内置的 <keep-alive></keep-alive> 组件可以达成这个目标，但是前提是需要往其中嵌套 动态组件<component></component>。如果列表里的结构原本不是动态组件，也可以用动态组件包裹替代。
If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a
element
<keep-alive>
<component :is="currentView">
<!-- inactive components will be cached! -->
</component>
</keep-alive>
更复杂一些，在 keep-alive 的列表上配合 transition 过渡, 以达到每个列表元素都各自有合适的进出过渡效果。
<template v-for="page in pages">
<transition :name="page.transition">
<keep-alive>
<component :is="'my-page'"
v-if="page.index === pageIndex"
:list="page.list"
></component>
</keep-alive>
</transition>
</template>
directives & filter
指令仿佛并不能搭配 filter 一并工作，至少对于 v-html 是这样；对于这种情况，需要用 computed 处理。
VueRouter
路由跳转
路由使用 router-link 实现跳转, 如果是具名路由跳转是要加上 :to="{name: page1}" 形式的参数。
路由限制
在 router 实例上通过 beforeEach afterEach 这两个钩子函数定义路由切换前后的状态。比如限制访问路由页面可以这样：
router.beforeEach((to, from, next) => {
if (to.name === 'private') {
next(false)
} else {
next(true)
}
})
Abstract 路由模式
在 abstract 路由模式下，初始打开页面的时候，并会不自动跳转到某路由页面，而是需要手动的控制路由跳转到某个路由页面。这是因为在此模式下，js无从得知用户默认想到达的页面，所以需要特别定义默认显示在哪里。Reference
Vuex
vuex
用 vuex 一般也只是想有个公共数据存储点并且这个存储点也可以拿去做数据绑定。最简单还是直接全局注入 store, 然后每个组件里按需取。如果要实现双向绑定的话, 是可以用 computed 属性的 get / set 方法的:
computed: {
desc: {
get () {
return this.$store.state.desc
},
set (value) {
this.$store.state.desc = value
}
}
}
Webpack
Proxy
具体规则可以参看 这里