一.computed

comdwd用法主要是：当一些属性需要依赖一个状态的时候，可以使用computed属性处理

Options API中 computed主要是配置的选项
Compostion API中可以直接在setup函数中编写

具体用法：

接受一个getter函数直接返回一个ref对象，代码实现：

<template><div><h1>{{Info}}</h1><button @click="updataInfo">修改</button></div>
</template>
<script>
import { reactive, toRefs,ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'export default {setup(){const obj =reactive({name:"lisi",age:18})let {name,age}=toRefs(obj);const Info = computed(()=>name.value+""+age.value)const updataInfo=()=>{name.value="zhengyin" age.value="20";}return{updataInfo,Info}}}
</script>
<style lang="scss" scoped>
</style>

2. 传入一个对象，定义get,set方法

<template><div><h1>{{Info}}</h1><button @click="updataInfo">修改</button></div>
</template><script>
import { reactive, toRefs,ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'export default {setup(){const obj =reactive({name:"lisi",age:18})let {name,age}=toRefs(obj);const Info = computed({get:()=>name.value+""+age.value,set:(newValue)=>{const names = newValue.split(" ")name.value = names[0];age.value=names[1];}})const updataInfo=()=>{name.value="zhengyin" age.value="20";}return{updataInfo,Info}}}
</script><style lang="scss" scoped></style>

二，侦听数据的变化

watch主要用来侦听data，props的数据变化，而执行一些事情

watchEffect: 用于自动收集响应式数据的依赖
watch：手动指定侦听的数据源

具体用法：

首先watchEffect传入的函数会立即执行一次，在执行的过程中收集依赖
只有收集的依赖发生变化时函数才会再次执行

<template><div>{{name}}<button @click="updateMsg">修改</button></div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {setup() {const name = ref("zhangyin")const age = ref(18)const updateMsg = ()=>{name.value="zhansga"age.value++;}watchEffect(()=>{console.log("name:",name.value);})return {updateMsg,name}}
}
</script><style lang="scss" scoped>
</style>

watchEffect停止侦听

可以获取watchEffect返回值函数，调用该函数即可

三，watchEffect清楚副作用

开发中需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候停止了侦听器，或者侦听器侦听函数被再次执行了，那么上一次的网络请求应该被取消掉这个时候可以清除上一次的副作用；

当副作用即将重新执行或者侦听器被停止时会执行该函数传入的回调函数；

<template><div><p>{{name}}</p><p>{{age}}</p><button @click="updataName">改变</button></div>
</template>
<script>
import {ref, watchEffect } from 'vue'export default {setup(){const name = ref("why")const age = ref(18)  const stop=  watchEffect((onInvalidate)=>{const timer = setTimeout(()=>{console.log("网络请求成功");},2000)onInvalidate(()=>{clearTimeout(timer)})console.log("name:",name.value,"age:",age.value);})const updataName =()=>{name.value="wangwy",age.value++;}return{updataName,name,age} }}
</script><style lang="scss" scoped></style>

vue3 watchEffect用法以及清除副作用相关推荐

【Vue3】利用watchEffect的清除副作用实现一个防抖函数
今天在Vue3官方文档上看了下 watchEffect 的介绍.以前用的时候都用得比较简单,所以以为这 api 也没啥值得特别掌握的地方,今天看了文档才发现,这个 api 并没有想象中那么简单~ 特别 ...
Vue3 - watchEffect 使用教程
前言 watchEffect,人称傻瓜式侦听器,它是什么呢? 它呢可以立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行. 啥意思呢,它不需要你传入任何响应式变量,即可自动实现监听. 示 ...
vue3 watch用法
1.监听路由变化 import { ref, watch } from "vue" import { useRoute } from "vue-router"& ...
vue3 watch 用法
<script setup>import {reactive,watch,} from 'vue'//数据let sum = ref(0)let msg = ref('你好啊')let p ...
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack.onTrigger.onInvalidate.副作用的刷新时机.watch .pre).渲染机制和 ...
onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
【vue3 Api - watchEffect 的讲解使用】- 侦听响应式数据执行副作用(effect)函数
在了解 `watchEffect` api之前,需要了解在vue中,副作用函数的定义是什么: 字面意义的讲,副作用函数指的是会产生副作用的函数,例如下面该函数: var num = 10 functi ...
Vue3中 watch、watchEffect 详解
1. watch 的使用语法 import { watch } from "vue" watch( name , ( curVal , preVal )=>{ //业务处理 ...
Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...

vue3 watchEffect用法以及清除副作用

一.computed

具体用法：

接受一个getter函数直接返回一个ref对象，代码实现：

2. 传入一个对象，定义get,set方法

二，侦听数据的变化

watchEffect停止侦听

三，watchEffect清楚副作用

vue3 watchEffect用法以及清除副作用相关推荐

最新文章

热门文章

vue3 watchEffect用法以及清除副作用

一.computed

具体用法：

接受一个getter函数 直接返回一个ref对象 ，代码实现：

2. 传入一个对象，定义get,set方法

二，侦听数据的变化

watchEffect停止侦听

三，watchEffect清楚副作用

vue3 watchEffect用法以及清除副作用相关推荐

最新文章

热门文章

接受一个getter函数直接返回一个ref对象，代码实现：