`

vue2.0 watch

 
阅读更多

vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

也就是说watch可以监听对象的变化,规则是键值对方式。

export default {
    props: {
      fatherAjaxData: {
        type: Object
      }
    },
    data() {
      return {
        a: 1,
        b: 2,
        c: 3
      }
    },
    watch: {
      // 父级异步加载的数据 props 方式给到 当前子级
      fatherAjaxData: function (val, oldVal) {
        this.$nextTick(() => {
          console.log('监听到已异步加载的fatherAjaxData数据 已有值');
        });
      },
      a: function (val, oldVal) {
        console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
      },
      // watch_b_val_change 方法名
      b: 'watch_b_val_change',
      c: {
        handler: function (val, oldVal) {
          console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
        },
        deep: true // 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
      }
    },
    mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
      this.$nextTick(() => {
        console.log('vue页面加载完毕!');
      });
    },
    methods: {
      watch_b_val_change(val, oldVal) {
        console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
      }
    }
  };

 this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法

deep: 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

 

分享到:
评论

相关推荐

    解决Vue2.0 watch对象属性变化监听不到的问题

    发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。 请参照...

    vue2.0中文手册API

    这个"vue2.0中文手册API"是Vue 2.0的中文文档,对于学习和理解Vue的核心概念、组件化、指令、过滤器、插槽等内容非常有帮助。 1. **核心概念** - **虚拟DOM**:Vue采用虚拟DOM技术,通过计算差异并最小化实际DOM...

    vue2.0实战老师授课的源码分享

    在这个“Vue2.0实战老师授课的源码分享”中,我们可以深入学习和实践Vue 2.0的核心概念和最佳实践。 1. **Vue实例**:Vue 2.0 中,每个Vue应用始于一个Vue实例。实例是Vue对象,它们包含了数据、方法、生命周期钩子...

    VUE2.0集成 Markdown 编辑器

    7. **监听内容变化**:Vue的`watch`或者其他生命周期钩子可以用来监听Markdown内容的变化,比如在保存或提交时进行必要的处理。 集成Markdown编辑器后,还可以考虑增加实时预览、代码高亮、图片上传等功能,以...

    vue2.0离线官网文档(手册,教程,api)

    这个离线版的Vue 2.0官方文档包含了手册、教程和API,旨在帮助开发者在没有网络的情况下也能深入学习和查阅Vue 2.0的相关知识。 **手册部分** Vue 2.0的手册涵盖了从基础到高级的各种概念。它包括以下几个方面: 1...

    Vue.js实践:使用Vue2.0开发富交互WEB应用

    Vue2.0引入了`vue-nextTick`和`$watch`,以更好地控制数据更新的时机和顺序,确保了渲染的正确性。 在Vue2.0中,生命周期钩子函数也有所改变,如`beforeCreate`、`created`、`beforeMount`、`mounted`、`before...

    vue2.0基础教程

    Vue2.0引入了许多改进和优化,旨在提供更高效、更易用的开发体验。本教程将深入介绍Vue2.0的基础知识,帮助初学者快速上手。 一、Vue2.0的核心概念 1. **组件化**:Vue2.0强调组件化开发,将UI拆分为可复用的组件...

    vue1.0和vue2.0的watch监听事件写法详解

    本文详细解释了Vue1.0和Vue2.0版本中watch监听事件的不同写法,以及相关的知识点。 首先,需要了解的是,在Vue1.0和Vue2.0中,watch属性都是用来监视Vue实例上的数据变动,当数据发生改变时,可以执行相应的函数。...

    VUE2.0入门视频10

    在这个“VUE2.0入门视频10”中,我们将聚焦于Vue 2.0的核心概念之一:组件系统,特别是关于父组件如何向子组件传递参数。 组件是Vue.js设计的一大亮点,它允许开发者将UI分解为可复用的模块。在Vue 2.0中,组件可以...

    Vue2.0参考手册

    Vue.js 2.0 是一款流行的前端JavaScript框架,由尤雨溪开发,旨在简化Web应用程序的构建。Vue的核心设计理念是数据绑定和组件化,它提供了一种声明式、易理解和可维护的方式来处理用户界面。本手册将深入探讨Vue 2.0...

    最容易上手的vue2.0实战入门教程(第5-6章)

    Vue2.0是其重要版本,带来了许多优化和改进,使得开发更加高效和灵活。本教程聚焦于Vue2.0的实战入门,通过第五章和第六章的学习,您将深入理解Vue的核心概念和实际应用。 第五章:组件系统 Vue的核心之一就是组件...

    VUE 2.0 中文api

    Vue.js 2.0 是一款流行的前端JavaScript框架,由尤雨溪开发,广泛应用于构建用户界面。这个"Vue 2.0 中文API"文档是为开发者提供详细指南,帮助他们理解和利用Vue 2.0的功能。下面我们将深入探讨Vue 2.0的关键概念和...

    vue2.0中文离线API

    Vue 2.0 中文离线API提供了开发者在无网络环境下查阅Vue.js 2.0 API的便利,对于学习和工作中遇到的问题能够快速查证。 Vue的核心特性包括: 1. 双向数据绑定:Vue采用MVVM模式,通过`v-model`指令实现视图和模型...

    VUE2.0入门视频03

    "VUE2.0入门视频03"是一个针对初学者的教程系列,旨在帮助学习者快速掌握Vue 2.0的基本概念和实践技能。 在这一部分的课程中,你将了解到以下关键知识点: 1. **Vue实例**:Vue的核心是Vue实例,它是Vue应用的起点...

    Vue2.0用 watch 观察 prop 变化(不触发)

    总之,在Vue2.0中,通过`watch`直接监听prop的变化可能不会生效,因为这违反了单向数据流的原则。正确的方法是利用计算属性、`$emit`或者Vue提供的其他机制来达到目的。理解这些机制是构建高效、可维护的Vue应用的...

    vue2.0重新渲染数据三种方法

    在Vue2.0中,当你的应用程序数据发生变化时,Vue会自动进行视图的更新,这一过程被称为重新渲染。然而,由于JavaScript的某些特性,Vue无法自动检测到数组的某些特定变化,例如直接修改数组索引或添加/删除元素。在...

    vue源码解析,所有功能讲解(vue2.0-source-master.zip)

    这份"vue2.0-source-master.zip"压缩包提供了Vue 2.0的源代码和详细讲解,帮助开发者深入了解每个功能的实现。 Vue.js 的核心特性包括: 1. **声明式渲染**:Vue 使用模板语法使得HTML元素与数据绑定变得简单易懂...

    Vue2.0 V1.1版本 增删改查功能,全选单选与取消全选选项,使用localStorage本地存储数据和watch深度监听

    Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...

    最容易上手的vue2.0实战入门教程(第9-10章)

    Vue2.0是其重要版本,相较于Vue1.x,它引入了许多改进和优化,使得开发更加高效。在这个“最容易上手的Vue2.0实战入门教程”的第9-10章中,我们将深入探讨一些核心概念和实用技巧。 第9章:组件化开发 1. 组件基础...

Global site tag (gtag.js) - Google Analytics