vue 3 的watchEffect 使用方法

2021-03-14 17:01:00

647次阅读

0个评论

vue 3 composition API 的 watchEffect 方法，初始化就会执行一次，它会自动检测方法内部使用的代码是否有变化，而且不需要传递你要侦听的内容，它会自动感知内容变化，缺点：无法获取之前或当前的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch 和 watchEffect 的使用和差异性</title>
    <!-- 通过cdn方式引入vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div> 
</body>

<script>
    // watch 侦听器
    // watchEffect 侦听器，偏向于 effect
    const app = Vue.createApp({
        setup(){
            const { reactive, watch, watchEffect, toRefs } = Vue

            // 定义变量
            const nameObj = reactive({ 
                name: 'dell', englishName: 'lee' 
            })
            
            // 监听 nameObj.name
            // watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => {
            //     console.log('watch', curName, preName, '---', curEng, preEng)
            // })


            // 立即执行，没有惰性 immediate
            // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
            // 不能获取之前数据的值
            watchEffect(() => { 
                console.log(nameObj.name)
            })
            
            // 解构取值
            const { name, englishName } = toRefs(nameObj)

            return { name, englishName }
        },
        template: `
            <div>
                <div>
                    Name: <input v-model="name">
                </div>
                <div>
                    Name is {{ name }}
                </div>
                <div>
                    EnglishName: <input v-model="englishName">
                </div>
                <div>
                    EnglishName is {{ englishName }}
                </div>
            </div>  
        `
    })   
  
    const vm = app.mount('#root')
</script>

</html>

假如我有这样一个需求想 2s 后结束监听，可以用变量或者常量把 **watch 或 watchEffect ** 储存起来，然后 2s 后执行一下这个变量的方法即可结束监听，具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch 和 watchEffect 的使用和差异性</title>
    <!-- 通过cdn方式引入vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div> 
</body>

<script>
    // watch 侦听器
    // watchEffect 侦听器，偏向于 effect
    const app = Vue.createApp({
        setup(){
            const { reactive, watch, watchEffect, toRefs } = Vue

            // 定义变量
            const nameObj = reactive({ 
                name: 'dell', englishName: 'lee' 
            })
            
            // 监听 nameObj.name
            const stop1 = watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => {
                console.log('watch', curName, preName, '---', curEng, preEng)
                setTimeout(() => {
                    stop1() // 结束监听
                }, 2000)                
            })


            // 立即执行，没有惰性 immediate
            // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
            // 不能获取之前数据的值
            const stop = watchEffect(() => { 
                console.log(nameObj.name)
                setTimeout(() => {
                    stop() // 结束监听
                }, 2000)
            })
            
            // 解构取值
            const { name, englishName } = toRefs(nameObj)

            return { name, englishName }
        },
        template: `
            <div>
                <div>
                    Name: <input v-model="name">
                </div>
                <div>
                    Name is {{ name }}
                </div>
                <div>
                    EnglishName: <input v-model="englishName">
                </div>
                <div>
                    EnglishName is {{ englishName }}
                </div>
            </div>  
        `
    })   
  
    const vm = app.mount('#root')
</script>

</html>

收藏0赞0

请登录后评论。没有帐号？注册一个。

程序王

0回答
1粉丝
0关注