c2c的网站名称和网址,深圳设计公司办公室,深南花园裙楼+网站建设,请人做网站设计的方案防抖就是防止在input 框中每输入一个字符就要向服务器请求一次#xff0c;只要在用户输入完成过一段时间再读取用户输入的内容就能解决这个问题#xff0c;减小服务器的压力。 1. 自定义ref是一个函数#xff0c;可以接受参数。
比如我们自定义一个myRef#xff1a;
setu…防抖就是防止在input 框中每输入一个字符就要向服务器请求一次只要在用户输入完成过一段时间再读取用户输入的内容就能解决这个问题减小服务器的压力。 1. 自定义ref是一个函数可以接受参数。
比如我们自定义一个myRef
setup() {let text myRef(初始化);// 配置自定义的myReffunction myRef(value) {}return { text };
}, 2. 在这个函数中我们有一个返回值这个返回值是customRef 函数。
在使用customRef 函数之前我们需要先对其进行引入 import { customRef } from vue; setup() {let text myRef(初始化);function myRef(value) {return customRef()}return { text };
}, 3. customRef 函数的参数是一个函数。
该函数中又返回一个对象。
对象中有get函数和set函数。
setup() {let text myRef(初始化);function myRef(value) {return customRef(() {return {get() { },set() { }}})}return { text };
}, 4. 当我们在模板中读取使用自定义ref 定义的数据时就会调用get 函数修改数据时就会调用set 函数。原理和Proxy 对象中的get、set 差不多。
我们将get 函数中的返回值作为解析模板后数据的值。
而set 函数中参数newValue为value修改后的值我们需要将新的值赋值给传入的value值才能实现页面的响应式。
setup() {let text myRef(初始化);function myRef(value) {return customRef(() {return {// 读取value 调用getget() {return value;},// 修改value 调用setset(newValue) {value newValue;}}})}return { text };
}, 5. 以上代码实现后其实并没有真正实现响应式。至少说我们改变text数据页面其他用到text的地方并没有改变。 原因就在于我们改变value值后触发get 函数后并没有去重新解析模板set 也没有收到解析模板的命令。
因此customRef 函数中又有两个参数track 函数和trigger 函数。
track函数用于通知vue追踪value的变化trigger函数用于通知vue重新解析模板。
setup() {let text myRef(初始化);function myRef(value) {return customRef((track, trigger) {return {get() {track(); // 通知vue追踪value的变化return value;},set(newValue) {value newValue;trigger(); // 通知vue重新解析模板}}})}return { text };
},
6. 最后我们加上定时器就能实现防抖的效果。
setup() {let text myRef(初始化, 1000);function myRef(value, delay) {let timer; // 定时器return customRef((track, trigger) {return {get() {track();return value;},set(newValue) {// 如果定时器已经开启了就清除当前定时器新开一个定时器clearTimeout(timer); timer setTimeout(() {value newValue;trigger();}, delay);},};});}return { text };
},
