目录
副作用函数
指的是会产生副作用的函数;
JavaScript let val = 1;//全局变量 function effect() { val = 2; //修改全局变量,产生副作用 }
当effect
函数执行时,对全局变量val
产生了副作用,改变了其值。
响应式数据
const obj = {text:"hello world"}; function effect(){ //effect函数的执行读取obj.text document.body.innerHTML = obj.text; } obj.text = "hello Vue.js";
上面的副作用函数effect
会设置body
的innerText
属性,其值为obj.text
,第6行代码又修改了text
的值,期望副作用函数重新执行,如果能实现这个目标,那么对于obj
就是响应式数据。
如何才能让obj
变成响应式数据呢?通过观察我们发现了两点线索:
▪当副作用函数effect
执行时,会触发字段obj.text
的读取操作;
▪当修改obj.text
的值时,会触发字段obj.text
的设置操作;
如果能够拦截obj
对象的读取和设置操作,事情就迎刃而解了。当读取字段obj.text
时,我们可以把副作用函数存储到一个“桶”中。
当设置obj.text时,再把副作用函数effect从“桶”里取出并执行。
按照上面的思路,使用Proxy来实现:
//创建一个副作用函数的桶 const bucket = new Set(); //原始数据 const data = { text: "hello world" }; //对原始数据的代理 const obj = new Proxy(data, { //拦截读取操作 get(traget, key) { //将副作用函数effect添加到副作用函数的桶中 bucket.add(effect); //返回属性值 return traget[key]; }, //拦截设置操作 set(traget, key, newValue) { //设置属性值 traget[key] = newValue; //把副作用函数从桶中取出来并执行 bucket.forEach((fn) => fn()); //返回true代表设置操作成功 return true; }, });
测试用例:
function effect() { document.body.innerHTML = obj.text; } effect(); setTimeout(() => { obj.text = "hello vue3"; }, 1000);
目前的实现数据响应式还存在很多缺陷,比如副作用函数的名字是写死的,后续再完善响应式系统。
以上就是Vue3中是如何实现数据响应式的详细内容,更多关于Vue3数据响应式的资料请关注其它相关文章!