| Vue3 ref底层实现原理是什么 | 您所在的位置：网站首页 › props什么意思vue › Vue3 ref底层实现原理是什么 |
|
Vue3 ref底层实现原理是什么
发布时间：2023-04-25 15:15:48
来源：亿速云
阅读：103
作者：iii
栏目：开发技术
这篇文章主要讲解了“Vue3 ref底层实现原理是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3 ref底层实现原理是什么”吧！ 源码解析既然各方说法不一，那首先想到的就是直接去看vue3官方源码不就好了，看别人不如自己实际动起来 通过node_modules依赖文件找到vue中实现ref的源码 源码如下： 为方便理解，把相关涉及到的源码以及代码含义加上注释 function ref(value) { // ref方法 return createRef(value, false); } function shallowRef(value) { // 浅层ref return createRef(value, true); } function createRef(rawValue, shallow) { // 创建ref if (isRef(rawValue)) { // 判断是否为ref return rawValue; } return new RefImpl(rawValue, shallow); // 返回RefImpl实例对象 } class RefImpl { constructor(value, __v_isShallow) { // 值，是否浅层ref this.__v_isShallow = __v_isShallow; this.dep = undefined; this.__v_isRef = true; this._rawValue = __v_isShallow ? value : toRaw(value); this._value = __v_isShallow ? value : toReactive(value); // 判断是否为浅层ref，否则调用toReactive，方法在下面 } get value() { // getter方法 获取value值 trackRefValue(this); return this._value; } set value(newVal) { // setter方法 设置value值 const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal); newVal = useDirectValue ? newVal : toRaw(newVal); if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal; this._value = useDirectValue ? newVal : toReactive(newVal); // 在value值更新时进行判断是否为浅层ref，否则调用toReactive triggerRefValue(this, newVal); } } } const toReactive = (value) => isObject(value) ? reactive(value) : value; // 是否为对象，如果是则调用reactive经过一番阅读理解，我们只需抓取关键信息即可 可以看到通过 ref(1) 的值在 RefImpl 类中为 _value ，然后使用class中的get和set语法糖对该value值进行相应的操作，获取和赋值 再判断为对象时才使用reactive()方法 实践操作从源码上看，我们看到了，使用了class的get和set来对这个value值进行操作，那么我们自己动手实践一下，看看怎么实现 这里把源码的_value的口头约定私有属性形式改为es9新增加的#value形式 class RefImpl { #value = '' // #value 私有属性 constructor(value) { this.#value = value } get value() { console.log('触发获取', this.#value) return this.#value } set value(newVal) { console.log('触发更新', newVal) this.#value = newVal } } function ref(value) { return new RefImpl(value) } const test = ref('我是小涛测试') setTimeout(() => { test.value = '我设置了值' }, 2000)class类的get和set是什么到了这里，可以确定ref是使用class里的get/set进行数据劫持和更新的 而这个get/set实际是语法糖，本质是js的特性，是劫持property（属性）的一种方式 对象内分为数据属性和访问器属性，访问器属性不包含数据，是一对get和set方法 Getter 属性访问器（accessor）和 Setter 属性修改器（mutator） 结论综上所述 所以一刚开始说的使用Object.defineProperty说法并不正确，因为Object.defineProperty()可以用来给修改对象属性，然后使用到了getter/setter Object.defineProperty() 所以使用了class的说法也并不正确，也是在对象内使用访问器属性，使用到了getter/setter这两个方法 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter。 在对象内也可以使用访问器属性 const test = { _value: '', get value() { console.log('触发获取', this._value) return this._value }, set value(newVal) { console.log('触发更新', newVal) this._value = newVal } }感谢各位的阅读，以上就是“Vue3 ref底层实现原理是什么”的内容了，经过本文的学习后，相信大家对Vue3 ref底层实现原理是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！ 推荐阅读： Vue 3升级方法是什么 怎么掌握Vue3完整知识体系免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 vue3 ref 上一篇新闻：怎么使用vue监听是否切屏和开启小窗 下一篇新闻：vue3页面加载完成后怎么获取宽度、高度 猜你喜欢 pandas实现to_sql将DataFrame保存到数据库中 python如何实现控制COM口 python中怎么使用pandas实现时序处理 在linux下实现 python 监控usb设备信号 django-allauth入门学习和使用详解 python使用mitmproxy抓取浏览器请求的方法 怎么在Python中利用线程接收串口数据 怎么在Windows中使用Python获取USB PID&VID 在windows下使用python进行串口通讯的方法 Python中字符串格式化的方法有哪些 |
| CopyRight 2018-2019 实验室设备网 版权所有 |