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

2019-11-10 分类：Vue.js3.x尝鲜作者：管理员阅读（1647）

距离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

小结

从上面三个案例中我们可以看出，Proxy方法本身是存在几个问题的，1、数组多数触发，2、对象嵌套时候只触发了一次获取方法，并没有触发set修改。本文相关vue.js3.x相关教程官方3.xAPI，个人整理3.x API

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏

标签：

上一篇：关于js深拷贝与浅拷贝的区别，实现深拷贝的几种方法

下一篇：css3区间（范围）选择器骚操作用法分享

你可能感兴趣

共 0 条评论关于"Vue3.0源码学习尝鲜-“别再更新了，实在是学不动了”"

点击这里取消回复。

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码

江吟辞（1周前 (06-29)）
好难坚持啊，我还没毕业，不知道啥时候才能像您一样厉害
评：碎言碎语
和我、恋爱吧（1周前 (06-29)）
怎么没见你更新呢，比较忙吗
评：碎言碎语
游离（1周前 (06-29)）
站主，你好！请教一下，前台的pc 端和移动端，你是怎么实现响应式的呢？媒体查询的同时写两套样...
评：碎言碎语
권지용（1周前 (06-29)）
最近在学习前端，看了博主很多文章，收益匪浅，感谢大佬
评：碎言碎语
白君也（1周前 (06-28)）
哇自己制作的吗在哪学的技术啊好厉害
评：碎言碎语
管理员（3周前 (06-16)）
时间区间问题，因为目前是2020年，你所选不可能超出这个时间吧，当然，代码是根据你的业务来，...
评：js时间戳完美转换成阴历农历格式