Vue3 响应式侦听与计算的实现


Posted in Javascript onNovember 11, 2020

响应式侦听和计算

有时我们需要依赖于其他状态的状态——在 Vue 中,这是用组件 计算属性 处理的,以直接创建计算值,我们可以使用 computed 方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

我们先来看看一个简单的例子,关于计算值的方式,同样我们在 src/TemplateM.vue 写下如下代码:

<template>
 <div class="template-m-wrap">
  count ---> {{count}}
  plusOne ---> {{plusOne}}
 </div>
</template>
<script>
import { ref, defineComponent, reactive, computed } from "vue";
export default defineComponent({
 name: 'TemplateM',
 setup() {
  let count = ref(2)
  let plusOne = computed(() => {
   return count.value++
  })
  console.log(plusOne.value)
  return {
   count,
   plusOne
  }
 }
})
</script>

访问链接效果如下:

Vue3 响应式侦听与计算的实现

我们可以看到 plusOne 没有值。或者,它可以使用一个带有 getset 函数的对象来创建一个可写的 ref 对象。

<template>
 <div class="template-m-wrap">
  count ---> {{ count }} plusOne ---> {{ plusOne }}
 </div>
</template>
<script>
import { ref, defineComponent, reactive, computed } from "vue";
export default defineComponent({
 name: "TemplateM",
 setup() {
  let count = ref(2);
  let plusOne = computed({
   get() {
    return count.value++;
   },
   set(val) {
    count.value = val;
   },
  });
  plusOne.value = 1;
  console.log(count.value); // 0
  return {
   count,
   plusOne,
  };
 },
});
</script>

同样访问效果如下:

Vue3 响应式侦听与计算的实现

watchEffect

为了根据响应式状态 自动应用重新应用 副作用,我们可以使用 watchEffect 方法。它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

<template>
 <div class="template-m-wrap">
  count ---> {{ count }}
 </div>
</template>
<script>
import { ref, defineComponent, reactive, computed, watchEffect } from "vue";
export default defineComponent({
 name: "TemplateM",
 setup() {
  let count = ref(2);
  watchEffect(() => {
   console.log(count.value)
  })
  setTimeout(() => {
   count.value++
  }, 1000)
  return {
   count,
  };
 },
});
</script>

查看效果如下:

Vue3 响应式侦听与计算的实现

停止侦听

watchEffect 在组件的 setup() 函数或 生命周期钩子 被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。

在一些情况下,也可以显式调用返回值以停止侦听:

<template>
 <div class="template-m-wrap">
  count ---> {{ count }}
 </div>
</template>
<script>
import { ref, defineComponent, reactive, computed, watchEffect } from "vue";
export default defineComponent({
 name: "TemplateM",
 setup() {
  let count = ref(2);
  const stopWatch = watchEffect(() => {
   console.log(count.value)
  })
  stopWatch()
  setTimeout(() => {
   count.value++
  }, 1000)
  return {
   count,
  };
 },
});
</script>

查看效果如下:

Vue3 响应式侦听与计算的实现

副作用刷新时机

Vue 的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中,组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时,默认情况下,会在所有的组件 update 执行:

<template>
 <div>{{ count }}</div>
</template>

<script>
 export default {
  setup() {
   const count = ref(0)

   watchEffect(() => {
    console.log(count.value)
   })

   return {
    count
   }
  }
 }
</script>

在这个例子中:

  • count 会在初始运行时同步打印出来
  • 更改 count 时,将在组件 更新前 执行副作用。

如果需要在组件更新 重新运行侦听器副作用,我们可以传递带有 flush 选项的附加 options 对象 (默认为 'pre' ):

// fire before component updates
watchEffect(
 () => {
  /* ... */
 },
 {
  flush: 'post'
 }
)

flush 选项还接受 sync ,这将强制效果始终同步触发。然而,这是低效的,应该很少需要。

侦听器调试

onTrackonTrigger 选项可用于调试侦听器的行为。

  • onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用。
  • onTrigger 将在依赖项变更导致副作用被触发时被调用。

这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger 语句来检查依赖关系:

watchEffect(
 () => {
  /* 副作用 */
 },
 {
  onTrigger(e) {
   debugger
  }
 }
)

onTrackonTrigger 只能在开发模式下工作。

watch

watch API 完全等同于组件侦听器 property。 watch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调。

与watchEffect 比较, watch 允许我们:

  • 懒执行副作用;
  • 更具体地说明什么状态应该触发侦听器重新运行;
  • 访问侦听状态变化前后的值。

 侦听单个数据源

侦听器数据源可以是返回值的 getter 函数,也可以直接是 ref

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
 () => state.count,
 (count, prevCount) => {
  /* ... */
 }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
 /* ... */
})

到此这篇关于Vue3 响应式侦听与计算的实现的文章就介绍到这了,更多相关Vue3 响应式侦听与计算内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery表格内容过滤的实现方法
Jul 05 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 #Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 #Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 #Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js实现网页收藏功能
2015/12/17 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python使用建议技巧分享(三)
2020/08/18 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
活动总结的格式
2014/05/07 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
解决Redis启动警告问题
2022/02/24 Redis