Vue3中的 computed,watch,watchEffect的使用方法

目录
  • 一、computed
  • 二、watch
    • vu2 的写法
    • Vue3 中这样写
  • 三、watchEffect

一、computed

<template>
  姓:<input v-model="person.firstName"><br/><br/>
  名:<input  v-model="person.lastName"><br/><br/>
  <span>全名:{{person.fullname}}</span><br/><br/>
  <span>全名:<input v-model="person.fullname"></span>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    let person = reactive({
      firstName:"张",
      lastName:"三"
    })
    //computed简写形式,没考虑修改
    /*person.fullname = computed(()=>{
      return person.firstName+"-"+person.lastName;
    })*/
    person.fullname = computed({
      get(){
        return person.firstName+"-"+person.lastName;
      },
      set(value){
        const nameArr = value.split('-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    })
    return{
      person,
    }
  }
}
</script>

二、watch

  • 1、与 Vue2.x 中 watch 配置功能一致
  • 2、两个小"坑":
    • 监视 reactive 定义的响应式数据时: oldValue 无法正确获取、强制开启了深度监视(deep配置失效)
    • 监视 reactive 定义的响应式数据中某个属性时:deep 配置有效

我们仍然做之前求和的案例:

vu2 的写法

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">点我sum++</button>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'Demo',
  watch: {
    /*sum(oldValue,newValue){
      console.log("sum发生了变化",oldValue,newValue);
    }*/
    sum: {
      immediate: true,
      deep:true,
      handler(newValue,oldValue) {
        console.log("sum发生了变化", newValue, oldValue);
      }
    }
  },
  setup() {
    let sum = ref(0);

    return {
      sum,
    }
  }
}
</script>

Vue3 中这样写

1、情况一:监视ref所定义的一个响应式数据

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">点我sum++</button>>
</template>
<script>
import {ref, watch} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    //情况一:监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum
    }
  }
}
</script>

watch 还可以传一个配置项,把 immediate 等配置传进去:

watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    },{immediate:true})

2、情况二:当有多个信息需要同时监视时

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">点我sum++</button>
  <hr/>
  <h2>信息为:{{ msg }}</h2>
  <button @click="msg+='!'">点我sum++</button>
</template>
<script>
import {ref, watch} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    //情况二:监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

3、情况三:监视reactive所定义的一个响应式数据

<template>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>薪资:{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import {reactive, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    //情况三:监视reactive所定义的一个响应式数据全部属性
    // 1\注意:无法正确获取oldvalue
    // 2\注意:强制开启了深度监视(deep配置无效)
    watch(person, (newValue, oldValue) => {
      console.log("person发生了变化", newValue, oldValue);
    })

    return {
      person
    }
  }
}
</script>

4、情况四:监视reactive所定义的一个响应式数据某个属性

//情况四:监视reactive所定义的一个响应式数据某个属性
    watch(()=>person.name, (newValue, oldValue) => {
      console.log("person的name发生了变化", newValue, oldValue);
    })

5、情况五:监视 reactive 所定义的一个响应式数据某些属性

//情况五:监视reactive所定义的一个响应式数据某个属性
    watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
      console.log("person的name或age发生了变化", newValue, oldValue);
    })

6、特殊情况,监视对象中的某个对象属性,要开始deep:true

watch(()=>person.job, (newValue, oldValue) => {
	console.log("person的job发生了变化", newValue, oldValue);
},{deep:true})//由于监视的是reactive对象中的某个属性,deep奏效

