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(){
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
},
watch: {
person: {
handler(n,o){
this.person.fullname = n.firstname + ' ' + this.person.lastname;
},
// immediate: true, //刷新加载 立马触发一次handler
// deep: true // 可以深度检测到 person 对象的属性值的变化
}
} }
</script>
结果:
handler 方法就相当于普通侦听器触发的事件,从结果可以看到,组件初始化的时候,侦听器并没有handler方法 所以fullName是没有值的
当修改以上代码,加上immediate: true,组件初始化的时候,侦听器会立马(immediate)触发handler方法
结果:
当在输入框中输入数据时, 可以发现fullName的值并没有随之改变
结果:
这是因为vue无法检测到对象内部属性值的变化 比如person.firstname的变化
所以此时 需要用到vue的深度监听(deep)
此时加上代码 deep: true
可以发现 每次输入框数据变化 fullname随之改变
结果:
vue 侦听器watch 之 深度监听 deep的更多相关文章
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- vue watch 深度监听以及立即监听
vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...
- Vue.js中 watch(深度监听)的最易懂的解释
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- vue watch 深度监听
watch 是vue 里非常有用的回调函数,监听数据变化,非常方便好用,但是,当监听的数据是个复杂型的数据里,里面的数据变化时普通的监听方式是监听不到的,必须使用深度监听: data() { retu ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...
- 每天一点点之vue框架 watch监听变量(深度监听)
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- vue中如何深度监听一个对象?
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
- Vue.js中 watch(深度监听)的最易懂的解释[转]
https://blog.csdn.net/qq_36688143/article/details/81287535 taskData: { handler(v) { // watch 方法其实默认写 ...
- vue中watch深度监听
监听基本类型的都是浅度监听 watch的深度监听,监听复杂类型都是深度监听(funciton ,arrat ,object) // 监听对象 data(){ return { a:{ b:, c: } ...
随机推荐
- Symbol类型是不可枚举的
const info = { [Symbol('a')]: 'b' } console.log(info)//{Symbol('a'): 'b'} console.log(Object.keys(in ...
- Codeforces Edu Round 57 A-D
A. Find Divisible 符合条件的区间一定可以选择\(l, l * 2\). 证明\(l * 2 <= r\) 假设存在一组解,\(x, x * d (l <= x <= ...
- CF484B Maximum Value
这个东西他一开始也是草稿 题解 我们考虑在值域上做,设值域为 \(m\) . 我们可以考虑数论分块,对于一对 \(a_i\) 和 \(a_j\) ,$\left \lfloor \frac{a_i}{ ...
- CentOS7搭建Hadoop-3.3.0集群手记
前提 这篇文章是基于Linux系统CentOS7搭建Hadoop-3.3.0分布式集群的详细手记. 基本概念 Hadoop中的HDFS和YARN都是主从架构,主从架构会有一主多从和多主多从两种架构,这 ...
- Day1 数据类型
整数 十六进制和八进制使用0作为前缀,如 0x12f , 010浮点数 可以用科学计数法来表示很大或者很小的浮点数,如 1.23x10^9 可以写作 1.23e9 或者12.3e8 ,0.000012 ...
- CSS3全览_文本+视觉+盒子+背景颜色
CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...
- 关于golang的time包总结
目录 前言 time包详解 总结 前言 各种编程语言都少不了与时间有关的操作,因为很多判断都是基于时间,因此正确和方便的使用时间库就很重要额. golang提供了import "time&q ...
- Java中多线程安全问题实例分析
案例 1 package com.duyang.thread.basic.basethread; 2 3 /** 4 * @author :jiaolian 5 * @date :Created in ...
- 浅谈JAVA代码优化
JAVA代码的优化分为两个方面: 一.减小代码的体积.二.提高代码的执行效率. ============================================================ ...
- Sqlmap 学习笔记1:sqlmap参数
SQLMP参数分析 1 目录 1.Target Options 2.Requests Options 3.Injection Options 4.Detection Options 5.Techniq ...