vue中如何深度监听一个对象?

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?

  1. vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;
    •  直接监听对象--代码如下:

      1 watch:{
      2   obj:{ //监听的对象
      3     deep:true, //深度监听设置为 true
      4     handler:function(newV,oldV){
      5       console.log(‘watch中:‘,newV)
      6     }
      7   }
      8 }
    •  监听对象下某个属性--代码如下:

          data () {
            return {
              obj:{
                name:‘夜空中最亮的星星‘,
                age:18
              }
            }
          },
          watch:{
            ‘obj.name‘:{
              deep:true,
              handler:function(newV,oldV){
                console.log(‘watch中:‘,newV)
              }
            }
          }

  2.利用computed配合watch实现单个属性的深度监听;

    •  代码如下:

       1     data () {
       2       return {
       3         obj:{
       4           name:‘夜空中最亮的星星‘,
       5           age:18
       6         }
       7       }
       8     },
       9     computed:{
      10       name(){
      11         return this.obj.name;
      12       }
      13     },
      14     watch:{
      15       name(newV){
      16         console.log(‘watch中name为:‘,newV)
      17       }
      18     }

原文地址:https://www.cnblogs.com/yuzhongyu/p/10444043.html

时间: 2024-11-05 21:48:25

vue中如何深度监听一个对象?的相关文章

Vue.js中 watch(深度监听)的最易懂的解释

<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: {

Vue.js中 watch(深度监听)的最易懂的解释[转]

https://blog.csdn.net/qq_36688143/article/details/81287535 taskData: { handler(v) { // watch 方法其实默认写的就是这个handler console.log(v); }, immediate: true, // 那我们想要一开始就让他最初绑定的时候就执行 deep: true // deep,默认值是 false,代表是否深度监听} 原文地址:https://www.cnblogs.com/webSong

vue中的事件监听之——v-on vs .$on

跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对照vue官网api学习并coding了相关代码,两者的用法与比较描述如下. v-on vm.$on 可监听普通dom的原生事件: 可监听子组件emit的自定义事件: 监听当前实例的自定义事件 vue官网相关说明截图: 由此可见,想监听vue实例自身自定义事件,只能用.$on并且这是vue实例的方法,

vue中的事件监听机制

事件监听 基础用法 监听dom事件使用v-on指令: v-on:事件类型="一个函数" .这个事件类型可以自定义. v-on 指令绑定事件后,就会监听相应的事件,并在触发时运行一些 JavaScript 代码. <div id="box1"> <button v-on:click="counter += 1">点我</button> <p>已点击 {{ counter }} 次</p>

vue中的watch监听

watch: { '$route'(to, from) { if (from.name === 'addPurchase') {  } if (to.name === 'addPurchase') { } else {} } } 原文地址:https://www.cnblogs.com/wssdx/p/11506303.html

vue 侦听器watch 之 深度监听 deep

<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){ ret

Vue入门四、单个监听watch、深度监听deep、多个监听computed

watch单个监听computed多个监听当watch监听复杂数据类型的时候需要做深度监听deepwatch深度监听deep表达式: // 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } } watch深度监听 <!DOCTYPE html> <html lang="en"> <head

Angular.JS中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

Angular中使用$watch监听

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n