vue须要知道哪些才能算做入门以及熟练

时间 2020-01-23

标签 vue 须要知道哪些才能算做入门以及熟练繁體版

原文原文链接

前两天接到一个面试官问我vue什么程度才算做能够用于开发，之前从没遇到过相似问题。只能大体说了一些，过后以为也应该总结一下，前端vue这么火热那究竟什么才算作入门什么才算作熟练，只是我我的观点，不表明全部人，每一个人理解可能有所不一样，本次不说精通级，在我看来除了那些参与框架开发维护以及那些能对vue提出有价值意义的人以外都不能说本身精通，固然若是能本身手写一套和vue差很少甚至更胜vue的那不算精通vue了，那算精通js的大神。本次博文仅对职场中入门与熟练css

入门级须要掌握

一、生命周期

beforeCreate、created（*）、beforeUpdate、updated、beforeMount、mounted（*）、beforeDestory（*）、destoryed八个经常使用以及actived、deactived、errorCaptured三个不经常使用html

二、指令

v-on（简写@ *）、v-if/v-show(*)、v-else/v-else-if、v-bind（简写：*）、v-text/v-html/v-pre、v-slot、v-clock、v-model（*）、v-once、v-for（*）前端

三、全局api

extend、nextTick、set、delete、directive（*）、filter、component（*）、use（*）、mixin、compile、observable、versionvue

四、单页面经常使用方法和属性（*）

data、methods、props、computed、watch、directive、filter、components、name等node

五、实例经常使用方法和属性（*）

$set、$props、$el、$parent、$emit、$on、$off、$slots、$children、$refs、$attrs、$listeners、$once、$delete、$forceUpdate、$nextTick等react

六、特殊特性

key、ref、slot等jquery

七、会用两到三个ui库而且能对一些简单业务组件进行二次封装

emmm、、、大概就这么多吧，我这里所说的入门级不是说你本身私下捣鼓俩页面就算入门了，那样子的话用来找工做说实话，不会有公司用你的，若是是用于基础开发的入门级以上带星号的是必需要知道怎么用的，其他没有星号的也要了解，至少遇到场景时候知道应该怎么去查。下面再说说熟练级别吧webpack

熟练级别应该掌握的东西

一、可以正确的认知vue双向数据绑定原理（是可以认知而不是百度背一遍答案的）

在这我只粘贴一个入门级的简单demo，由于年末了暂时没时间去实现一套完整的，请谅解ios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id ="uName"></span>
<script>
    var obj={
        pwd:"1234"
    };
    //主要使用到了get和set方法，最为关键
    Object.defineProperty(obj,"userName",{
        get:function(){
            console.log('get init');
        },
        set:function(val){
            console.log("set init");
            document.getElementById("uName").innerText=val;
            document.getElementById("userName").value=val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName=event.target.value;
    }
    )
</script>
</body>
</html>

年后我会抽时间单独的针对这里进行一次代码codeing，如今先分享一个我以为讲的很棒的文章 http://www.javashuo.com/article/p-fwrfszfs-hc.html 来自于逐梦songweb

二、可以正确认知何为单向数据流、双向数据绑定

这里可能会有一些歧义，由于有些人认为既然要单向数据流为何不直接用react，每一个团队每一个人所理解的思想大概是不一样的吧，在我看来单向数据流虽然会让你的codeing更多一些时间，可是后续的维护中成本会小不少，咱们团队曾经用单向数据流实现过完整的一套ui框架，线上跑了好久没有任何问题，即便出问题，咱们可以掌握数据流向，排查也是很快很迅速，并且咱们颇有信心哪怕哪天咱们技术框架换成react或者换成angular只要本着这个思想咱们只是改一下基本的语法便可，实现一套一摸同样的ui库只是语法不一样而已。若是有大佬不认同还请留情，由于每一个人认定的思想不一样，这里我也是纠结了一些时间，决定仍是说出去，至少能够给其余人一些开发的思路

三、可以去正确认知何为mv*思想

mv*的思想就是将其中的View 的状态和行为抽象化，让咱们将视图 UI 和业务逻辑分开，其实这种编程思路不论是用不用vue对你都会有很大意义，我如今基本不会用jq一顿乱怼，吃亏过才会理解数据和view为何要分开。

四、可以本身去读一遍到三遍vue源码

为何要定在1-3这个区间呢，由于我以为第一次读可能会有不少的不可理解，等你读到第二次以后你会更加深刻，等到第三遍的时候我相信你已经能大体理解了vue的总体思路，至于再多读，对你的提高还会有，可是远远不如前三次

五、可以实现对vue项目的优化

这其中包含vue打包速度的优化、seo的优化、运行性能的优化、代码可控性优化、安全性优化。以前出过一篇文章专门讲各类优化，虽然不是讲vue的。不过相信你认真读事后而且和vue结合起来。会让你可以更好的优化本身的项目（http://www.javashuo.com/article/p-gihlpcrf-hb.html）

六、可以本身去实现或者参与一套基础框架的开发

当咱们团队在没有开发咱们这一套基础组件时候，咱们也能够熟练的去完成业务，可是真正有一些很棘手的问题好比form验证怎么写什么的等一系列问题，咱们不甚了解。当咱们写完这一套框架时候，我深深能够感受到本身参与其中是有多么大的提升，当咱们稳稳运行了接近一年的时间后我如今深深感受本身能够算做熟练vue了。不多会有vue中我会很难可以定位到问题bug，大体都能猜到问题在哪，再去细致排查便可。能够提供一下咱们框架包含的组件给你们参考：

localTable、asynctable、alert、comfirm、dialog、button、form、input、select、checkbox、radio、datepicker、datetimepicker、timepicker、localTree、asyncTree、upload、editor、transfer以及辅助的loading，其实每一项我以前都没有想过我要本身去实现，当咱们实现而且稳定运行的时候，真的很开心，这不光是提高技术更是让本身更开心的时刻

七、可以手写vue脚手架

这是个考验本身webpack的时刻，虽然vue推荐cli自动生成的，可是我更倾向于仍是要本身去写，由于这样你才能知道vue打包的流程，出现问题不至于排查好久不得果。下面分享下我本身写的，我webpack不是很熟练，若是有不妥的地方，还请大佬们指点出来

先来webpack.config:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
const argv = require('yargs-parser')(process.argv.slice(2));
const _mode = argv.mode || 'development';
const _mergeConfig = require(`./config/webpack.${_mode}`);
const merge = require('webpack-merge');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

let webpackConfig = {
    entry: ['./src/main.js'],
    output: {
        path: path.resolve(__dirname, './dist'),//输出结果
        filename: 'scripts/[name].js',
        chunkFilename: 'scripts/[id].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                    },
                    presets: ['es2015'],
                    plugins: ['transform-runtime', 'transform-object-rest-spread']
                },
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        // new CopyWebpackPlugin([{
        //     from: './src/static',
        //     to: 'static'
        // }]),
        new webpack.ProvidePlugin({
            "_global_object": [path.resolve(__dirname, "./src/static/js/event.js"), 'default']
        }),
        new HtmlWebpackPlugin(
            {
                filename:"./index.html",
                template: './src/index.html'
            }
        )
    ],
    resolve: {
        extensions: ['.vue', '.js', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            "@CoreUILib":path.resolve(__dirname,"./src/core/le-components"),
            "@util":path.resolve(__dirname,"./src/core/tool/commonUtil.js"),
            "@service":path.resolve(__dirname,"./src/service"),
            "@store":path.resolve(__dirname,"./src/store"),
            "@api":path.resolve(__dirname,"./src/api")
        }
    },
};
module.exports = merge(webpackConfig, _mergeConfig);

