vue watch自动检测数据变化实时渲染的方法


Posted in Javascript onJanuary 16, 2018

本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下:

首先确认 watch是一个对象,一定要当成对象来用。

对象就有键,有值。

键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

值也可以是函数名:不过这个函数名要用单引号来包裹。

第三种情况厉害了。

值是包括选项的对象:选项包括有三个。

  1. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  2. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  3. 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

watch实例

vue watch自动检测数据变化实时渲染的方法

上次讲到可以使用this.$set或vm.set来动态的改变,已经渲染在页面上的数据(添加,删除)重新计算重新渲染。

有时候你会需要,动态的改变某个数据或者值,然后根据你改变的值再做出其它的处理操作(如:显示,隐藏,增,删)等,如下面代码例子:

这里举个Tab的例子:

在vue的项目里新建一个Tab的组件页面

<template>
{{index}}
 <div>
   <div @click="showFun(0)">Tab1</div>
   <div @click="showFun(1)">Tab2</div>
   <div @click="showFun(2)">Tab3</div>
 </div>
 <div>
   <div v-if="index == 0">cont1</div>
   <div v-if="index == 1">cont1</div>
   <div v-if="index == 2">cont1</div>
 </div>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值,做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch可以让你自定义一个侦听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

我再举一个搜索的例子:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: '' // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }, 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

举了两个简单的例子,希望对大家能有所帮助~也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
python实现年会抽奖程序
2019/01/22 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
面料业务员岗位职责
2013/12/26 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
五年级作文之成长
2019/09/16 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python