vue学习八：watch、computed、methods选项

将firstname和lastname名称拼接案例（不使用watch选项，使用keyup事件）：

vm挂载位置，使用keyup事件监视文本框数据的改变：

  <div id="app">
    <span>firstname</span>
    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <span>lastname</span>
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <span>fullname</span>
    <input type="text" v-model="fullname">
  </div>

vm实例：

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: ''
  },
  methods: {
    getFullname() {
      this.fullname = this.firstname + '-' + this.lastname
    }
  }
});

效果：

将firstname和lastname名称拼接案例（使用watch选项，不使用keyup事件）：

vm挂载位置：

<div id="app">
  <span>firstname</span>
  <input type="text" v-model="firstname"> +
  <span>lastname</span>
  <input type="text" v-model="lastname"> =
  <span>fullname</span>
  <input type="text" v-model="fullname">
</div>

vm实例，使用watch监视data的改变：

使用这个watch 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: ''
  },
  methods: {},
  watch: {
    'firstname': function (newVal, oldVal) {
      console.log('监视到了 firstname 的变化')
      // this.fullname = this.firstname + '-' + this.lastname

      console.log(newVal + ' --- ' + oldVal)

      this.fullname = newVal + '-' + this.lastname
    },
    'lastname': function (newVal) {
      this.fullname = this.firstname + '-' + newVal
    }
  }
});

效果：

使用watch选项较使用keyup事件的优势与劣势

使用keyup事件只要使用一个函数，但是只有非dom元素不会拥有keyup这类事件，因此使用watch选项的优势在于：方便监视非dom元素的改变

watch-监视路由地址的改变

vm实例挂载位置：

  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

创建子组件：

var login = {
  template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
}

var register = {
  template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
}

创建一个路由对象：

var router = new VueRouter({
  routes: [ // 路由规则数组
    { path: '/', redirect: '/login' },
    { path: '/login', component: login },
    { path: '/register', component: register }
  ],
  linkActiveClass: 'myactive' // 和激活相关的类
})

创建vm实例：

var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  // router: router
  router,
  // watch的优势在于：方便监视非dom元素的改变
  watch: {
    //  this.$route.path
    '$route.path': function (newVal, oldVal) {
      // console.log(newVal + ' --- ' + oldVal)
      if (newVal === '/login') {
        console.log('欢迎进入登录页面')
      } else if (newVal === '/register') {
        console.log('欢迎进入注册页面')
      }
    }
  }
});

效果：

computed计算属性的使用

在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

vm实例挂载位置：

<div id="app">
  <span>firstname</span>
  <input type="text" v-model="firstname"> +
  <span>lastname</span>
  <input type="text" v-model="lastname"> =
  <span>fullname</span>
  <input type="text" v-model="fullname">
</div>

vm实例：

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  methods: {},
  computed: { 
    'fullname': function () {
      console.log('ok')
      return this.firstname + '-' + this.lastname
    }
  }
});

注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发生了变化，就会 立即重新计算 这个 计算属性的值

注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所用到的任何数据，都没有发生过变化，则，

不会重新对 计算属性求值；

证明第三点：

在vm实例挂载位置加上，如果求值结果没有缓存起来，按道理在function 内部所用到的 随意一个 data 中的数据发生了变化，ok会打印四次

<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>

实际上ok只打印了一次

watch、computed、methods的比较

1. `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

2. `methods`方法表示一个具体的操作，主要书写业务逻辑；

3. `watch`一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是`computed`和`methods`的结合体；