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>
相关推荐
EveryPossible7 分钟前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说8 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒13 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52017 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java18 分钟前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
安卓开发者24 分钟前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫3 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
百思可瑞教育5 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js