Vue3.0源码学习尝鲜-“别再更新了，实在是学不动了”

2019-11-10 分类：Vue.js3.x尝鲜作者：管理员阅读（2211）百度已收录

距离vue3.0源代码Pre-Alpha版本开源已经一月有余，但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。不知道小伙伴儿有没有观察，v3的语法和v2相比，变化特别大(很多人都说像极了React)，当然，作者尤雨溪说了，vue3会有一个兼容v2语法的版本，还有个全新版本，那很显然，面对很多装逼族追求达到更快、更小、更易于维护来说，实际项目中兼容v2的过度版本应该以后用的人不会很多，全新vue3是你不可避免要学习的新知识技能。

2.x生命周期选项和Composition API之间的映射

beforeCreate ->使用 setup()
created ->使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<template>
<div class="hello">

<el-button type="primary" size='mini' @click="countReduce">-</el-button>
<span>{{count}}</span>
<el-button type="primary" size='mini' @click="countAdd">+</el-button>

<br/>
<br/>
<inject />
</div>
</template>

<script>
import { setup, reactive, computed, toRefs,onMounted, onUpdated, onUnmounted, provide, ref } from '@vue/composition-api'
import inject from './inject'
export default {
name: 'HelloWorld',
components: {
inject
},
created () {
console.log('初始化created',2);
},
mounted () {
console.log('初始化mounted',3);
},
setup(props, context) {
console.log('初始化setup',1);
// 生命周期，setup 函数会在vue2.x的beforeCreate 之后、created 之前执行
// props 中定义当前组件允许外界传递过来的参数名称, context相当于vue2.x中的this
onMounted(()=>{
console.log('初始化onMounted',4)
console.log('<<<context',props,context) //在 setup() 函数中无法访问到 this，应该用context获取外部上下文数据
})
let state = reactive({
// reactive就是定义data
count: 0
// double: computed(() => state.count * 2)
})

//方法
let countReduce = ()=>{
state.count--
}
let countAdd = ()=>{
state.count++
}
const countData = ref(0);
countData.value = state.count
provide('sum', countData); //向子组件传值

return {
...toRefs(state), //...为浅拷贝，会影响数据响应式，通过toRefs可变为响应式数据
countReduce,
countAdd
}
}
}
</script>

<style scoped>
span{
padding:0 10px
}
</style>

有关脚手架上用法体验可以看看我的Vue3.x_Beta，因目前还不是正式版，所以部分API会有更改甚至废弃，需要值得注意下

关于Vue3.x的Proxy核心Api

普通对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let obj = {
name: '唯品秀'
}
let o = new Proxy(obj, {
get(target, key) {
console.log('获取值', key)
return Reflect.get(target, key)
},
set(target, key, val) {
console.log('修改值', key)
return Reflect.set(target, key, val)
},
})
o.name = '百度'

// 运行结果
修改值 name

普通数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

let obj = [0,1,2]

let o = new Proxy(obj, {
get(target, key) {
console.log('获取值', key)
return Reflect.get(target, key)
},
set(target, key, val) {
console.log('修改值', key)
return Reflect.set(target, key, val)
},
})

o.push(100)
console.log(o)

// 运行结果
获取值 push
获取值 length
修改值 3
修改值 length
Proxy {0: 0, 1: 1, 2: 2, 3: 100}

对象嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let obj = {name:'北京', location:{city:'上海'}}

let o = new Proxy(obj, {
get(target, key) {
console.log('获取值', key)
return Reflect.get(target, key)
},
set(target, key, val) {
console.log('修改值', key)
return Reflect.set(target, key, val)
},
})

o.location.city = '上海'

// 结果
获取值 location