1. `computed`属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,要return出去一个值
2. `methods`方法表示一个具体的操作,主要书写业务逻辑;
3. `watch`一个对象,是需要观察的表达式是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是`computed`和`methods`的结合体,有newVal和oldVal两个参数;

三者比较:

相同点:都是一个function

不同点:

①computed要return出去一个值,watch不用

②methods里的function更侧重业务逻辑(大量)的处理,computed里的function不适合做大量业务逻辑

使用场景:

watch:适合监听一些虚拟的东西,如路由

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body> <div id="app"> <router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view> </div> <script> var login = {
template:'<h1>登录</h1>'
}
var register = {
template:'<h1>注册</h1>'
} var router = new VueRouter({
routes:[
{ path:'/',redirect:'login' },
{ path:'/login',component:login },
{ path:'/register',component:register },
],
linkActiveClass:'myactive'
}) var vm = new Vue({ el:'#app',
data:{},
methods:{},
router,
watch:{
//this.$route.path
'$route.path':function(newval){
console.log('ok')
if(newval === '/login'){
console.log('欢迎进入logon页面')
}
else if(newval === '/register'){
console.log('欢迎进入register页面')
}
}
} }) </script>
</body>
</html>

methods:适合做一些方法的调用

computed:可能需要引用一些数据,经过一系列的操作返回一个新的数据

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app"> <input type="text" v-model="firstname"> +
<input type="text" v-model="middlename"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname"> <p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p> </div> <script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
middlename: ''
},
methods: {},
computed: { // 在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用; // 注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
// 注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
// 注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所以来的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;
'fullname': function () {
console.log('ok')
return this.firstname + '-' + this.middlename + '-' + this.lastname
}
}
});
</script>
</body> </html>

watch、computed、methods的区别的更多相关文章

  1. Vue.js中 computed 和 methods 的区别

    官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  4. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  5. Vue中computed的本质及与methods的区别

    一.computed的本质? computed为什么不像methods一样加小括号使用? 正常使用computed方式 运行结果 至于为什么computed为什么不像methods一样使用小括号调用, ...

  6. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  7. computed、watch、methods的区别

    computed:计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代 ...

  8. Vue.js 计算属性computed和methods的区别

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  9. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

随机推荐

  1. Python正则表达

    ```# -*- coding:utf-8 -*-import re re - Support for regular expressions (RE).正则表达式是一个特殊的字符序列,它能帮助你方便 ...

  2. RequireJS 2.0 正式发布

    就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...

  3. html5可拖动的进度条

    总结:拖动显示进度的进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. document.write()重写问题

    document.write(); 可用于重写给某个元素追加内容; 当document.write(); 用于JS文件中,会重写整个页面,解决这个问题有多种方法. 重写原因:当onload的时候执行 ...

  5. 关于hibernate的一点心得

    1.部门和员工的关系: 部门<->员工是一对多的关系,即一个部门有多个员工,所以员工表里有部门id:depart_id 在下面这个代码中各添加部门和员工的一个记录即:新增一个部门,同时这个 ...

  6. ArcGIS 10.3编译旧版本Addin错误的解决办法

    ArcGIS10.2下VS2010的AddIn,在10.3下在VS2012下重新编译出现missing ESRI ArcGIS Add-in SDK错误,导致无法生成esriAddIn安装文件. 该问 ...

  7. 数据库系统异常排查之DMV(转)

    来源: http://www.cnblogs.com/fygh/archive/2012/03/12.html 数据库系统异常是DBA经常要面临的情景,一名有一定从业经验的DBA,都会有自己一套故障排 ...

  8. March 6 2017 Week 10 Monday

    A well-spent day brings happy sleep. 丰盈白日,安眠晚间. Recently my sleep is not so good, for one thing I go ...

  9. 保存Google、Bing翻译的语音

    以Chrome浏览器+google翻译为例,bing的下载步骤也类似 1.打开google翻译页面(translate.google.com),输入一段文本,如下图 2.可以看到,右侧已经翻译好了,这 ...

  10. 第一次团队Scrum

                                    长大一条龙之成绩查询 一.项目介绍             本项目的意义在于锻炼团队的scrum能力,加强团队合作能力.确定本项目采用的 ...