How Vue2 and Vue3 use the watch listener

Vue2 and Vue3 how to use watch listeners, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Watch: listen for data changes (change event of a value)

Vue2.x data () {return {num:10}}, watch: {num: {/ * * newValue: current value * oldValue: modify the last moment value * / handler (newValue,oldValue) {/ / doSomething} / * * deep:Boolean: deep listening * true: listen for changes to the heap * false: only listen for changes to the stack (default) * / deep:true/false / * * immediate:Boolean: whether to execute the handler function at the first definition * true: execute the handler function at the first definition * false: execute the handler function * / immediate:true/false}} vue3.x after modification

Watch is used to listen for responsive data

Basic use

Const num = ref (0) 1. Import import {watch} from 'vue'2. Use `const return value = watch (value to be monitored, (newVal,oldVal) = > {}, {deep,immediate,flush}) `return value: you can turn off listening: return value () Parameter 1: basic data type of value to be monitored (Number,String,Boolean,null) Undefined): () = > basic data type value complex data type (Array,Object,Function): direct write / () = > basic data type value parameter 2: analogy handler function parameter 3: {} object, object can have a configuration item: deep,immediate,flush, deep The meaning of immediate has been described above. Here we mainly explain the value of flush: `flush:post/sync/pre pre (default): before rendering Value changed, not rendered to dom post: after rendering, value changed, also rendered to dom sync: change to render once, each time is before rendering `

Note:

Change cannot be monitored and used uniformly in actual development.

Watch (() = > responsive data, () = > {}, {deep:true})

This is the answer to the question about how Vue2 and Vue3 use the watch listener. I hope the above content can be of some help to you. If you still have a lot of questions to solve, you can follow the industry information channel for more related knowledge.