vue 3 中watch 和watchEffect 的新用法

目录
  • 一、watch 新用法
    • 1.1、watch 使用语法
    • 1.2、watch 监听多个属性值
    • 1.3、watch 监听引用数据类型
  • 二、watchEffect
  • 三、watch 与 watchEffect 区别和联系
    • 3.1、watch特点
    • 3.2、watch 配置项
    • 3.3、watchEffect 特点
    • 3.4、watch 与 watchEffect 联系

一、watch 新用法

选项式API中,watch 使用

watch:{

 mood(curVal,preVal){

  console.log('cur',curVal);//最新值

  console.log('pre',preVal);//修改之前的值

 }

}

1.1、watch 使用语法

Composition API 中,使用 watch 时,必须先引入。

使用语法为:

import { watch } from "vue"

watch(

 name ,

 ( curVal , preVal )=>{ //业务处理  },

 options

)

共有三个参数,分别为:

  • name :需要帧听的属性
  • (curVal,preVal)=>{ //业务处理 } 箭头函数,是监听到的最新值和本次修改之前的值,此处进行逻辑处理。
  • options :配置项,对监听器的配置,如:是否深度监听。

页面刚进入的时候并不会执行,值发生改变的时候,才会打印出当前最新值和修改之前的值。

示例1:监听一个数据

import { ref , watch } from "vue"

export default{

 setup(){

  const mood = ref("")

  //帧听器

  watch(mood,(curVal,preVal)=>{

   console.log('cur',curVal);

   console.log('pre',preVal);

  },{

   //配置项

  })

  return{

   mood

  }

 }

}

watch 也可以监听多个属性值,此时传入的数据变成数组形式,配置项保持不变。

1.2、watch 监听多个属性值

示例2:监听多个属性

watch([mood,target],([curMood,curTarget],[preMood,preTarget])=>{

 console.log('curMood',curMood);

 console.log('preMood',preMood);

 console.log('curTarget',curTarget);

 console.log('preTarget',preTarget);

},{

  //配置项

})

1.3、watch 监听引用数据类型

watch 监听引用数据类型时,如果只监听其中某个属性时,

使用语法如下:

watch(()=>obj.name,(curValue,preValue)=>{

 //帧听引用数据类型的某个属性

},{

 //配置项

})

第一个参数,回调函数返回的是需要帧听对象的属性。后边的参数与上边的一致。

示例3:帧听对象某个属性

<template>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</template>

<script>

import { ref , reactive , watch } from "vue"

export default{

 setup(){

  const obj = reactive({ name:'qq',sex:'女' })

  watch(()=>obj.name,(cur,pre)=>{

   console.log('cur',cur);

  },{ })

  return{

   obj

  }

 }

}

</script>

如果我们试着把属性去掉,直接监听整个对象,发现watch好像失效了。此时我们就需要引入 watchEffect

二、watchEffect

watchEffect 也是一个帧听器,是一个副作用函数。它会监听引用数据类型的所有属性,不需要具体到某个属性,一旦运行就会立即监听,组件卸载的时候会停止监听。

示例4:监听对象

<template>

  <div>

    {{obj}}

    <input type="text" v-model="obj.name">

    <input type="text" v-model="obj.sex">

  </div>

</template>

<script>

import {   reactive  , watchEffect } from "vue"

export default{

  setup(){

    let obj = reactive({ name:'qq',sex:'女'})

    watchEffect(() => {

      console.log('name',obj.name);

      console.log('sex' , obj.sex);

    })

    return{

      obj

    }

  }

}

</script>

watchEffect 参数只有一个回调函数。此时刷新页面进入,watchEffect 就会打印结果。

三、watch 与 watchEffect 区别和联系

watch watchEffect 都是监听器,那么它们之间有什么关系呢?

3.1、watch特点

watch 监听函数可以添加配置项,也可以配置为空,配置项为空的情况下,

watch的特点为:

  • 有惰性:运行的时候,不会立即执行。
  • 更加具体:需要添加监听的属性。
  • 可以访问属性之前的值:回调函数内会返回最新值和修改之前的值。
  • 可配置:可以添加配置项。

3.2、watch 配置项

watch 的配置项可以补充watch特点上的不足,可以配置的有:

  • immediate:配置watch属性是否立即执行,值为 true 时,一旦运行就会立即执行,值为false时,保持惰性。
  • deep:配置 watch 是否深度监听,值为 true 时,可以监听对象所有属性,值为 false 时保持更加具体特性,必须指定到具体的属性上。

3.3、watchEffect 特点

watchEffect 副作用函数它的特点分别为:

  • 非惰性:一旦运行就会立即执行。
  • 更加抽象:使用时不需要具体指定监听的谁,回调函数内直接使用就可以。相比watch比较难理解。
  • 不可访问之前的值:只能访问当前最新的值,访问不到修改之前的值。

3.4、watch 与 watchEffect 联系

watch 的前两个特点与 watchEffect 的两个特点刚好相反,watch 通过配置项可以修改成带有 watchEffect 特点。

示例5watch 监听对象

<template>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</template>

<script>

import { ref , reactive , watch } from "vue"

export default{

 setup(){

  const obj = reactive({ name:'qq',sex:'女' })

  watch(()=>obj,(cur,pre)=>{

   console.log('cur',cur);

  },{ 

   immediate:true,

   deep:true

  })

  return{

   obj

  }

 }

}

</script>

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

(0)

相关推荐

  • Vue3中watchEffect的用途浅析

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

  • 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) => {

  • vue 3 中watch 和watchEffect 的新用法

    目录 一.watch 新用法 1.1.watch 使用语法 1.2.watch 监听多个属性值 1.3.watch 监听引用数据类型 二.watchEffect 三.watch 与 watchEffect 区别和联系 3.1.watch特点 3.2.watch 配置项 3.3.watchEffect 特点 3.4.watch 与 watchEffect 联系 一.watch 新用法 选项式API中,watch 使用 watch:{ mood(curVal,preVal){ console.log

  • Javascript6中字符串的四个新用法分享

    以下就是JavaScript6中字符串的四个新用法: 一.Unicode字符的新表示方法 Unicode字符通常是21个bit的,而普通的JavaScript字符(大部分)是16bit的,可以编码成UTF-16.超过16bit的字符需要用2个常规字符表示. 比如,下面的的代码将会输出一个Unicode小火箭字符('\uD83D\uDE80'),你可以在浏览器的console里试一下: console.log('\uD83D\uDE80'); 在 ECMAScript 6 里,可以使用新的表示方法

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

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

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

  • Vue.js中v-show和v-if指令的用法介绍

    目录 一.v-show指令 二.v-if指令 三.v-show和v-if的区别 四.v-else指令 五.v-else-if 一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show="true",表示显示DOM元素. v-show="false", 表示隐藏DOM元素. 看下面的示例: <!DOCTYPE html>

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • 详解vue 2.6 中 slot 的新用法

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性. 真正有能力的插槽是什么? 如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读.也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要. 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 插槽是什么? 插槽是Vue组件的一种机制,它允许你以一种不同于严格的父子关系的方式组合组件.插

  • 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) =>

  • vue Render中slots的使用的实例代码

    本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

随机推荐