Vue3.0-watch&&watchEffect函数

一、watch功能罗列

1、具有一定的惰性，第一次加载页面不能执行，只有数据变化的时候才会执行

2、参数可以拿到当前值和原始值

3、可以侦听多个数据的变化，用一个侦听器承载

二、watchEffect功能罗列

1、立即执行，没有惰性，页面的首次加载就会执行

2、自动检测内部代码，代码中有依赖就会执行

3、不需要传递侦听数据的内容会自动感知代码和依赖代码，不需要传递多个参数，只需要传递一个回调函数

4、不能获取之前的数据，只能过去当前的数据

5、一些异步的操作放到这里比较合适

三、对比

watch和watchEffect都能响应式的执行副作用的回调，它们之间的主要区别是追踪响应式依赖的方式:

watch:

    (1)只追踪明确侦听的数据源，不追踪回调访问的东西

    (2)数据确实改变的时候才会回调

    (3)可以更加准确的控制回调函数的触发时机

watchEffect:

    (1)会在副作用发生期间追踪依赖

    (2)自动追踪所有能放问到的响应式的属性

    (3)代码更简洁，但有时依赖关系没有那么明确

四、使用选择

1、有多个依赖项，使用watchEffect可以消除手动维护依赖列表的负担

2、侦听一个嵌套数据结构中的几个属性，effect可能会比深度监测更有效

除了上面两点之外，其他情况建议使用watch来监测

五、例子说明

例一

在下面这里watchEffect会立即执行，在执行期间，他会自动追踪select.value作为依赖(和计算属性类似)，当select.value变化时，回调会再次执行

注意: 这个例子只是简单列举一个异步的例子，但是因为只涉及到一个依赖项，watchEffect并不能提现出来多大的优点

const select= ref("")

const commits=ref(null)

 

// watchEffect写法

watchEffect(async()=>{

 let res = await axios.get(`http://www.xxx/${select.value}`)

commits.value=res.data

})

 

// watch写法

watch(select, async(value)=>{

let res = await axios.get(`http://www.xxx/${value}`)

commits.value=res.data

}, {immediate: true})

例二

要求messagea和messageb变化的时候，实时获取result的值，因为watch只追踪明确侦听的数据源，如果用watch来实现的话，watch就需要写两个监测源，但是watchEffect不需要，它是自动追踪所有能访问到的响应式属性，messagea和messageb无论是谁发生变化都会执行这个函数

const messagea = ref(1)

const messageb = reg(2)

const result = ref(null)

 

// watch 的写法

watch(meassagea, ()=>{

 result.value=messagea.value+messageb.value

}, {immediate:true})

 

watch(meassageb, ()=>{

 result.value=messagea.value+messageb.value

}, {immediate:true})

 

// watchEffect的写法

watchEffect(()=>{

 result.value=messagea.value+messageb.value

})

 

{ {result}}

<input v-model="measagea" />

<input v-model="measageb" />