文档章节

vue---watch深度理解

o
 osc_odyg6b92
发布于 2018/07/13 14:36
字数 276
阅读 7
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

<div id="watch-example">
        <p>{{fullName}}</p>
        <input type="text"  v-model="firstName">
        <br/><br/><br/><br/><br/>
        <input type="text" v-model="obj.a">
        <br/>
        obj.a:<p>{{obj.a}}</p>
    </div>
var app = new Vue({
            el:"#watch-example",
            data:{
                firstName:'Alisa',
                lastName:'Smith',
                fullName:"",
                obj:{
                    a:"123"
                }
            },
            watch:{
                // firstName(newValue,oldValue){
                //     console.log(newValue+"---"+oldValue);
                //     this.fullName = newValue+" "+this.lastName;
                // }

                // watch最开始绑定的时候是不会执行的,要等到监听的那个元素改变时才会执行,想要一开始就执行watch,就用handler方法,且handler方法里面的immediate要为true

                firstName:{
                    handler(newValue,oldValue){
                        console.log(newValue+"---"+ oldValue);
                        this.fullName = newValue+" "+this.lastName;
                    },
                    immediate:true
                },
                // obj(newData,oldData){
                //     console.log(newData+"---"+oldData);
                // }
                
                //vue不能检测到对象的增加或删除,如果我们需要监听obj的属性a的值,可以用deep,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
                obj: {
                    handler(newData, oldData) {
                        console.log(newData + "---" + oldData);
                    },
                    immediate: true,
                    deep: true
                },
                //优化:使用字符串形式监听。
                
                'obj.a':{
                    handler(newData, oldData) {
                        console.log(newData+"---"+oldData);
                    },
                    immediate: true,
                    //deep:true
                }
            }
        })    

 

  原文地址:https://dunizb.com/2018/04/28/Vue-js-watch-Advanced-Usage/

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
DephtInition

使用微软Kinect平台进行3D扫描是一种常见方法,如今计算机工程师吉安卡洛已经找到了一种新的方式:使用对焦堆叠。这个概念被称为焦点深度,通常使 用在显微镜中。吉安卡洛将其进行了简化,设...

troika
2013/06/30
2K
1
SmartGWT学习整理 2、理解核心中的核心DataSource

SmartGWT学习整理 2、理解核心中的核心DataSource DataSource之所以重要,是因为它负责所有的与服务器的数据交互,几乎所有的控件都离不开它。 可以这样说,理解了DataSource就掌握了SmartGW...

st97
2010/11/16
2K
2
理解Swift中Optional类型-有和无的哲学

原文连接:http://blog.barat.cc/ios/understanding-swift-optional/ nil的遗憾 当某个变量或表达式没有任何内容时,在Objective-C中可以使用来表示。在Objective-C中是一个「野孩子」,voi...

巴拉迪维
2015/11/19
1.8K
9
深度吐槽hibernate

hibernate我很久都没有用了,最后一次用应该是3年前的一个企业项目,决定采用hibernate的并不是我,是我领导,我只是开发者。我所受的罪领导并不知道。正如我的每个hibernate项目那样,每次我...

闲大赋
2015/12/23
5.2K
56
卷积神经网络初探

前言 目前为止我已经完整地学完了三个机器学习教程:包括“Stanford CS229”,"Machine Learning on Coursrea" 和 "Stanford UFLDL",卷积神经网络是其中最抽象的概念。 维基百科对卷积的数学...

Lee的白板报
2015/12/24
8.4K
14

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
43分钟前
13
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
今天
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部