vue需要知道哪些才能算作入门以及熟练

Posted 2021-03-14 金振宗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue需要知道哪些才能算作入门以及熟练相关的知识，希望对你有一定的参考价值。

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

入门级需要掌握

1、生命周期

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

2、指令

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（*）

3、全局api

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

4、单页面常用方法和属性（*）

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

5、实例常用方法和属性（*）

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

6、特殊特性

key、ref、slot等

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

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

熟练级别应该掌握的东西

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

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

<!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，现在先分享一个我觉得讲的很棒的文章 https://www.cnblogs.com/songyao666/p/11494923.html 来自于逐梦song

2、能够正确认知何为单向数据流、双向数据绑定

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

3、能够去正确认知何为mv*思想

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

4、能够自己去读一遍到三遍vue源码

为什么要定在1-3这个区间呢，因为我觉得第一次读可能会有很多的不可理解，等你读到第二次之后你会更加深入，等到第三遍的时候我相信你已经能大致理解了vue的整体思路，至于再多读，对你的提升还会有，但是远远不如前三次

5、能够实现对vue项目的优化

这其中包含vue打包速度的优化、seo的优化、运行性能的优化、代码可控性优化、安全性优化。之前出过一篇文章专门讲各种优化，虽然不是讲vue的。不过相信你认真读过后并且和vue结合起来。会让你能够更好的优化自己的项目（https://www.cnblogs.com/jinzhenzong/p/11777065.html）

6、能够自己去实现或者参与一套基础框架的开发

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

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

7、能够手写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\'
}

不是很多，但是够我用了

8、熟练掌握vue全家桶

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

9、知道怎么服务端渲染

10、能够真正的去把握vue的运行、渲染过程

大概就是这么多了吧，感觉还是不少的，年前最后一天，没有什么干货，大概可以给大家当一个目录吧，替大家去掉了一些不是很常用的部分，欢迎各位大佬在补充补充，最后祝大家新年快乐

以上是关于vue需要知道哪些才能算作入门以及熟练的主要内容，如果未能解决你的问题，请参考以下文章

黑客基本入门知识

黑客要具备哪些知识？

北京web前端培训机构，出来好找工作吗，需要学哪些内容？

Java都需要那些技术？

怎样熟练使用一项技术