7、监视 ref 定义的对象响应数据,需要.value或deep:true

	let person = ref({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watch(person.value, (newValue, oldValue) => {
      console.log("person的value发生了变化", newValue, oldValue);
    })
    或
    watch(person, (newValue, oldValue) => {
      console.log("person的value发生了变化", newValue, oldValue);
    },{deep:true})

三、watchEffect

watch 的套路是:既要指明监视的属性,也要指明监视的回调

watchEffect 的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性

watchEffect有点像computed

。但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值

。而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调
watchEffect(()=>{
	const xl = sum.value
	const x2 = person.age
	console.log( "watchEffect配置的回调执行了")
})

例如还用上边的例子:

import {reactive,watchEffect} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watchEffect(()=>{
      const x1 = person.name;
      console.log("watchEffect所指定的回调执行了"+x1);
    })
    return {
      person
    }
  }
}
</script>

可以看到用到了哪个就监视哪个

最后,我们使用 watch 和 watchEffect 实现姓名的例子

<template>
  姓:<input v-model="person.firstName">
  名:<input  v-model="person.lastName">
  <span>全名:{{fullName}}</span>
  <span>全名:<input v-model="fullName"></span>
</template>
<script lang="ts">
import {defineComponent, reactive, ref,watch,watchEffect} from 'vue';
export default defineComponent({
  setup(){
    let person = reactive({
      firstName:"张",
      lastName:"三"
    });

    const fullName = ref('');

    watch(person,({firstName,lastName})=>{
      fullName.value = firstName+"-"+lastName
    },{immediate:true})

    //不用使用immediate,默认执行一次
    /*watchEffect(()=>{
      fullName.value = person.firstName+"-"+person.lastName
    })*/

    watchEffect(()=>{
      const name = fullName.value.split('-');
      person.firstName = name[0];
      person.lastName = name[1];
    })
    return{
      person,
      fullName
    }
  }
});
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

到此这篇关于Vue3中的 computed,watch,watchEffect的使用方法的文章就介绍到这了,更多相关Vue3 computed 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3中watchEffect的用途浅析

    前言 vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项.他可以实现在一个属性变更的时候,去执行我们想要的行为.比如: 当ID改变的时候,从数据库里面获取新的数据. 当属性变换的时候执行一个动画. 当搜索条件变更的时候,更新查询到的数据. 但是 vue3 除了 watch api, 还新增了一个 watchEffect 的 api, 我们来看看他的用法.

  • 浅谈vue3中effect与computed的亲密关系

    在我刚看完vue3响应式的时候,心中就有一个不可磨灭的谜团,让我茶不思饭不想,总想生病.那么这个谜团是什么呢?就是在响应式中一直穿行在tranger跟track之间的effect.如果单纯的响应式原理根本就用不上effect,那么effect到底是干什么的呢? 船到桥头自然直,柳岸花明又一村.苦心人天不负,偶然间我看到了effect测试代码用例! it('should observe basic properties', () => { let dummy const counter = rea

  • Vue3 中 watch 与 watchEffect 区别及用法小结

    目录 响应式依赖收集 Watch WatchEffect 什么时候用什么? 大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖.watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景. 你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的. watch- 显式指定依赖源,依赖源更新时执行回调函数 watchEffect - 自动收集依赖源,依赖源更新时重新执行自身 响应式依赖收集 首先先需要了解一下 vue 3

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • VUE3中watch和watchEffect的用法详解

    watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

  • vue3的watch和watchEffect你了解吗

    目录 watch 结论1: 结论2 结论3 watchEffect 结论1 结论2watchEffect监听多个数据源 结论3watchEffect停止监听 总结 watch 结论1: watch需要侦听特定的数据源,可以是一个也可以是多个,在页面第一次加载时不运行函数,只有当监听的数据源改变时,才会运行此函数 结论2 watch监听一个对象的属性,首先监听的值要以函数返回值的形式进行传递监听,不同于vue2形式的监听,如下为对象属性5秒后改变,监听函数打印 结论3 监听多个数据源,是把需要监听

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • 浅谈Vue3中watchEffect的具体用法

    前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用

  • vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • vue3 中 computed 新用法示例小结

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法. 组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue".引入之后 computed 可以传入的参数有两种:回调函数和 options .具体看看它是如何使用

随机推荐