watch
:侦听数据变化 (某个值的change事件)
vue2.x
data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething }, /* * deep:Boolean : 深度监听 * true: 监听堆的改变就 * false:只监听栈的改变(默认) */ deep:true/false, /* * immediate:Boolean : 是否在第一次定义时就执行handler函数 * true: 在第一次定义时就执行handler函数 * false:修改后再执行handler函数 */ immediate:true/false } }
vue3.x
watch用于监听响应式的数据
基本使用
const num = ref(0) 1. 导入 import {watch} from 'vue' 2. 使用 `const 返回值= watch(需要监听的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})` 返回值: 可以关闭监听: 返回值() 参数一: 需要监听的值 基本数据类型(Number,String,Boolean,null,undefined): ()=>基本数据类型值 复杂数据类型(Array,Object,Function): 直接写/()=>基本数据类型值 参数二: 类比Vue2中的handler函数 参数三: {}对象, 对象中可以有个配置项:deep,immediate,flush, deep,immediate的意思上面有过描述, 这里主要对flush的取值做说明: `flush:post/sync/pre pre(默认值):渲染前,值改变了,没有渲染到dom post:渲染后,值改变了,也渲染到dom sync:改变一次渲染一次,每一次都是渲染前`
注意点:
实际开发中监听不到变化 统一使用
watch(()=>响应式数据,()=>{},{deep:true})
以上就是Vue2和Vue3如何使用watch侦听器详解的详细内容,更多关于watch侦听器使用的资料请关注华域联盟其它相关文章!
您可能感兴趣的文章:
- vue3.0中的watch侦听器实例详解
- vue.js中methods watch和computed的区别示例详解
- 详解Vue中的watch和computed
- Vuejs中的watch实例详解(监听者)
- 详解Vue的watch中的immediate与watch是什么意思
- Vue 2.0 侦听器 watch属性代码详解
- VUE watch监听器的基本使用方法详解
本文由 华域联盟 原创撰写:华域联盟 » Vue2和Vue3如何使用watch侦听器详解
转载请保留出处和原文链接:https://www.cnhackhy.com/82184.htm