您的位置:首页 > 教程 > JavaScript > Vue中的watch是什么以及watch和computed的区别

Vue中的watch是什么以及watch和computed的区别

2022-06-29 18:46:21 来源:易采站长站 作者:

Vue中的watch是什么以及watch和computed的区别

目录
一、watch是什么?二、应用基本用法三、Watch和computed的区别computed和watch的综合运用实例需求:实现代码(helloworld.vue实现代码)

一、watch是什么?

监测>

简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

二、应用基本用法

当firstName值变化时,watch监听到并且执行watch中的firstName函数

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    firstName: 'Kobe',
    lastName: 'Bryant',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

handler方法和immediate属性:

上面的例子是值变化时候,watch才执行,我们想让组件加载立即触发回调函数执行就用到了handler和immediate属性

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
    immediate: true
  }
}

deep属性(深度监听,常用于对象下面属性的改变):

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

我们在在输入框中输入数据视图改变obj.a的值时,我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

对象和数组都是引用类型,引用类型变量存的是地址,地址没有变,所以不会触发watch。这时我们需要进行深度监听,就需要加上一个属性 deep,值为 true

比如我们在 mounted事件钩子函数中对obj进行重新赋值:

mounted: {
  this.obj = {
    a: '456'
  }
}

这时候deep属性就派上用场了:

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

这样的方法对性能影响很大,修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以设置watch监听的属性为'obj.a',而删掉deep:true:

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

最后:实际开发中,watch会随着组件一并销毁。

在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域

三、Watch和computed的区别

计算属性computed>

    支持缓存,只有依赖数据发生改变,才会重新进行计算(这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。)不支持异步,当computed内有异步操作时无效,无法监听数据的变化computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。如果computed属性属性值是函数,那么默认会走get方法,函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

    侦听属性watch(一个值变化会引起一系列值的变化或某个数据变化时做一些事情):

      如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。不支持缓存,数据变,直接会触发相应的操作;watch支持异步;监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;当一个属性发生变化时,需要执行对应的操作;一对多;监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作。 

      computed和watch的综合运用实例

      需求:

      1.点击按钮实现天气的切换;

      2.用watch进行监视天气产生变化的数据;

      实现代码(helloworld.vue实现代码)

      <template>
       <!-- 准备好一个容器-->
      		<div id="root">
      			<h2>今天天气很{{info}}</h2>
      			<button @click="changeWeather">切换天气</button>
      		</div>
      </template>
       
      <script>
      export default {
        name:'HelloWorld',
        data(){
          return{
            isHot:true,
          }
        },
        computed:{
          info(){
            return this.isHot ? '炎热' : '凉爽'
          }
        },
        methods: {
      				changeWeather(){
      					this.isHot = !this.isHot
      				}
      			},
        watch:{
          isHot(val){
            console.log("isHot被修改了,isHot值为:",val)
          }
        }
       
      }
      </script>
       
      <style>
      </style>

      注意:watch监听的对象都是在data()中已经定义好的数据。

      以上为个人经验,希望能给大家一个参考,也希望大家多多支持易采站长站。

      如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25