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>
相关推荐
abigale0344 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码