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

   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.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;
复制代码

中间层布局

flex:1;
复制代码

底部布局

flex:none;
复制代码