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>
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法