再来dev

const path = require("path");
const SSICompileWebpackPlugin = require('ssi-webpack-plugin');
module.exports = {
    mode:'development',
    output:{
        publicPath:'/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                    limit: 8192,
                    outputPath: 'static/images'
                }
            },
        ]
    },
    devServer: {
        inline: true, //检测文件变化，实时构建并刷新浏览器
        port: "9918",
        proxy: {
            '': {
                target: '',
                pathRewrite: {
                    
                },
                secure: false,
                changeOrigin: true
            }
        },
        //404 页面返回 index.html
        historyApiFallback: true,
    },
    plugins:[
        new SSICompileWebpackPlugin({
            localBaseDir: path.resolve(__dirname, '../src'),
            publicPath: ''
        })
    ],
    devtool:'eval-source-map'
}

最后product

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require("webpack");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    mode: 'production',
    output: {
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    },
                    {
                        loader: 'css-loader',
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                    limit: 8192,
                    outputPath: 'images',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].[chunkhash:8].css",
            chunkFilename: "css/[id].css"
        }),
        // new BundleAnalyzerPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                jquery: {
                    name: 'jquery',
                    test: /[\\/]node_modules[\\/]jquery/,
                    chunks: 'all'
                },
                venders: {
                    name: 'vender',
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all'
                },
                // 这里定义的是在分离前被引用过两次的文件，将其一同打包到common.js中，最小为30K
                common: {
                    name: "common",
                    test: /[\\/]src[\\/]/,
                    minChunks: 2,
                    minSize: 30000
                }
            }
        },
        runtimeChunk: {
            name: 'runtime'
        }
    },
    devtool: 'none'
}

不是不少，可是够我用了

八、熟练掌握vue全家桶

emmm、、、怎么说呢本次只对vue进行了总结，没有总结其他的，其实入门级就要知道router、vuex、axios等的基本使用。可是我放到了熟练级别，由于在我看来这部分对熟练掌握的来讲更为重要，这是必定要知道的，包含但不局限于这三个周边。

九、知道怎么服务端渲染

十、可以真正的去把握vue的运行、渲染过程

大概就是这么多了吧，感受仍是很多的，年前最后一天，没有什么干货，大概能够给你们当一个目录吧，替你们去掉了一些不是很经常使用的部分，欢迎各位大佬在补充补充，最后祝你们新年快乐