文章 2022-09-27 来自:开发者社区

【Vue3从零开始-第六章】6-2 ref和reactive响应式引用的用法

前言在上一篇的文章中,我们了解了vue的compositionAPI及setup函数的使用,本章节中将会继续学习compositionAPI中的知识点ref和reactive响应式引用的用法。开始之前上篇文章中学习setup函数的时候,我们知道了可以通过setup函数返回数据值给模板上渲染,那么如果想要修改setup函数中的数据值,还能很好的渲染出来嘛?<script> cons...

【Vue3从零开始-第六章】6-2 ref和reactive响应式引用的用法
文章 2022-09-26 来自:开发者社区

敲黑板,划重点!!!Vue3.0响应式实现原理 —— proxy()

1. 先来回顾一下Vue2.0的响应式原理通过 Object.defineProperty() 实现数据劫持存在的问题针对对象:新增属性,删除属性,界面不更新针对数组:通过下标修改数组,界面不会自动更新<!DOCTYPE html> <html> <head> <title>模拟vue2.0</title> ...

敲黑板,划重点!!!Vue3.0响应式实现原理 —— proxy()
文章 2022-09-25 来自:开发者社区

通过Vue3探索响应式数据原理(Proxy与Reflect)

首先上一段代码:const obj = { age: 1 } // 定义一个对象 let age = obj.age // 将对象的age属性赋值给一个变量 obj.age++ // 对象的age属性发生了变化 console.log(`age=${age}`, obj); // 输出结果: age = 1 {age: 2}在obj的age属性变化时,变量age如果也随之变化,通常就需要定义一.....

通过Vue3探索响应式数据原理(Proxy与Reflect)
文章 2022-09-05 来自:开发者社区

Vue2.js给对象动态添加响应式属性

文档原文说property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的不过发现一个奇怪的现象,userInfo.age 并没有在data 中定义,当点击按钮更新的时候,视图中的userInfo.age 也发生了变化<template> <div class=""> <div class="userinfo"> nam...

文章 2022-08-22 来自:开发者社区

vue2数据响应式原理——依赖收集和发布订阅

前言本系列查阅顺序:[vue2数据响应式原理——数据劫持(初始篇)][vue2数据响应式原理——数据劫持(对象篇)][vue2数据响应式原理——数据劫持(数组篇)][vue2数据响应式原理——依赖收集和发布订阅]前几篇我们已经研究过了数据劫持,并多次提到依赖这个词,这一篇我们就将针对依赖来进行深入探讨:什么是依赖,以及收集依赖和发布订阅。收集依赖,发布订阅依赖是谁?需要用到数据的地方成为依赖!前....

vue2数据响应式原理——依赖收集和发布订阅
文章 2022-08-22 来自:开发者社区

Vue3源码学习(3):reactive + effect + track + trigger 实现响应式系统

回顾上篇文章,我们实现了 reactive 方法,它内部采用了 Proxy 来实现对象属性操作的拦截。这是实现响应式系统的前提,我们必须先拦截到用户对属性的访问,之后才能做依赖收集;再拦截到用户对属性的修改,才能做派发更新。effect 方法基本用法如果之前了解过 Vue2 的响应式原理,那么对于 Watcher 你一定不会陌生。它是 Vue2 响应式系统中的核心之一,无论是响应式数据,还是 c....

Vue3源码学习(3):reactive + effect + track + trigger 实现响应式系统
文章 2022-08-21 来自:开发者社区

Vue3源码学习(2):响应式API reactive 的实现

Vue2 和 Vue3 响应式的区别Vue2 的响应式,利用了 ES5 的一个 API :Object.defineProperty。它的基本用法是这样的:const obj = {name: 'kw'} Object.defineProperty(obj, key, { get() { return obj[key] }, set(val) { ...

Vue3源码学习(2):响应式API reactive 的实现
文章 2022-08-18 来自:开发者社区

探索 Vue.js 响应式原理

提到“响应式”三个字,大家立刻想到啥?响应式布局?响应式编程?从字面意思可以看出,具有“响应式”特征的事物会根据条件变化,使得目标自动作出对应变化。比如在“响应式布局”中,页面根据不同设备尺寸自动显示不同样式。Vue.js 中的响应式也是一样,当数据发生变化后,使用到该数据的视图也会相应进行自动更新。接下来我根据个人理解,和大家一起探索下 Vue.js 中的响应式原理,如有错误,欢迎指点~~一、....

探索 Vue.js 响应式原理
问答 2022-08-11 来自:开发者社区

vue2中的数据响应式是如何根据数据类型来做不同处理的啊?

vue2中的数据响应式是如何根据数据类型来做不同处理的啊?

文章 2022-08-09 来自:开发者社区

前端-vue基础7-数据响应式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...

前端-vue基础7-数据响应式

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注