唯品秀前端博客
当前位置: 前端开发 > 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前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

最近更新

随机文章

热门标签

caniuse兼容性 阿里CDN CDN大全 犸良动画 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新

精彩评论

友情链接

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

站点统计

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

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息