Vue.js 实战总结

时间 2019-12-10

原文原文链接

欢迎你们关注腾讯云技术社区-博客园官方主页，咱们将持续在博客园为你们推荐技术精品文章哦~html

做者：徐江伟前端

最近在某个项目中用到了Vue.js,从上手作开发到项目发布，一步步踩了很多坑。本文试图总结过去一个多月使用Vue.js中的一些经验，也算是一点心得体会吧，拿出来与你们分享，欢迎多多交流。vue

Vue.js简介

Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.git

这是来自Vue.js官网的解释，这里咱们不打算再照本宣科的把概念翻译一边了，仅就做者使用Vue.js的心得体会来作出解释。熟悉ReactJS或者Angular的读者可能对此并不陌生。github

Vue.js与ReactJS、AngularJS这些框架同样都持有相同的开发理念，经过扩展原生的HTML等结构化标签来做为其模版语言，此外进一步经过语法上的扩展提供了诸如双向数据绑定、交互数据模型等概念，从而使开发者从繁杂的DOM操做中解脱出来，将更多的精力用于关注业务自己的内容。web

此外，与React相似的是，均提出了包括虚拟DOM和组件化开发的理念，从而提升了代码的可维护性和性能。Vue.js试图用一种极简的方式来实现以上这些框架带来的优点，所以，相比于React和Angular来讲，Vue.js更加轻量、简介和优美。vue-router

下面，在进一步探究Vue.js以前，咱们先看一下Vue.js的几个核心概念。vuex

组件化

组件化开发是最近两三年比较火的概念。经过使用Vue.js来建立的组件，就像构建万丈高楼的砖块同样，拥有良好的封装性和复用性。每个组件都拥有其独立的样式和数据域，而且彻底与其它组件彻底隔离。简单的讲，任何前端的界面均可以经过合理的规划，划分红拥有不一样职责的组件。关于组件化开发的概念咱们再也不进一步展开，感兴趣的同窗能够进一步阅读这篇文章前端工程-基础篇。vue-cli

Vue.js的插件化

正如你所知，Vue.js的核心部分仅保留了包括数据绑定及组件化开发相关的内容。所以才保证了其极简的机制。此外，对于附加的功能也提供了高效灵活的插件化机制。对于你们耳熟能详的插件包括vue-router、vee-validator、vue-touch等。此外，也提供了容许开发者本身封装组件的机制。从而使你能更有效地抽象某些功能，为团队开发所用。例如，你能够将有关数据计算的逻辑抽象为独立的插件，提供给团队的人使用等。后端

state和vuex

若是你的项目很是简介，没有复杂的逻辑，那么你彻底不必引入vuex。vuex是用来在应用各个组建之间管理和共享应用state的模块，若是你使用过React那么你应该对Flux不陌生，vuex起到的做用与此相似。

vue-cli

Vue.js也提供了很是高效的命令行工具，经过使用几个简单的命令就能快速构建基于Vue.js的组件和应用，极大的减小了开发者的工做量，将开发者从繁杂的重复性的劳动中解放出来。关于vue-cli，咱们再也不展开，读者能够阅读vue-cli进一步了解vue-cli的功能。

经常使用指令

Vue.js提供了包括v-for、v-if、v-show、v-bind、v-model、v-on、v-html等内部指令，这里再也不细说每个指令的用法，读者能够自行参考文档。

须要说明的是v-if和v-show的不一样，v-show是经过更改DOM元素的display属性来实现隐藏与否的，而与v-show不一样的是，v-if是经过彻底移除DOM元素来实现隐藏与否的。所以，若是你的隐藏内容的确须要反复，那么使用v-show，这样性能更好。

v-bind与v-model不一样的是，v-model是双向数据绑定，而v-bind是单向绑定的。

v-for使用的时候，最好提供一个key给vue.js。

数据传递

