Vue 实践小结

记一次 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. 数据相关：

   Array<string> | Object
   { [key: string]: Function | { get: Function, set: Function } }
   { [key: string]: Function }
   { [key: string]: string | Function | Object | Array }
   

2. 生命周期钩子相关

   Function
   Function
   Function
   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.documentElement.scrollTop);
  }
  next();
});
router.afterEach((to, from) => {
  // 如果进入后的页面是要滚动到顶部，则设置scrollTop = 0
  // 否则从vuex中读取上次离开本页面记住的高度，恢复它
  if (to.meta.scrollToTop == true) {
    setTimeout(() => {
      document.documentElement.scrollTop = 0;
    }, 10);
  } else {
    setTimeout(() => {
      document.documentElement.scrollTop = store.state.scrollTop;
    }, 50);
  }
});
复制代码

最后，记录一个经典的页面布局的实现方式

有这么一个需求，界面分头部，中间内容，底部三个部分，现在需要实现这么一个效果：中间内容没有撑满一屏剩下部分的时候，底部固定在底部，如果撑满了一屏剩下的部分，底部跟着在下面可以滚动。

现在可以通过 flex 完美实现这个效果，并且 flex 属性已经被大部分浏览器兼容，可以放心使用。

实现方式：

最外层容器布局

/* 设置父元素为flex布局 */
display: flex;
/* 设置子元素的排列方向 */
flex-direction: column;
/* 设置子元素在该方向上的对齐方式 */
justify-content: space-between;
复制代码