距离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">
<!-- <h1 >简易demo </h1 > -->
<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
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"Vue3.0源码学习尝鲜-“别再更新了,实在是学不动了”"
最新评论