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中on()方法用法实例详解
Feb 06 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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
PHP4之真OO
2006/10/09 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
PHP crc32()函数讲解
2019/02/14 PHP
PHP7新功能总结
2019/04/14 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python fabric使用笔记
2015/05/09 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python读取mysql数据绘制条形图
2020/03/25 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
婚前协议书
2014/04/15 职场文书
户籍证明书标准模板
2014/09/10 职场文书
婚宴来宾致辞
2015/07/28 职场文书
全民创业工作总结
2015/08/13 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