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

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

2019-11-10 分类:Vue.js专区 作者:管理员 阅读(1122)

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

小结

从上面三个案例中我们可以看出,Proxy方法本身是存在几个问题的,1、数组多数触发,2、对象嵌套时候只触发了一次获取方法,并没有触发set修改,下次我们试图了解Vue到底是怎么处理这些问题的

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

赞(4) 打赏

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

支付宝
微信
4

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

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

博客简介

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

精彩评论

友情链接

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

站点统计

  • 文章总数: 246 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 882 条
  • 链接总数: 16 个
  • 标签总数: 440 个
  • 注册用户: 6824 人
  • 访问总量: 8997464 次
  • 最近更新: 2020年3月29日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线