Vue中watch使用方法详解

2024-09-27 19:39:46

前言

说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch 的操作可不止如此，本章就带大家一起深剖细析 vue 中的 watch 方法。

watch

因为 vue 是双向数据绑定，所以当页面数据发生变化时，我们通过 watch 方法就可以拿到数据变化前和变化后的值，从而做一系列操作，下面我们通过一个简单的例子来解释。

先看下面这段代码

<template>
  <div>
    <input type="text" v-model="nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      nameModel: "",
    };
  },
  watch: {
    nameModel() {
      console.log("触发打印");
    },
  },
};
</script>

实现效果

immediate和handler

问：immediate 和 handler 是干嘛用的？

在回答这个问题之前，我们先回到上面的例子中，如果我想让值第一次绑定的时候就监听函数该怎么办？这就牵扯到 watch 的一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。那如果我们就是需要在最初绑定值的时候也执行函数，举个最常见的例子，当父组件向子组件动态传值时，子组件 props 首次接收父组件传来的默认值时，也需要执行函数，这个时候就需要用到 immediate 属性。

接着看下面这段代码

父组件

<template>
  <div>
    <Child :message="informtion"></Child>
  </div>
</template>
<script>
import Child from "./subassembly/seed.vue";
export default {
  data() {
    return {
      informtion: "默认传递给子组件的数据",
    };
  },
  components: {
    Child,
  },
};
</script>

子组件

<template>
  <h2>接收父组件值：{{ value }}</h2>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  watch: {
    message: {
      handler(newName, oldName) {
        this.value = newName;
      },
      immediate: true, //首次绑定的时候，是否执行 handler
    },
  },
};
</script>

当 immediate 为 false 时

当 immediate 为 true 时

通过上面的例子我们不难推出：immediate 表示在 watch 中首次绑定的时候，是否执行 handler，值为 true 时表示在 watch 中声明的时候，就立即执行 handler 方法，反之，则和一般使用 watch 一样，在数据发生变化的时候才执行 handler。

注意：handler 有 2 个参数。第一个是 newValue，第二个是 oldValue，分别表示新的值和旧的值。

deep

deep 其实就是深度监听，那可能又有同学要问了，深度监听又是啥？试想一下，当你监听的目标是一个对象时，当对象中的 a 值发生变化，在不使用 deep 的前提下，是不会触发 handler 函数的，因为这个对象并没有改变，再通俗的讲就是对象中的 a 并没有变成 b 或者是消失了，你只是修改了 a 的值，但是 a 的值是 a 的，并不是对象的，并不能代表对象的改变。

再看下面这段代码

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    forms: {
      handler(newName, oldName) {
        console.log("触发打印");
      },
    },
  },
};
</script>

实现效果

可以看到控制台并没有打印任何结果，再回到上面的问题，deep 属性就是用来解决这个问题的。当你需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要 deep 属性对对象进行深度监听。

正确的写法

通过设置 deep: true 则可以监听到对象中属性值的变化。

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    forms: {
      handler(newName, oldName) {
        console.log("触发打印");
      },
      deep: true,
    },
  },
};
</script>

实现效果

有同学可能要问了，对象中有 n 个属性，但是我只想监听某一个属性值的变化该怎么写呢？其实有一个非常简单的方法：使用字符串的形式监听对象属性值变化。

实例

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    "forms.nameModel": {
      handler(newName, oldName) {
        console.log("触发打印");
      },
    },
  },
};
</script>

实现效果

注意：数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要深度监听。

拓展

computed 和 watch 区别

两者最明显的区别在于 watch 是观察某一个属性的变化，从而重新计算属性的值；而 computed 是通过所依赖的属性的变化计算属性值，在绝大部分情况下，computed 和 watch 没有明显区别，但如果是在数据变化的同时进行异步操作，那么 watch 无疑是最好的选择。

到此这篇关于Vue中watch使用方法详解的文章就介绍到这了,更多相关Vue watch内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue不能watch数组和对象变化解决方案

目录 Vue 能监听数组的情况 Vue 无法监听数组变化举例无法监听数组变化的情况 Vue 无法监听数组变化的解决方案 Vue 监听对象 Vue 设置监听对象 Vue 能监听数组的情况 Vue 监听数组和对象的变化(vue2.x) vue 实际上可以监听数组变化,比如: 直接 = 赋值 data () { return { watchArr: [], }; }, watch: { watchArr (newVal) { console.log('监听:' + newVal); } }, cre
Vue watch监听使用的几种方法

目录一.watch使用的几种方法二.watch中的immediate与handler和deep属性一.watch使用的几种方法 1. 通过 watch 监听 msg 数据的变化. watch: { msg(oldValue, newValue) { console.log(oldValue) console.log(newValue) } } 2.通过 watch 监听 obj数据的变化.(深度监听 deep) data() { return { obj: { 'name': "赵&quo
Vue watch原理源码层深入讲解

目录添加依赖触发依赖总结由于我在从源码看vue(v2.7.10)的computed的实现原理中详细的讲解过computed的实现,本篇跟computed的原理类似.我就带大家简单分析一下. 添加依赖代码如下: <template> <div> {{a}} <button @click="addModule">新增</button> </div> </template> <script> exp
Vue3中watch的使用详解

目录 Vue3中watch的详解 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 Vue3中watch的详解 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from
vue中watch的实际开发学习笔记

目录前言一.watch是什么二.watch不同的实际使用场景开发案例 1.场景1:加载完成后登录监听 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容 3.场景3:深度监听 4.场景4:赋值使用 5.场景5:改变标记的true和false 6.场景6:页面的跳转补充:watch简写形式总结前言本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验. 一.watch是什么根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对
Vue中watch清除过期副作用的案例详解

在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数
vue中watch监听不到变化的解决

目录 watch监听不到对象内部的变化解决方法: watch的handler方法的两个参数值相同解决方法: 全部代码 watch监听不到对象内部的变化有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro
Vue中watch使用方法详解

目录前言 watch immediate和handler deep 拓展前言说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <
关于vue中 $emit的用法详解

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父
Vue中的vue-resource示例详解

vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro
Vue 中axios配置实例详解

1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons
Vue中provide、inject详解以及使用教程

目录 Vue中常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结总结传送门:Vue中子组件向父组件传值及 .sync 修饰符详解传送门:Vue中状态管理器(vuex)详解及应用场景传送门:Vue中 $ attrs.$ listeners 详解及使用传送门:Vue中事件总线(eventBus)详解及使用传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中常见
Vue websocket封装实现方法详解

目录 1.封装的ws.js文件 2.使用方法 1.封装的ws.js文件 let global_callback = null let socket = '' // 存储 WebSocket 连接. let timeoutObj = null // 心跳定时器 let serverTimoutObj = null // 服务超时定时关闭 let lockReconnect = false // 是否真正建立了连接 let timeoutnum = null // 重新连接的定时器, 没连接上会一直
Angular中的$watch方法详解

在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch
angularjs中的$eval方法详解

在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方
Python中格式化format()方法详解

Python中格式化format()方法详解 Python中格式化输出字符串使用format()函数, 字符串即类, 可以使用方法; Python是完全面向对象的语言, 任何东西都是对象; 字符串的参数使用{NUM}进行表示,0, 表示第一个参数,1, 表示第二个参数, 以后顺次递加; 使用":", 指定代表元素需要的操作, 如":.3"小数点三位, ":8"占8个字符空间等; 还可以添加特定的字母, 如: 'b' - 二进制. 将数字以2为基

Vue中watch使用方法详解

目录

前言

watch

immediate和handler

deep

拓展

相关推荐

随机推荐