vue中watch监听事件与计算属性的区别

监视事件

  • 在里面编写检测对象,

    1.当监视的属性变化时,回调函数自动调用,进行相关的操作

    2.监视的属性必须存在,才能进行监视

    3.监视的两种写法:1.new Vue时传入watch配置2.通过vm.$watch('监视对象'{实现配置})

  • 监听事件的案例

html 复制代码
<body>
    <div class="hello">
    <title>天气案例</title>
    <h2>{{ info }}</h2>
    <button @click="change">点击切换</button>
  </div>
</body>
<script>
    const vm = new Vue ({
        el: '#root',
        data: {
            isHot: true
        },
        //计算属性
    computed: {
    info () {
      return this.isHot ? '炎热' : '凉爽'
     }
  },
  methods: {
    change () {
      this.isHot = !this.isHot
    }
  },
  watch: {
    isHot: {
      // immediate初始化让handler调用一下
         immediate: true,
      // handler当isHot发生改变时,handler发生调用。newVallue为没有调用handler的isHot值, oldVallue为调用handler后的isHot值
      handler (newVallue, oldVallue) {
        console.log('isHot被修改', newVallue, oldVallue)
      }
    }
  }
        
    })
​
</script>
  • 深度监听

  • 1.vue中watch默认不检测对象内部值的改变(一层)

  • 2.配置deep.true可以检测对象内部值的改变(多层)

  • 3.vue自身可以监视对象内部值的改变,但vue提供的watch默认的不可以

html 复制代码
<body>
    <h3>{{number.a}}</h3>
    <button @click="number.a++">点我让a+1</button>
    <h3>{{number.b}}</h3>
    <button @click="number.b++">点我让b+1</button>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
            number: {
                a:1,
                b:1
            }
        },
        watch: {
                //监听多级结构中某种属性的变化,加单引号才能监听a值,
                /*'number.a': {
                    handler(){
                        console.log('a被改变了')
                    }
                }
                */
                //由于vue提供的watch无法监听多级结构的所有属性,也就是无法监听number中a和b,故加上深层监听deep
                number: {
                    deep: true,
                    handler(){
                        console.log('number改变了')
                    }
                }
            }
    })
​
</script>
  • 监视事件的缩写

  • 缩写的条件仅仅只有handler方法时才可以缩写

html 复制代码
<script>

//第一种写法
watch:{
    isHot:{
        /*原来的写法
          immediate: true,
          deep: true,
          handler(newValue,oldvalue){
            console.log('isHot被修改了,newValue,oleValue')
          }     
    }*/
    //缩写后
    isHot(newValue,oldvalue){
            console.log('isHot被修改了,newValue,oleValue')
          }     
    }*/
}
//第二次写法的缩写
/*vm.$watch('isHot',{
     immediate: true,
          deep: true,
          handler(newValue,oldvalue){
            console.log('isHot被修改了,newValue,oleValue')
          } 
})*/
//缩写后
vm.$watch('isHot',function(newValue,oldvalue){
    console.log('isHot被修改了,newValue,oleValue')
})
<script>
  • 计算机属性computed和watch的区别

  • computed能完成的功能,watch也可以完成

  • watch能完成的功能,computed不一定能完成,如: watch的异步操作

  • vue管理的函数写成普通函数,不是vue管理的函数写成箭头函数,目的是都可以让this的指向都指向vm或组件的实例对象

  • 不被vue所管理的函数有(定时器的回调函数,ajax的回调函数,promise的回调函数)

html 复制代码
<script>
    //watch的异步操作
watch: {
	firstName(val){
	//设置定时器的回调函数,由于setTimeout()括号内的函数不是vue所管理的函数,故括号内的函数用箭头函数
		setTimeout(()=>{
			this.firName = val + this.lastName
		},1000)
	}
}
</script>
相关推荐
苹果酱05672 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
斯~内克2 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia38 分钟前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话39 分钟前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby40 分钟前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云43 分钟前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo43 分钟前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端
土豆骑士1 小时前
monorepo 实战练习
前端
土豆骑士1 小时前
monorepo最佳实践
前端