<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>

<body>

<div id="app">

    {{name}}

    {{hobby}}

    {{xuge_obj}}

    <button @click="my_click">点击改变数据</button>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            name: "旭哥",

            hobby: ["唱歌", "跳舞", "请客吃饭"],

            xuge_obj: {

                obj1: "王铁锤",

                obj2: "李刚蛋"

            }

        },

        methods: {

            my_click: function () {

                // this.name = "病变"

                // this.hobby.push("烫头")

                // this.hobby[0] = "狼嚎"

                // console.log(this.hobby)

                // 用下面这种方法改变数据里的值

                // app.$set(this.hobby, 0, "狼嚎")

                this.xuge_obj.obj1 = "小粉嫩"

            }

        },

        watch: {

            name: {

                handler: function (val, oldVal) {

                    console.log(val)

                    console.log(oldVal)

                }

            },

            // push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的

            // 不能监听到数据里值的改变 深度监听也不可以 除非用$set

            hobby: {

                handler: function (val, oldVal) {

                    console.log(val)

                    console.log(oldVal)

                },

                // deep: true

            },

            xuge_obj: {

                handler: function (val, oldVal) {

                    console.log(val)

                    console.log(oldVal)

                },

                deep: true

            }

        }

    })

</script>

</body>

</html>

　　-  push:

　　　　改变数据的长度的时候  可以监听到数据改变, 新旧值是一样的

　　　　不能监听到数据里面值的改变, 深度监听也不可以

　　- $set:

　　　　改变数据的长度的时候, 可以监听到数据改变,新旧值是不同的,可以监听到数据里的值的变化

　　- watch:

　　　　该属性是在绑定   id= app的时候的实例化的Vue中的参数, 该参数对应的值是一个对象,该对象中

　　　　包含的是需要被监听的   data 中存在且被定义了的对象,该对象中包含的参数有: handler,deep;

　　-handler:   对应函数,该函数,是对被监听属性的新旧值进行操作;

　　　　-参数解释:

　　　　　　-val : 新值

　　　　　　-oldval: 旧值

　　　　- deep:是否开启深度监听

Vue -- 数据监听的更多相关文章

  1. vue 数据监听原理

    Vue.prototype.listenDatas = function(){ for(var attr in this.$data){ this.listenData(this,attr,this. ...

  2. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  3. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  4. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  5. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  6. 谈谈数据监听observable的实现

    一.概述 数据监听实现上就是当数据变化时会通知我们的监听器去更新所有的订阅处理,如: var vm = new Observer({a:{b:{x:1,y:2}}}); vm.watch('a.b.x ...

  7. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

  8. Vue3 为何使用 Proxy 实现数据监听

    博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...

  9. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

随机推荐

  1. IPython--转

    IPython使用学习笔记 学习<利用python进行数据分析>第三章 IPython:一种交互式计算和开发环境的笔记,共享给大家,同时为自己作为备忘用. 安装ipython用pip即可. ...

  2. Native APP ，Web APP，Hybrid APP三者对比

    Native APP Native APP 指的是原生程序(Android.iOS.WP),一般依托于操作系统,有很强的交互,可拓展性强,需要用户下载安装使用,是一个完整的App. 原生应用程序是某一 ...

  3. MongoDB统计文档(Document)的数组(Array)中的各个元素出现的次数

    一,问题描述 [使用 unwind 操作符 “解包” Document 里面的Array中的每个元素,然后使用 group 分组统计,最后使用 sort 对分组结果排序] 从 images.json ...

  4. 酷狗.kgtemp文件加密算法逆向

    该帖转载于孤心浪子--http://www.cnblogs.com/KMBlog/p/6877752.html 酷狗音乐上的一些歌曲是不能免费下载的,然而用户仍然可以离线试听,这说明有缓存文件,并且极 ...

  5. SQL Server进阶 窗口函数

    概述  设计窗口函数目的? 在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成. 为了解决这些问题,在 2003 年 ISO SQL 标准加入了 ...

  6. java保留字

    //*********java保留字 //*********访问控制 private //私有 protected //受保护 public //公共 //*********类.方法和变量修饰符 ab ...

  7. 【核心】project(idea文件)、module(iml文件)到SSM集成、热部署、Tomcat启动、MAVEN依赖冲突

    http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/project-composition-introduce.html 在 Inte ...

  8. windows基本命令大全

    1.DOS常用命令详解 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录. copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化磁盘. ...

  9. Protobuf学习

    https://www.jianshu.com/p/2265f56805fa https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.ht ...

  10. SpringBoot 使用 MyBatis 分页插件 PageHelper 进行分页查询

    前言:本文档使用的是 SpringBoot,如果是 Spring 还需要在 MyBatis 配置 xml 中配置拦截器,并且 PageHelper 是针对 MyBatis 的,MyBatis 的集成不 ...