watch、computed、methods的区别_综合

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>

View Code

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 实例，得到 ViewModelvar 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>

View Code

更多专业前端知识，请上【猿2048】www.mk2048.com