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随之改变

结果:



原文地址:https://www.cnblogs.com/php-noob-for-now/p/10975340.html

时间: 2024-10-09 16:35:29

vue 侦听器watch 之 深度监听 deep的相关文章

Vue入门四、单个监听watch、深度监听deep、多个监听computed

watch单个监听computed多个监听当watch监听复杂数据类型的时候需要做深度监听deepwatch深度监听deep表达式: // 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } } watch深度监听 <!DOCTYPE html> <html lang="en"> <head

vue中如何深度监听一个对象?

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那么如何实现对象属性的深度监听呢? vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; demo:   https://run.iviewui.com/oW2m2Jo7 直接监听对象--代码如下: 1 watch:{ 2 obj:{ //监听的对象 3 deep:tr

Vue.js中 watch(深度监听)的最易懂的解释

<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: {

Vue.js中 watch(深度监听)的最易懂的解释[转]

https://blog.csdn.net/qq_36688143/article/details/81287535 taskData: { handler(v) { // watch 方法其实默认写的就是这个handler console.log(v); }, immediate: true, // 那我们想要一开始就让他最初绑定的时候就执行 deep: true // deep,默认值是 false,代表是否深度监听} 原文地址:https://www.cnblogs.com/webSong

vue 中监听窗口发生变化,触发监听事件, window.onresize &amp;&amp; window.addEventListener(&#39;resize&#39;,fn) ,window.onresize无效的处理方式

1 // 开始这样写,不执行 2 window.onresize = function() { 3 console.log('窗口发生变化') 4 } 5 6 7 // 改成window监听事件 8 window.addEventListener('resize', function() { 9 console.log('窗口发生变化') 10 }) onresize的定义方式 一.直接在html中定义 如<body onresize="doResize()"/> 二.直接

问题1:Oracle数据库监听启动失败(重启监听,提示The listener supports no services)

编辑监听文件:/home/DB/oracle/11gR2/db/network/admin/listener.ora 在文件内添加静态监听实例,如下内容: SID_LIST_LISTENER =(SID_LIST = (SID_DESC = (GLOBAL_DBNAME = orcl) (SID_NAME = ora11g) )) 要注意的是,全局名和实例名要完全正确,此处区分大小写,比如之前试过,实际SID实例名是:ORA11g,但是我写成了ora11g,结果发现还是启动不了,把实例名改成OR

vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show"> 自定义键盘信息: Vue.directi

Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)

现象:Windows 操作系统的Oracle 数据库,使用sqlplus 连接(不指定实例名)连接很快,程序连接或使用连接工具或在Net Manager 中测试连接都需要花费约三四十秒的时间(程序连接可能失败). 通过tsping localhost 测试,亦花费三四十秒. 查看监听警告日志(所在位置在文章后面介绍),有信息如下: <msg time='2017-05-16T16:57:51.811+08:00' org_id='oracle' comp_id='tnslsnr' type='U

apache 使用心得(启动多实例,单实例监听多端口,单实例监听多域名)

很久之前就手动配置过apache了,今天遇到一个需要在阿里云服务器上配置apache路由多个域名到不同的服务器根目录这样的问题,研究了一段时间,得出了下面的心得,分享给大家~ *以windows系统为例子 下面要会说到的内容: 1 开启多个apache实例,监听多个端口(作用就是方便读取不同的配置文件) 2 单个apache实例监听多个端口 3 单个apache实例监听一个端口(80),实现不同域名访问80端口的时候,指向不同的服务器根目录 1 开启多个apache实例 httpd.exe -k