唯品秀前端博客

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

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(8) 打赏
标签:

上一篇:

下一篇:

相关推荐

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

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