<!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. vue实现简单日历

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. NFine框架全选checkBox列错位

    在jqgrid.css里找到 .ui-jqgrid .cbox{margin-left: -1px;position: initial;vertical-align: text-bottom;}.ui ...

  3. Tippy.js – 轻量的 Javascript Tooltip 工具库

    工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...

  4. ImportError: libcudnn.so.5: cannot open shared object file: No such file or directory

    ubuntu16.04安装cuda8.0,tensorflow-gpu版本后,运行时报错: ImportError: libcudnn.so.5: cannot open shared object ...

  5. mac 下node，yarn安装及版本切换

    node安装 https://nodejs.org/en/download/ 到官网下载指定版本 安装node的管理工具 sudo npm install -g n //安装n sudo n 8.9. ...

  6. mysql每组前N条

    SELECT * from ( select end rownum, else @prov:=t.province end prov, t.* from ( money UNION all money ...

  7. python 之 configparser 模块

    [root@linag python]# vim config.py import configparser config = configparser.ConfigParser() config[' ...

  8. nnet3中的数据类型

    目标与背景 之前的nnet1和nnet2基于Component对象,是一个组件的堆栈.每个组件对应一个神经网络层,为简便起见,将一个仿射变换后接一个非线性表示为一层网络,因此每层网络有两个组件.这些旧 ...

  9. Yii2 restful api创建，认证授权以及速率控制

    Yii2 restful api创建,认证授权以及速率控制 下面是对restful从创建到速率控制的一个详细流程介绍,里面的步骤以及截图尽可能详细,熟悉restful的盆友可能觉得过于繁琐,新手不妨耐 ...

  10. python之第三方模块安装

    1. 直接打开cmd窗口运行 pip install xxx   #可联网情况下使用,联网下载 xxx表示要安装的模块名称 pip问题及解决方法: 1. 配置环境变量,将如下两个路径都加到系统path ...