唯品秀前端博客
当前位置: 前端开发 > Vue.js3.x尝鲜 > Vue3.0源码学习尝鲜-“别再更新了,实在是学不动了”

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">
    <!-- <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

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

赞(5) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
5

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

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时间戳完美转换成阴历农历格式

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 258 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 902 条
  • 链接总数: 17 个
  • 标签总数: 459 个
  • 注册用户: 8220 人
  • 访问总量: 9212060 次
  • 最近更新: 2020年7月3日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线