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的运行、渲染过程

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

原文地址：https://www.cnblogs.com/jinzhenzong/p/12228718.html

时间： 2024-11-09 18:16:08

vue需要知道哪些才能算作入门以及熟练的相关文章

转： Vue.js——60分钟组件快速入门（上篇）

转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或

（译文）A/B测试从入门到熟练指南

(译文)A/B测试从入门到熟练指南 原文地址: http://www.smashingmagazine.com/2014/07/11/roadmap-to-becoming-an-a-b-testing-expert/ A/B测试,也叫做分离测试(也有叫做对比测试的),这是一种针对观察页面布局相似的两个不同版本着陆页的转化率, 来进行对比的点蚀测试方法(抽样测试法). A/B测试是通过观察和测试用户使用过程,找到最快捷引导用户到目标页面的着陆页版本.比如注册或者订阅网站信息的引导页面. 测试的内

SQL，从入门到熟练

本文是<如何七周成为数据分析师>的第十篇教程,如果想要了解写作初衷,可以先行阅读七周指南.温馨提示:如果您已经熟悉数据库,大可不必再看这篇文章,或只挑选部分. 在<写给新人的数据库指南>,我们已经成功的安装数据库,并且导入数据,今天进入SQL实战练习.SQL是数据库的查询语言,语法结构简单,相信本文会让你从入门到熟练. 掌握SQL后,不论你是产品经理.运营人员或者数据分析师,都会让你分析的能力边界无限拓展.别犹豫了,赶快上车吧! 以下的语句都在SequelPro的Query页面运行

Vue.js——60分钟组件快速入门（上篇）

组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-tut

Vue.js&mdash;&mdash;vue-router 60分钟快速入门

概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue

Vue.js&mdash;&mdash;60分钟组件快速入门（上篇）

组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! 组件单向绑定 组件双向绑定 组件单次绑定 Page Demo GitHub Source 由于组件的篇幅较大,我将会把组

Vue.js——60分钟组件快速入门

一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-t

Vue 开发自定义插件学习记录 -- 入门

首先,你需要了解插件实现的基本原理 插件基本原理: 我们都知道用Vue.use注册插件,那你知道Vue.use(plugin) 干了什么? 以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数: {Object | Function} plugin 用法: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法. install 方法调用时,会将 Vue 作为参数传入. 该方法需要在调用

【转】Vue.js——60分钟组件快速入门（上篇）

文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在G