Vue的计算属性与watch_watch与vue的计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45054614/article/details/113447168

一、Vue的计算属性是什么？

它的计算属性是 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和computed的区别

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

四、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>

六、 vue watch和computed的使用场景

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