您现在的位置是:首页 > 编程 > 

【Vue】05

2025-07-29 04:12:37
【Vue】05 6、watch和watchEffect的使用和差异性写法预览代码语言:javascript代码运行次数:0运行复制// 监听一个对象 watch(name, (currentValue, prevValue) => { cole.log(currentValue, prevValue); }) // 监听一个对象 watch(() => name.valu

【Vue】05

6、watch和watchEffect的使用和差异性

写法预览

代码语言:javascript代码运行次数:0运行复制
// 监听一个对象
watch(name, (currentValue, prevValue) => {
  cole.log(currentValue, prevValue);
})
// 监听一个对象
watch(() => name.value, (currentValue, prevValue) => {
  cole.log(currentValue, prevValue);
})
// 监听多个对象
watch([() => , () => obj.age], ([curame, prevame], [curAge, prevAge]) => {
  cole.log(curame, prevame, " === ", curAge, prevAge);
})
// watch 立即执行与深度监听
watch(() => props.student, (newVal, oldVal) => {
  cole.log(newVal, oldVal)
}, {
  // 立即执行
  immediate: true,
  // 深度监听
  deep: true,
})
// 立即执行、只能拿到当前值、不需要特别指定监控谁,当内部使用到的数据发生改变是就会执行
watchEffect(() => {
  cole.log(name.value);
});

watch基本使用

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { ref, watch } = Vue;
      ct name = ref("zibo");
      // 监听的值,值发生改变的时候的回调函数
      // 特点:
      // 1、具备一定的惰性 lazy
      // 2、参数可以拿到当前值和原始值
      watch(name, (currentValue, prevValue) => {
        cole.log(currentValue, prevValue);
      })
      return { name }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="name" />
      </div>
      <div>
        ame:is {{name}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210616195947558
监听对象
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { reactive, watch } = Vue;
      ct obj = reactive({name: '大哥刘备'});
      // 监听的值,值发生改变的时候的回调函数
      // 特点:
      // 1、具备一定的惰性 lazy
      // 2、参数可以拿到当前值和原始值
      // 监听对象的变化
      // 可以监听的目标: watch source can only be a getter/effect function, 
      // a ref, a reactive object, or an array of these types. 
      // 直接监听  会报错!
      // 可以这么写
      watch(() => , (currentValue, prevValue) => {
        cole.log(currentValue, prevValue);
      })
      return { obj }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="" />
      </div>
      <div>
        ame:is {{}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210616201220061

同时监听多个目标

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { reactive, watch } = Vue;
      ct obj = reactive({
        name: '大哥刘备',
        age: 62
      });
      // 监听多个属性,需要写成数组
      watch([() => , () => obj.age], ([curame, prevame], [curAge, prevAge]) => {
        cole.log(curame, prevame, " === ", curAge, prevAge);
      })
      return { obj }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="" />
      </div>
      <div>
        ame:is {{}}
      </div>
      <div>
        Age<input v-model="obj.age" />
      </div>
      <div>
        ame:is {{obj.age}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210616202411117

watchEffect基本使用

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { ref, watchEffect } = Vue;
      ct name = ref("訾博ZiBo");
      // 特点:
      // 1、立即执行,非惰性,immediate;
      // 2、只能拿到当前值;
      // 不需要特别指定监控谁,当内部使用到的数据发生改变是就会执行
      watchEffect(() => {
        cole.log(name.value);
      });
      return { name }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="name" />
      </div>
      <div>
        ame:is {{name}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210616205226
停止监听

watch 和 watchEffect 都可以用!

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { ref, watchEffect } = Vue;
      ct name = ref("訾博ZiBo");
      ct stop = watchEffect(() => {
        cole.log(name.value);
        setTimeout(() => {
          stop();
        }, 000);
      });
      return { name }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="name" />
      </div>
      <div>
        ame:is {{name}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-2021061620554755

使watch也立即执行

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { ref, watch } = Vue;
      ct name = ref("zibo");
      watch(name, (currentValue, prevValue) => {
        cole.log(currentValue, prevValue);
      },{
        // 这里还可以有更多高级配置
        immediate: true
      })
      return { name }
    },
    template: `
    <div>
      <div>
        ame:<input v-model="name" />
      </div>
      <div>
        ame:is {{name}}
      </div>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。 原始发表:202-04-15,如有侵权请联系 cloudcommunity@tencent 删除compositionvuewatch对象api

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/biancheng/1197177.html

相关标签:无
上传时间: 2025-07-23 08:44:14
留言与评论(共有 6 条评论)
本站网友 中央文史馆
25分钟前 发表
() => obj.age]
本站网友 华夏之声
4分钟前 发表
}) // 立即执行
本站网友 河西租房
0秒前 发表
prevame
本站网友 大连房地产网
27分钟前 发表
具备一定的惰性 lazy // 2
本站网友 骑驴找马什么意思
23分钟前 发表
}) // 立即执行