VUE基础（四）

最新推荐文章于 2024-10-01 23:29:04 发布

hh_xi

最新推荐文章于 2024-10-01 23:29:04 发布

阅读量3.1k

点赞数 37

分类专栏： VUE3 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/hh_xi/article/details/141392089

版权

一、watch侦听器

定义：watch侦听器允许开发者监听数据的变化，从而针对数据的变化进行特定操作

 export default {
    name: 'MyWatch',
    data() {
      return {
        username: 'admin',
      }
    },
    // 需要在watch节点下，定义侦听器
    watch: {
     //监听userName的变化
     username(newVal,oldVal){
        console.log("变化后的新值", newVal);
        console.log("变化前的旧值", oldVal);
     }
    },
  }

immediate选项

作用：组件在初次加载完毕后不会调用watch监听器，immediate选项可以让watch监听器立即被调用

另username不在是一个方法了，而是指向一个对象

 export default {
    name: 'MyWatch',
    data() {
      return {
        username: 'admin',
      }
    },
    // 需要在watch节点下，定义侦听器
    watch: {
     //监听userName的变化
     username: {
      // handler属性是固定写法，当username变化时，调用handler
      async handler(newVal, oldVal) {
        const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
      },
      // 立即触发 watch 侦听器
      immediate: true,
    },
    },
  }

deep选项

作用：如果监听的是对象，对象中的属性值发生了变化，则无法被监听到，此时需要使用deep选项

export default {
  name: 'MyWatch',
  data() {
    return {
      info: {
        username: 'zs',
        age: 20,
      },
    }
  },
  watch: {
    info: {
      async handler(newVal) {
        const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal.username)
        console.log(res)
      },
      deep: true,//需要使用deep节点，否则info中的username变化监听不到
    },
  },
}

仅需监听对象中一个属性的变化

export default {
  name: 'MyWatch',
  data() {
    return {
      info: {
        username: 'zs',
        age: 20,
      },
    }
  },
  watch: {
   //仅监听info对象中username属性的变化
  'info.username': {
      async handler(newVal) {
        const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
      },
    },
  },
}

计算属性和侦听器的区别

计算属性侧重于监听多个值的变化，最终计算并返回一个新值

侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值