watch监听器

最新推荐文章于 2024-03-25 11:09:46 发布

小旋风01234

最新推荐文章于 2024-03-25 11:09:46 发布

阅读量384

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43217258/article/details/107113294

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

普通监听和对数组或者对象的深度监听：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
    <br />
    <input v-model="message">
    <br />
    <input v-model="a">
    <br />
    <input v-model="obj.age">
    <br />
    <input v-model="bh">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      a:1,
      obj:{
        name:'gr',
        age:18
      },
      bh:''
    },
    methods: {
      // details: function () {
      //   return this.site + " - 学的不仅是技术，更是梦想！";
      // }
    },
    watch: {
      //普通的watch监听
      a(val, oldVal){
        console.log("a: "+val);
        this.bh=+val+(+this.obj.age)
     },
     'obj.name':{
        handler(newname){
             console.log("变化后的值： "+newname);
         },
     },
     //深度监听，可监听到对象、数组的变化
     obj:{
         handler(val){
             console.log("变化前后的值： "+val.age, '---',val);
         },
         deep:true, //true 深度监听
         immediate: true //声明后立刻调用
     }
    // 无法监听
    // obj(val, oldVal){
    //   console.log(val,oldVal);
    // }
    },
  })
</script>

</html>

说明：

watch和computed各自处理的数据关系场景不同 :
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响
method和computed触发条件不同 :computed只提供了缓存的值，而没有重新计算只有符合：
1.存在依赖型数据
2.依赖型数据发生改变这两个条件,computed才会重新计算。
而methods下的数据，是每次都会进行计算的

小旋风01234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
watch监听器

普通监听和对数组或者对象的深度监听：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.
复制链接

扫一扫

专栏目录