vue深度监听(监听对象和数组的改变)与立即执行监听实例

2024-12-04 13:11:53

1.vue中监听对象数据属性值的改变，可以使用深度监听

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  form: { // 深度监听
   handler(val, oldVal){
    console.log('currentForm',val, oldVal)
    // 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
   },
   deep:true
  }
 }

注意：我们应尽量避免在监听方法中更改当前监听对象的属性值，以免再次触发监听函数

2.若只监听某个或部分属性值的变化，则可以配合计算属性computed来解决

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 computed: {
  status() {
   return this.form.status
  }
 },
 watch: {
  status() {
   console.log('currentVal', this.status)
  }
 }

当然，上面这种方法会多出一个计算属性，并不是最好的方法，通过查看官方api，其实还有一种方法：

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  'form.status'(val, oldVal) {
   console.log('currentVal', val)
  }
 }

3.取消监听

var unwatch = vm.$watch('a', cb) // 返回一个取消监听函数

unwatch() // 取消观察函数

4.立即触发监听

我们有时会有这个需求，在页面初始化时执行某个监听。因此，我们可能会在 created 中去调用需要执行的监听代码，但现在我们可以使用 immediate 来实现这个功能。

 watch: {
  'form.status'() {
   handler(val, oldVal) {
    // 执行一些操作
   },
   immediate: true
  }
 }

补充知识：vue watch监听数据，新老值一样？让其不一样吧！

我就废话不多说了，大家还是直接看代码吧~

 data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testData: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  }

如果testData发生了变化，就会打印出val，olVal，但是他们打印出来的结果都是一样的，因为数据同源。虽然可以监听到他的变化，但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。

  data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testDataNew: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  },
  computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }

以上这篇vue深度监听(监听对象和数组的改变)与立即执行监听实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解Vue中watch对象内属性的方法

vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内
vue 监听 Treeselect 选择项的改变操作

项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值. 我使用了watch 来监听 treeselect 绑定的 model ,如果 model 的值发生变化就触发 currDeptChange 事件. <el-form-item prop="deptId" :label="$t('deviceManage.device.table.deptId')+':'"> <treeselec
vue中watch和computed的区别与使用方法

computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对
vue.js使用watch监听路由变化的方法

watch除了可以监听数据的变化,路由的变化也能被其监听到效果如下: 具体代码当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe
vue在App.vue文件中监听路由变化刷新页面操作

在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.
vue深度监听(监听对象和数组的改变)与立即执行监听实例

1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

因为本身layui是有一套自身的监听方式,form.on 当然你是先将select放入<div class="layui-form">中,不然都显示不出select 里面也有监听普通下拉选框选中值发生改变的方式,直接复制即可 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu
vue.js父组件使用外部对象的方法示例

最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic
json对象及数组键值的深度大小写转换问题详解

前言最近在做一个项目,发现后端返回的数据键值全部都是大写的,有时候前端用起来很不方便,所以写了一个深度转换的小工具,分享给大家,也就不用重复造轮子了,不喜勿喷,下面话不多说了,来一起看看详细的介绍吧. start npm i deep-lu-trans --save json example import t from 'deep-lu-trans'; const obj = { AS_DD_S: 123213, AND_SAJ_JDK_JSAKD_: { DJK_ASJ: { SA_DSA_
vue检测对象和数组的变化分析

在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化但data111.b = 2:和vm.b = 2这个不能检测到变化需要用 Vue.set(o
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo
Vue实现动态添加或者删除对象和对象数组的操作方法

添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然
vue利用v-for嵌套输出多层对象,分别输出到个表的方法

如下所示: specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] } ] <table class="table table-bordered table-hover table-item spggdytable" id="ggxtable" v-show="is
vue修改对象的属性值后页面不重新渲染的实例

最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景我们在使用vue 编写代码时,我们有一个多行文本框控件,希望在页面点击一个按钮在文本框焦点位置插入一个 {pk}的数据. 发现插入这个数据后,这个数据并没有同步到数据中,但是直接通过键盘输入,就可以改变数据. 原因分析在通过 JS 修改控件的value 数据后,并没有触发到数据更新. 解决办法 Vue.component('rx-textarea', {

vue深度监听(监听对象和数组的改变)与立即执行监听实例

相关推荐

随机推荐