vue之watch和计算属性computed

区别一：watch监听的是一个变量（或者一个常量）的变化，这个变量可能是一个单一的变化也可能是一个数组。computed可以监听很多个变量，但是这个变量一定是vue实例里面的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>msg:{{ msg }}</p>
  <p>another:{{ another }}</p>
  <p>{{msg1}}</p>
</div>

<script>
var vals='sddss';
var app=new Vue({
  el: '#app',
  data: {
    msg:'hello vue',
    another:'another hello'
  },
  watch:{
    msg:function(newval,oldval){
      console.log('newval is:'+newval);
      console.log('oldval is:'+oldval);
    }
  },
  computed:{
    msg1:function(){
      return 'ss:'+this.msg+','+this.another+vals;
    }
  }
});
vals='watch!';//值改变了，computed未改变//因为vals不是Vue实例，下面通过定时器改变实例中变量的值，从而改变computed中vals的值
setTimeout(function(){
  app.msg='wushijie!'
},3000);
</script>
</body>
</html>

computed是在HTML DOM加载后马上执行的，如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；

watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理。

一、计算属性computed的特点

computed是计算属性，实时响应的，计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；
如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstName" />
      <input type="text" v-model="lastName" /> 
      {{fullName}}
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          firstName: 'hello',
          lastName: 'vue'
        },
        computed: {
          fullName: function() {
            return this.firstName + this.lastName;
          }
        }
      });
    </script>
  </body>
</html>

注意：data中不用声明fullName；
监听computed路由变化，发现不可行。

二、watch监控自身属性变化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstName" />
      <input type="text" v-model="lastName" /> 
      {{fullName}}
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          firstName: 'hello',
          lastName: 'world',
          fullName: 'hello'
        },
        watch: {
          'firstName': function(newval, oldval) {
            // console.log(newval,oldval);
            this.fullName = this.firstName + this.lastName;
          },
          'lastName': function(newval, oldval) {
            // console.log(newval,oldval);
            this.fullName = this.firstName + this.lastName;
          }
        }
      });
    </script>
  </body>
</html>

一、watch监控路由对象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/register/value">注册</router-link>
      <!--组件的显示占位域-->
      <router-view></router-view>
    </div>
    <script>
      //1.0 准备组件
      // var App = Vue.extend({});
      var login = Vue.extend({
        template: '<div><h3>登录</h3></div>'
      });
      var register = Vue.extend({
        template: '<div><h3>注册{{name}}</h3></div>',
        data: function() {
          return {
            name: ''
          }
        },
        created: function() {
          this.name = this.$route.params.name;
        }
      });
      //2.0 实例化路由规则对象
      var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
          },
          {
            path: '/register/:name',
            component: register
          },
          {
            path: '/',
            //当路径为/时，重定向到/login
            redirect: '/login'
          }
        ]
      });
      //3.0 开启路由对象
      new Vue({
        el: '#app',
        router: router, //开启路由对象
        watch: {
          '$route': function(newroute, oldroute) {
            console.log(newroute, oldroute);
            //可以在这个函数中获取到当前的路由规则字符串是什么
            //那么就可以针对一些特定的页面做一些特定的处理
          }
        }
      })
    </script>
  </body>
</html>

但其实watch干我这个事有点屈才了，watch真正强在他可以在数据变化时做一些异步处理或者开销大的操作，这是computed所不能及的。

vue watch和computed的使用场景

watch 监听某个数据的变化（监听完调用什么函数）一个数据影响多个数据（比如：浏览器自适应、监控路由对象、监控自身属性变化）
computed 计算后返回新一个数据受多个数据影响（比如：计算总价格、过滤某些数据）
computed是用来处理你使用watch和methods的时候无法处理（比如有缓存的时候监听不了数据变化），或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况

vue之watch和计算属性computed

vue watch和computed的使用场景

推荐阅读更多精彩内容