Vue中computed和watch有哪些区别


Posted in Vue.js onDecember 19, 2020

计算属性computed:

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算
  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
  • 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello'
 },
 template: `
 <div> <p>我是原始值: "{{ message }}"</p> <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用 </div> `,
 computed: {
  // 计算属性的 getter   computedMessage: function () {
   // `this` 指向 vm 实例    return this.message.split('').reverse().join('')
  }
 }
})

结果:

我是原始值: "Hello"
我是计算属性的值: "olleH"

如果不使用计算属性,那么 message.split('').reverse().join('') 就会直接写到 template 里,那么在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响

而且计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算

所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性

侦听属性watch

  • 不支持缓存,数据变,直接会触发相应的操作。
  • watch支持异步;监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 当一个属性发生变化时,需要执行对应的操作;一对多;
  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数:
new Vue({
 data: {
  n: 0,
  obj: {
   a: "a"
  }
 },
 template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象</button> </div> `,
 watch: {
  n() {
   console.log("n 变了");
  },
  obj:{
   handler: function (val, oldVal) { 
   console.log("obj 变了")
  },
   deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深   },
  "obj.a":{
   handler: function (val, oldVal) { 
   console.log("obj.a 变了")
  },
   immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用   }
 }
}).$mount("#app");

不应该使用箭头函数来定义 watcher 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例

  • deep 控制是否要看这个对象里面的属性变化
  • immediate 控制是否在第一次渲染是执行这个函数

vm.$watch() 的用法和 watch 回调类似

  • vm.$watch('data属性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
   console.log("n 变了");
},{deep: true, immediate: true})

总结

  • 如果一个数据需要经过复杂计算就用 computed
  • 如果一个数据需要被监听并且对数据做一些操作就用 watch

以上就是Vue中computed和watch有哪些区别的详细内容,更多关于Vue中computed和watch的区别的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
You might like
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php 如何获取数组第一个值
2013/08/06 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python字典简介以及用法详解
2016/11/15 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Django如何配置mysql数据库
2018/05/04 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
安全资金保障制度
2014/01/23 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
污水处理保证书
2015/05/09 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
五年级语文教学反思
2016/03/03 职场文书