记一次 Vue 复习实践小结，编码技术总得时不时拿出来实践一番，不然很多细节的东西就会随着时间流逝，并且通过每一次实践你总能发现一些自己之前没有注意到的知识点，加深自己对一门语言或者框架的理解。

话不多说，让我们开始吧。

理清 Vue 属性相关

我一直分不清，Vue 对象的属性哪些是函数，哪些是对象，以至于自己在用的时候相当混乱，借这次实践，我把系统归类了一下，也算一个小结：

单独讲一讲 data 属性

在下面这种方式创建 Vue 对象时，因为该对象不会被复用，所以 data 的写法既可以写成返回一个对象，也可以写成返回一个函数

// 方式一：
var vm = new Vue({
  data: { a: 1 }
})
// 方式二：
var vm = new Vue({
  data: function() {
    return {
      a: 1
    };
  }
});
// 方式三：
var vm = new Vue({
  data() {
    return {
      a: 1
    };
  }
});
复制代码

其中，方式三是方式一的语法糖。

如果，Vue 是使用 Vue.extend() 的形式或者 .vue 文件的形式创建，data 属性必须是采用上面的二，三的写法，返回一个函数。因为可能在多处调用这个自定义的组件，所以为了不让多处的组件共享同一 data 对象，只能返回函数。

其他常用属性汇总

1. 数据相关：

   1. props: Array<string> | Object
   2. computed: { [key: string]: Function | { get: Function, set: Function } }
   3. methods: { [key: string]: Function }
   4. watch: { [key: string]: string | Function | Object | Array }

2. 生命周期钩子相关

   1. created: Function
   2. mounted: Function
   3. updated: Function
   4. destroyed: Function

3. 资源相关

   1. components: Object

4. 扩展组合相关

   1. mixins: Array<Object>

Vue 实现一个经典的需求

从可以滚动的列表点击某一列进入详情页面再返回并能记住列表滚动位置是一个相当经典的需求了。下面是具体实现步骤。

1. 使用 keep-alive 并定义好 Router

有针对的 keep-alive , 通过在路由定义的地方设置 meta，控制当前的 view 是否要进行 keep-alive , 很显然，详情页面不用 keep-alive ， 而列表由于做了分页，如果用户点击回退，那么应该还是保留 View，提高用户体验。

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码

定义 Router:

export default new Router({
  routes: [
    {
      path: '/feedback',
      name: 'feedback',
      component: FeedBack,
      meta: { title: '用户反馈', scrollToTop: true, keepAlive: false },
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: { title: '关于我们', scrollToTop: true, keepAlive: false },
    },
  ],
});
复制代码

2. 使用 Vuex 做一个全局变量记录滚动位置

使用 Vuex 记录滚动位置，在 router 的钩子函数中做文章：

store.js 代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    scrollTop: 0,
  },
  mutations: {
    recordScrollTop(state, n) {
      state.scrollTop = n;
    },
  },
  actions: {},
});
复制代码

3. 实现 Router 钩子函数部分逻辑

Router 钩子函数部分的逻辑：

router.beforeEach(function(to, from, next) {
  // 要离开页面如果设置为不滚回到顶部，则本页是要记住上滚动高度到vuex中，以便下次进来恢复高度
  if (from.meta.scrollToTop == false) {
    store.commit('recordScrollTop', document