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需要知道哪些才能算作入门以及熟练的更多相关文章
- 转： Vue.js——60分钟组件快速入门（上篇）
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- 如何解释vue的生命周期才能令面试官满意？
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- 三、vue前后端交互（轻松入门vue）
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- Vue.js——60分钟组件快速入门
一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...
- UI设计小白怎样学才能快速入门？
最近有很多同学问我,UI小白有什么捷径可以快速入门?其实我想说设计这门学科没有什么捷径,真的只有多学.多看.多练.多想.多做. 1.先学软件 如果你是小白,软件也不会用,那就先学软件,从PS开始,先看 ...
- vue.js最最最基础的入门案例
打算自己写一点vue.js从入门到进阶的笔记,方便一些新手从头开始开发的时候,可以参考一下. 写的或许是很简单的文章,提供给新手参考.暂时都是一些入门级别的. 以后会慢慢的加深,进阶,写出一些更好,更 ...
- 【转】Vue.js——60分钟组件快速入门（上篇）
文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的 ...
随机推荐
- Java 趣事之 a=a++ 和 a=++a（转）
转自:https://blog.csdn.net/LovePluto/article/details/81062176 如果问 a++ 和 ++a 的区别,估计很多都能回答上来.a++ 是先取 a 的 ...
- CF1169(div2)题解报告
CF1169(div2)题解报告 A 不管 B 首先可以证明,如果存在解 其中必定有一个数的出现次数大于等于\(\frac{m}{2}\) 暴力枚举所有出现次数大于等于$\frac{m}{2} $的数 ...
- dotnet 如何在 Mock 模拟 Func 判断调用次数
在 dotnet 程序有很好用的 Mock 框架,可以用来模拟各种接口和抽象类,可以用来测试某个注入接口的被调用次数和被调用时传入参数.本文告诉大家如何在 Mock 里面模拟一个 Func 同时模拟返 ...
- codeforces 600E E. Lomsat gelral （线段树合并）
codeforces 600E E. Lomsat gelral 传送门:https://codeforces.com/contest/600/problem/E 题意: 给你一颗n个节点的树,树上的 ...
- 2019牛客多校第二场 A Eddy Walker（概率推公式）
2019牛客多校第二场 A Eddy Walker(概率推公式) 传送门:https://ac.nowcoder.com/acm/contest/882/A 题意: 给你一个长度为n的环,标号从0~n ...
- freemarker<三>
前两篇博客介绍了freemaker是什么以及简单的语法规则,下面我们通过实现一个demo来看在实际应用中如何使用freemaker,本篇博客主要介绍freemaker与spring的整合. 需要的Ja ...
- vim 方式快捷编辑代码
说明 **I: ** 行首插入 **a: ** 追加 **A: ** 行尾插入 **R: ** 替换文字 **v: ** 选择 **ctrl-v: ** 选择举行区域 **x: ** 删除 **dd: ...
- Excel读取方式优化（浅谈对规律的认知）
相信大家都接触过对Excel的读取,今天突发奇想,想将自己的一小段经历分享出来.灵活识别列名并将其存到对象数组中. 固定形式的Excel列的读取: 源于我第一次操作Excel,将列名对应成table中 ...
- 运维必会之MySQL篇
第一章 SQL语句 语言分类 1)DDL(data definition language)数据定义语言(create.alter.drop)管理基础数据例如:库.表 #<==运维要熟练, ...
- Mac重装操作系统系统
恢复出厂设置 第一种 1.开机 2.commond + R,进入recover模式. 3.选择磁盘工具 4.显示所有设备 5.抹掉硬盘.格式选择 (1):Mac OS 扩展(日志式). (2): Ma ...