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 引发两次$(document.ready)事件
Jan 15 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS模板实现方法
Apr 03 Javascript
关于延迟加载JavaScript
May 05 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
前端开发之便利店收银系统代码
Dec 27 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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编程语言开发动态WAP页面
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python和C语言混合编程实例
2014/06/04 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
centos7之Python3.74安装教程
2019/08/15 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python 5个实用的技巧
2020/09/27 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
高中毕业自我鉴定
2013/12/13 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
期末学生评语大全
2014/04/24 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
Vue如何清空对象
2022/03/03 Vue.js
mysql幻读详解实例以及解决办法
2022/06/16 MySQL