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

2019-11-10 分类：Vue.js专区作者：管理员阅读（768）

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

示例

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { reactive, computed, effect, createApp } = Vue
const App = {
template: `
<div id="box">
<button @click="add">{{ state.count }}</button>
<p>我是计算属性后得到的值{{ state.double }}</p>
</div>
`,
setup() { // 生命周期，类似于created或者beforeCreate
const state = reactive({
// reactive就是定义data
count: 0,
double:computed(()=>{
return state.count * 2
})
})
function add() {
state.count++
}
effect(() => {
// effect是数据变化时候，响应式副本,一上来就会初始化打印一次
// 也就是说，在一次set或者get时候，都能触发effect,该方法不接收任何参数
// 这意味着如果你需要监听一个数据变化时候，需要手动记录处理当前新值旧值问题
console.log('count改变', state.count);
})
return {
state,
add
}
}
}
createApp().mount(App, '#app')
</script>
</body>

关于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