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'
}