父组件经过props传递数据到子组件，子组件经过events来传递数据改变到父组件。对于简单的数据修改，能够经过这种方式实现。可是对于复杂的数据逻辑，建议经过vuex来管理。例如：父组件传递title到子组件：

// 父组件中
<...>
    <child :title="title"></child>
</...>

// 子组件
export default {
    <...>
        props: ['title'], // 而后就能够经过this.title来使用了
    <...>
}

子组件传递修改到父组件,经过事件

// 父组件中
<...>
    <child @changeTitle="changeTitle"></child>
</...>
<...>
export default {
    methods: {
        changeTitle(text) {
            this.title = text;
        }
    }
}
</...>

// 子组件
<template>
    <... :click="onChangeTitle"></...>
</template>
export default {
    methods: {
        onChangeTitle (text) {
            this.$emit('changeTitle', this.id, text)
        }
    }
}

对于全局性的state，能够经过vuex来封装。例如用户登陆信息，全局都用到的常量信息等。对于vuex的内容比较多，你们能够看这里。vuex api。

生命周期方法

Vue.js提供了一套完整的组件的生命周期钩子方法，你能够在组件的生命周期的各个阶段作该作的事情。其完整的生命周期的方法图示以下：

vue-resource

前端开发不可避免的就是先后端交互，这里很是推荐vue-resource。建议将涉及到先后端交互的全部API放在一个独立的api.js文件当中，方便管理。而后在须要接口的地方导入对应的方法便可。下面是一个示例：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const API = {
    "getYAndMGrade": "//localhost:3000/demo/getYAndMGrade", 
    "createMonthPlan": "//localhost:3000/demo/createMonthPlan"
};
const post = (url,params)=>{
    return Vue.http.post(url,{
        params: params
    }).then(function (res) {
        return res.data;
    });
};
// 接口1
export const getYAndMGrade = (user) => {
    return post(API.getYAndMGrade, {user:user});
};
// 接口2
export const createMonthPlan = (user, month)=> {
    return post(API.createMonthPlan, {user: user, month: month});
};

vue-router

vue-router是基于vue.js用来解决前端路由的方案。vue-router提供了包括动态路由等功能。这里也给出一个示例：

export default [
  {
      name: 'about',
      path: '/about/',
      component: require('./pages/about.vue')
  },
  {
      name: 'blog',
      path: '/blog/:blogId',
      component: require('./pages/blog.vue')
  }
]

示例中的blog能够知，咱们能够传递id参数而且在组件中过去id。此外，咱们能够传递多个参数，如’/blog/:blogID/:postId’等。这里建议不要超过2个，由于传递的愈来愈多，就再也不方便管理了。

组件刷新

做者在使用vue.js的过程当中反复遇到过一个问题，就是组件刷新的问题。例如，做者的项目当中有用到菜单，打开不一样的菜单对应不一样的路由和组件。而若是在当前组件中，再次点击打开当前组件的菜单，则组件并不会刷新。

这就致使一个头疼的问题，由于用户点击菜单自己就是想刷新当前页面，而组件的数据并无刷新，所以就看不到最新的数据。解决思路就是，在组件路由里增长了一个时间参数，而后在组件当中增长了对这个时间参数的watch。具体是实现以下：

<...>
    <router-link :paht="'/list' + '?_=' + new Date().valueOf()"></router-link>  // 增长当前时间戳_参数
</...>
而后在组件当中watch这个时间参数就能够了：
<...>
    export default {
        ...
        watch: {
            "this.$router._": function() {
                // refresh data here
            }
        }
        ...
    }
</...>

总结

乱七八糟的写了不少，也算是对这段时间用vue.js的一个回顾。不得不认可，在使用vue.js的过程中开始逐渐喜欢上了这个优美而简洁的框架。所以也愿意跟更多的人分享使用它的经验。也欢迎你们一块儿交流。

参考

Vue.js官网
《Learning Vue.js》
在组件不变的状况下和url不变的状况下刷新视图
其它参考资料