Vue之methods watch和compute的区别和联系
computed是用来把多个基础的数据组合成一个复杂的数据;同时获得了vue提供的自动变更通知机制。
即将基础数据变为复杂数据,同时获得自动变更通知机制 watch是利用了vue的自动变更通知机制,用于把这一变化扩散出去(实现相关的更新逻辑或者做和computed相反的事情)。
即利用自动变更通知机制,将变化扩散出去
分享篇不错的文章
目录
正文
从作用机制和性质上看待methods,watch和computed的关系


作用机制上
从性质上看
computed:{
fullName: function () { return this.firstName + lastName }
}
watch: {
firstName: function (val) { this.fullName = val + this.lastName }
}
watch和computed的对比


watch擅长处理的场景:一个数据影响多个数据



var vm = new Vue({
el: '#app',
/*
data选项中的数据:
1.haiZeiTuan_Name --> 海贼团名称
2.船员的名称 = 海贼团名称(草帽海贼团) + 船员名称(例如索隆)
这些数据里存在这种关系:
(多个)船员名称数据 --> 依赖于 --> (1个)海贼团名称数据
一个数据变化 ---> 多个数据全部变化
*/
data: {
haiZeiTuan_Name: '草帽海贼团',
suoLong: '草帽海贼团索隆',
naMei: '草帽海贼团娜美',
xiangJiShi: '草帽海贼团香吉士'
},
/*
在watch中,一旦haiZeiTuan_Name(海贼团名称)发生改变
data选项中的船员名称全部会自动改变 (suoLong,naMei,xiangJiShi)
并把它们打印出来
*/
watch: {
haiZeiTuan_Name: function (newName) {
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
console.log(this.suoLong)
console.log(this.naMei)
console.log(this.xiangJiShi)
}
}
})
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '橡胶海贼团'



// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '肉肉海贼团'
demo:


computed擅长处理的场景:一个数据受多个数据影响



var vm = new Vue({
el: '#app',
/*
data选项中的数据:firstName,secName,thirdName
computed监控的数据:lufei_Name
两者关系: lufei_Name = firstName + secName + thirdName
所以等式右边三个数据任一改变,都会直接修改 lufei_Name
*/
data: {
// 路飞的全名:蒙奇·D·路飞
firstName: '蒙奇',
secName: 'D',
thirdName: '路飞'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)

demo:

但是:
// 将“D”改为“H”
vm.secName = 'H'
// 打印路飞的全名
console.log(vm.luFei_Name)


methods不处理数据逻辑关系,只提供可调用的函数

new Vue({
el: '#app',
template: '<div id="app"><p>{{ say() }}</p></div>',
methods: {
say: function () {
return '我要成为海贼王'
}
}
})



从功能的互补上看待methods,watch和computed的关系


利用computed处理methods存在的重复计算情况



new Vue({
el: '#app',
// 设置两个button,点击分别调用getMethodsDate,getComputedDate方法
template: '<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>',
methods: {
getMethodsDate: function () {
alert(new Date())
},
// 返回computed选项中设置的计算属性——computedDate
getComputedDate: function () {
alert(this.computedDate)
}
},
computed: {
computedDate: function () {
return new Date()
}
}



rz~_sv0kcq8g%7D@p.png)



6)h_5%7Bu7liv2$p.png)
利用computed处理watch在特定情况下代码冗余的现象,简化代码



new Vue({
el: '#app',
data: {
fullName: '彭湖湾',
firstName: '彭',
secName: '湖',
thirdName: '湾'
},
// watch中的代码显然是同类型,重复的,它并不简洁,也不优雅
watch: {
firstName: function (newValue) {
this.fullName = newValue + this.secName + this.thirdName
console.log(this.fullName)
},
secName: function (newValue) {
this.fullName = this.firstName + newValue + this.thirdName
console.log(this.fullName)
},
thirdName: function (newValue) {
this.fullName = this.firstName + this.secName + newValue
console.log(this.fullName)
}
}
})


new Vue({
el: '#app',
data: {
fullName: '彭湖湾',
firstName: '彭',
secName: '湖',
thirdName: '湾'
},
// 对watch中的代码进行重构,实现同样效果
computed: function () {
this.fullName = this.firstName + this.secName + this.thirdName
console.log(this.fullName)
}
})

.
Vue之methods watch和compute的区别和联系的更多相关文章
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- 【Vue】谈Vue的依赖追踪系统 ——搞懂methods watch和compute的区别和联系
从作用机制和性质上看待methods,watch和computed的关系 图片标题[原创]:<他三个是啥子关系呢?> 首先要说,methods,watch和computed都是以函数为基础 ...
- 谈谈vue.js中methods watch和compute的区别和联系
methods,watch和computed都是以函数为基础的,但各自却都不同: 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- about use Vue of methods
methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...
- vue中methods中的方法闭包缓存问题
vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...
随机推荐
- [Linux] Nginx服务下统计网站的QPS
单位时间的请求数就是QPS,那么在nginx服务的网站下,如果要统计QPS并且按从高到低排列,需要使用awk配合sort进行处理awk做的主要工作是把access每行日志按分隔符分开,然后循环每一行, ...
- 006.MongoDB副本集
一 MongoDB 复制(副本集) 1.1 复制概述 MongoDB复制是将数据同步在多个服务器的过程. 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性, 并可以保证数据的 ...
- TensorFlow从1到2(十一)变分自动编码器和图片自动生成
基本概念 "变分自动编码器"(Variational Autoencoders,缩写:VAE)的概念来自Diederik P Kingma和Max Welling的论文<Au ...
- C++ class 内的 () 重载示例
#include <iostream> // overloading "operator () " outside class //////////////////// ...
- 站点部署,IIS配置优化指南[转]
站点部署,IIS配置优化指南 目录 一. 设置应用程序池默认设置 二. 常规设置 三. 优化回收策略 四. 性能 五. IIS初始化(预加载 ...
- 第05组 Beta冲刺(2/4)
第05组 Beta冲刺(2/4) 队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了哪 ...
- WPF 精修篇 用户控件
原文:WPF 精修篇 用户控件 增加用户控件 数据绑定还是用依赖属性 使用的事件 就委托注册一下 public delegate void ButtonClick(object b,EventArgs ...
- Mybatis智能标签
一.ProviderDao层 //智能标签案例 //智能标签多条件查询 public List<Provider> providerTest(@Param("proCode&qu ...
- PHP 多进程和多线程的优缺点
PHP 多进程和多线程的优缺点 多进程 1.使用多进程, 子进程结束以后, 内核会负责回收资源 2.使用多进程, 子进程异常退出不会导致整个进程Thread退出. 父进程还有机会重建流程. 3.一个常 ...
- 11-scrapy(递归解析,post请求,日志等级,请求传参)
一.递归解析: 需求:将投诉_阳光热线问政平台中的投诉标题和状态网友以及时间爬取下来永久储存在数据库中 url:http://wz.sun0769.com/index.php/question/que ...