谈谈vue.js中methods watch和compute的区别和联系
methods,watch和computed都是以函数为基础的，但各自却都不同；
1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。
而不像watch和computed那样，“自动执行”预先定义的函数
3.computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会；
【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用
从性质上看：
1.methods里面定义的是函数，methods是方法，只要调用它，函数就会执行；
2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,
<p>原始数据：{{msg}}</p>
<p>改变后的数据：{{changemsg}}</p>
var vm=new Vue({
el:"#example",
data:{
msg:"hello",
},
computed:{ //计算属性
changemsg:function(){
return this.msg.split("").reverse().join("");
},
}
你在取用的时候，用this.changemsg去取用，就和取data一样（不要当成函数调用！！）
computed属性 VS watched 属性：
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响
watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
computed属性：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
需要注意的是，
methods调用的方法是没有缓存，
computed调用的方法是有缓存，如果之前调用过，则直接返回结果而不是重复计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
{{ message.split('').reverse().join('') }}
</div>
<h2>计算属性</h2>
<div>
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<button @click="change()">改变</button>
</div>
<h2>计算属性缓存 vs 方法</h2>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Reversed message: "{{ reversedMessage2() }}"</p>
<p>Reversed message: "{{ reversedMessage2() }}"</p> </div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
let count=1;
let vm=new Vue({
el:'#app',
data:{
message: 'Hello'
},
computed:{
// 计算属性的 getter
reversedMessage(){
count++;
// `this` 指向 vm 实例
return count+''+this.message.split('').reverse().join('')
}
},
methods:{
change(){
this.message="fdafdafsda";
}, reversedMessage2() {
count++;
return count+''+this.message.split('').reverse().join('')
}
}
}) </script>
</body>
</html>
原文出处：
https://my.oschina.net/u/3649083/blog/1560106
http://blog.java1234.com/blog/articles/533.html
谈谈vue.js中methods watch和compute的区别和联系的更多相关文章
- 深入解析Vue.js中v-bind v-model的使用和区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 ...
- vue.js中的computed和watch的区别
1.computed在调用时不需要加(),watch是不需要调用的2.computed如果属性没有发生改变时会从缓存中读取值,watch当属性发生改变时会接收到2个值:一个为新值,一个为旧值3.com ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- 谈谈Vue.js——vue-resource全攻略
本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 概述 上一篇我们介绍了如何将$.ajax和Vue. ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
随机推荐
- 【JS】JS实现Html转义和反转义（html编码和解码）的方法总结
1.JS实现html转义和反转义主要有两种方式: 1).利用用浏览器内部转换器实现html转义: 2).用正则表达式实现html转义: 2.封装的JS工具类: var HtmlUtil = { /*1 ...
- 【干货】SqlServer 总结几种存储过程分页的使用
就我而言写代码最烦的就是处理数据,其中之一就是分页的使用. 有的代码写多了,总结出一套适用自己的分页方法:有的查一下资料借鉴一下套用起来也达到目的. 那么小编在这里给大家总结几个方法供大家做一下参考. ...
- Wpf,Unity6
<?xml version="1.0" encoding="utf-8"?><packages> <package id=&quo ...
- SSM定时任务(spring3.0)
SSM定时任务主要分为两部分 1.applicationContext.xml配置文件设置 设置如下: 在xmlns中添加:xmlns:task="http://www.springfram ...
- Flask 教程 第三章：Web表单
本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...
- 用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat
用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat 摘自:https://zhidao.baidu.com/question/492732911.html @echo off ...
- flex布局开发
flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...
- 微信小程序底部导航栏（tabbar）
在app.json处设置“tabBar”,例子如下: { "pages": [ "pages/index/index", "pages/pages1/ ...
- FileProvider的使用
还望支持个人博客站:http://www.enjoytoday.cn 概述 Android 7.0的新特性规定,对于android 7.0应用(仅仅对于android 7.0版本的sdk而言,若是编译 ...
- UEFI Install CentOS 7
bios必须设置u盘为第一启动项 编辑E:\EFI\BOOT\grub.cfg中所有inst.stage2=hd:LABEL=*与卷标名称一致(区分大小写)(linux系统写入镜像无需修改) inst ...