vue里的watch 和 computed 监听的不同

时间:2022-09-05 12:28:23

1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果,

所以k不能与data里的k重名,并且必须有return,

能够缓存,依赖的值不变化不会进行重复计算;

而watch是监听data里的值的变化,k是data里的k,不能自己单独定义k

watch里经常放异步函数。

不能缓存。

watch顾名思义,用于监听数据变化,其中可以监听的数据来源有三部分:props、data、computed内的数据;watch提供两个参数(newValue,oldValue),第一个参数是新值,第二个参数保存旧值;

computed用于处理复杂的逻辑运算,主要和methods储存方法来进行区分;methods储存方法,,computed储存需要处理的数据值;methods每次都会调用,computed有缓存机制,只有改变时才执行,性能更佳;

   <div id="app">
<input type="text" v-on:input='input'>
<ul>
<li v-for='item in result'>{{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag: false,
result:[], },
methods:{
input:function(){
this.flag = true
}
},
watch:{
flag:function(newValue,old){//两个参数表示变化之前的值和变化之后的值 setTimeout(()=>{
this.result = [1,2,3,4,5] console.log(old,newValue) },500) } } })

vue里的watch 和 computed 监听的不同的更多相关文章

  1. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  2. vue computed监听多个属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 关于deep watch &sol; computed 监听不到 vuex state 对象变化的的问题

    简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...

  4. onscroll事件没有响应的原因以及vue&period;js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt ...

  5. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  6. Vue 变量,成员,属性监听

    Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  7. Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式

    在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值. 接下来就说一下,当seesionSt ...

  8. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  9. Vue引用第三方datepicker插件无法监听datepicker输入框的值

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期: ...

随机推荐

  1. Atitit&period; 破解 &&num;160&semi;拦截 绕过 网站 手机 短信 验证码 &&num;160&semi;方式 v2 attilax 总结

    Atitit. 破解  拦截 绕过 网站 手机 短信 验证码  方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码  用户操作 ,比如 ...

  2. knockoutJS学习笔记06:ko数组与模板绑定

    前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...

  3. pyodbc不支持使用&percnt;,应该使用?

    pyodbc不支持使用%,应该使用? 如: Sql插入语句cur.execute("INSERT INTO bb VALUES (?,?,?)","s",&qu ...

  4. SpringMVC学习系列(6) 之 数据验证

    在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 —> 数据验证. 这里我们采用Hibernate-validator来进行验 ...

  5. BZOJ3676 &lbrack;Apio2014&rsqb;回文串

    Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...

  6. POJ 3258 River Hopscotch &lpar;binarysearch&rpar;

    River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5193 Accepted: 2260 Descr ...

  7. Task 使用 Task以及Task&period;Factory都是在&period;Net 4引用的。Task跟Thread很类似,通过下面例子可以看到。

    static public void ThreadMain() { Thread t1 = new Thread(TaskWorker); t1.Start(3); } static public v ...

  8. &lpar;转&rpar;CocoaPods:管理Objective-c 程序中各种第三方开源库关联

    在我们的iOS程序中,经常会用到多个第三方的开源库,通常做法是去下载最新版本的开源库,然后拖拽到工程中. 但是,第三方开源库的数量一旦比较多,版本的管理就非常的麻烦.有没有什么办法可以简化对第三方库的 ...

  9. &lbrack;bzoj P4504&rsqb; K个串

    [bzoj P4504] K个串 [题目描述] 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计一次 ...

  10. Intellij IDEA使用Docker插件部署应用

    1.安装Docker插件 配置Docker Api,在API URL中填入api的地址,记得Docker后台程序启动是要配置 -H tcp://0.0.0.0:2375 开放远程地址端口,注意这里的i ...