Vue之数据监听

当数据监听的是列表时,数据发生改变,不会被监听到。

// 用$set修改数组中的数组能够被监听
// app.$set(this.hobby, 0, "爱你哦");

<div id="app">
{{name}}
<hr>
{{hobby}}
<hr>
{{obj}} <button @click="my_click">点我改变数据</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "wjs",
hobby: ["抽烟", "喝酒", "烫头"],
obj: {
age: 32,
face: null,
}
},
methods: {
my_click: function () {
// 改变数据
// this.name = "wjs0521"
// 改变数组的长度
// 改变数组长度能够被监听到 新值和旧值相同
// this.hobby.push("生活美滋滋");
// 改变数组中的值 不能被监听到 深度监听也不可以
// this.hobby[0] = "爱你哦";
// console.log(this.hobby);
// 用$set修改数组中的数组能够被监听
// app.$set(this.hobby, 0, "爱你哦"); }
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal)
}
},
hobby: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true // 深度监听
}
}
})
</script>

  

Vue之数据监听存在的问题的更多相关文章

  1. Vue获取dom和数据监听

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

  2. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

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

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

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

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

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

  5. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

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

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

  7. Python黑客编程基础3网络数据监听和过滤

    网络数据监听和过滤 课程的实验环境如下: •      操作系统:kali Linux 2.0 •      编程工具:Wing IDE •      Python版本:2.7.9 •      涉及 ...

  8. vue2.0 之计算属性和数据监听

    计算属性computed <template> <div> <input type="text" name="" v-model= ...

  9. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

随机推荐

  1. jsexcel导出插件

    ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...

  2. LeetCode OJ 199. Binary Tree Right Side View

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  3. POJ2524:Ubiquitous Religions (并查集模板)

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  4. AJAX 在手机上用时

    Response.ContentType = "text/html; text/plain; charset=UTF-8";

  5. C++ 实验2

    #include <iostream> using namespace std; template<class T> void insertionSort(T a[],int ...

  6. rt-thread之rt_kprintf函数输出串口设备更改

    @2019-01-30 [小记] 一般 rt-thread 发布的 bsp 库默认的 rt_kprintf 函数的输出设备是串口1,想要更改输出设备为串口1,以 stm32 为例步骤如下: 首先,打开 ...

  7. Django 自定义过滤器

    设定自定义过滤器之前要现在配置文件内把自己项目名在 INSTALLED_APPS 内导入 #已安装的django应用 INSTALLED_APPS = [ 'django.contrib.admin' ...

  8. grpc(三)之grpc客户端使用连接池

    本文使用commons-pool2来实现连接池应用 1.定义一个产生连接池的工厂,需要继承BasePooledObjectFactory,其用处是生产和销毁连接池中保存的对象.根据需求,现在池子里保存 ...

  9. GVRP

    一.GARP和GVRP GARP全称是通用属性注册协议(Generic Attribute Registration Protocol),它为处于同一个交换网内的交换成员之间提供了分发.传播.注册某种 ...

  10. 更精确的判断对象类型js方法

    function isArray(o) { return Object.prototype.toString.call(o) === '[object Array]'; } function isRe ...