程序猿的庚子年,到底有多难?
虽然不知道“庚子年必有大乱”这事可不可信,但今年不论是公司还是个人,大家都不容易。我身边也一直能听到坏消息,很多以前的同事、认识的朋友,工作上都不顺利。有不发奖金的,有快被优化的,惨的是有年后就闲在家里,始终没等来机会的。
就在前两天,一位久未联系的朋友找我吃饭,一开口就聊起了他被辞退的事。以往他能凭借经验、人脉和能说会道在岗位上牢牢扎根,但今年公司本身也在挣扎求活,他对新技术的不敏感就立刻成为了公司发展显而易见的短板,被换掉实在是理所当然。
现在技术发展的太过迅速,别说一年不学习,只要一个月没有接触新知识,就已经在落后。而前端今年要关注的就是Vue3.0的发布,现在Vue3已经推出了BETA版,8月就要推出正式版。
恰好我看到了《web前端会客厅》节目,由winter、大圣越洋连线了“Vue之父”尤雨溪,深度分享Vue3.0的开发思路,节目中会现场秀代码,展示Vue3.0的全新开发体验。
体验vue3的三种姿势 Composition Api Fragment Teleport suspense 尺寸 内部架构 响应式系统独立 自定义渲染器api
vue-cli 官方的webpack-preview vite
详细步骤:
# vue-cli
npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve
# webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install
npm run dev
# vite
npm install -g create-vite-app
01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev
Vite:
大致的原理就是拦截import发出的http请求,返回浏览器的代码,也保留了import语法,让浏览器自己去处理依赖 script type module 支持import;
让浏览器处理es6 import的活,好处就是当前页面引用多少,编译多少,项目越大优势越大。
静态提升,节点结构根据v-if和v-for切分出block,block内部节点结构石不变的,我们直接把动态节点维护在一个数组里即可。
<template>
<div>
<h1>Vue2 {{ items.length }} Components</h1>
<p>{{ action }} took {{time}}ms.</p>
<button @click="shuffle">shuffle</button>
<ul class="col-row" v-for="item in items" :key="item.id">
<li class="col-md-1" >kkb</li>
<li class="col-md-1" >kkb</li>
<li class="col-md-1" >kkb</li>
<li class="col-md-1" >{{item.label}}</li>
</ul>
</div>
</template>
<script>
import {shuffle} from 'lodash'
var total = 500
var items = []
for (var i = 0; i < total; i++) {
items.push({
id: i,
label: String(Math.random()).slice(0, 5)
})
}
let s = window.performance.now()
export default{
data(){
return {
total: total,
time: 0,
action: 'Render',
items: items,
selected: null,
actions:['删除','更新']
}
},
mounted(){
this.time = window.performance.now() - s
},
methods: {
shuffle(){
this.action = 'shuffle'
this.items = shuffle(this.items)
let s = window.performance.now()
this.$nextTick(()=>{
this.time = window.performance.now() - s
})
}
}
}
</script>
// vue2 12个进程,300个并发,压10秒
➜ ~ wrk -t12 -c400 -d10s http://localhost:9092/
Running 10s test @ http://localhost:9092/
12 threads and 400 connections
^[[A Thread Stats Avg Stdev Max +/- Stdev
Latency 1.48s 442.21ms 1.80s 89.88%
Req/Sec 24.62 20.56 88.00 59.73%
1319 requests in 10.10s, 173.65MB read
Socket errors: connect 157, read 183, write 0, timeout 74
Requests/sec: 130.58
Transfer/sec: 17.19MB
// vue3 12个进程,300个并发,压10秒
➜ ~ wrk -t12 -c400 -d10s http://localhost:9093/
Running 10s test @ http://localhost:9093/
12 threads and 400 connections
Thread Stats Avg Stdev Max +/- Stdev
Latency 770.76ms 165.36ms 1.89s 89.11%
Req/Sec 63.99 56.81 252.00 74.34%
2912 requests in 10.10s, 411.12MB read
Socket errors: connect 157, read 31, write 0, timeout 0
Requests/sec: 288.21
Transfer/sec: 40.69MB
compostion api实战 fragment 组件递归 响应式骚操作 custom renderer自定义渲染器实战 用户答疑+八卦
reactivity和vuex的关系 class based api被干掉的心路历程 vue3设计的过程 小右如何学习的
相关文章