vuejs基础之监听watch,computed,methods事件


需求分析:
假如有两个姓名框,需要他们拼接成全名字

  • 怎么监听到文本框数据的改变,这样才能知道什么时候去拼接 出一个全名
  • 如何监听到文本框的数据改变呢

1 使用键盘监听

主要是使用了键盘的监听事件即method的方法事件
页面部分代码

<div id="app">
    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <input type="text" v-model="fullname">
  </div>
<script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
        getFullname() {
          this.fullname = this.firstname + '-' + this.lastname
        }
      }
    });
  </script>

2 使用监听事件

不使用键盘的监听事件,主要有watch,computed

2.1 watch监听

2.1.1 监听属性

2.1.1.1 普通属性

watch使用这个 属性,可以监视 data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数,它是vue实例对象中的属性之一
watch对象中可以添加各种属性,然后对应的函数有两个参数newValoldVal代表的是变化前和变化后的值

 // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {},
      watch: { 
        'firstname': function (newVal, oldVal) {
          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
          this.fullname = this.firstname + '-' + newVal
        }
      }
    });

2.1.1.2 监听引用属性

如果监听的属性是数组或者是对象的话,就可以在监听属性那里除了添加方法还可以添加其他属性,在添加其他属性时需要用handle指定方法
其他属性:

  • deep: true是深度解析,主要针对嵌套对象使用
  • immediate: true是立即执行,因为当使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性
var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 此处是监听的方法名
    b: 'someMethod',
    
    // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 可以传入回调数组,它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})

2.1.2 监听路由

由于路由是虚拟不可见的,可以用watch监听
代码部分如下

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

    <!-- 容器 -->
    <router-view></router-view>
  </div>
<script>
    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 }
      ]
    })
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router, // 相当于router: router,这是es6增强模板语法的写法
      watch: { //  通过监听this.$route.path这个值来监听路由的变化
        'this.$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('欢迎进入登录页面')
          } else if (newVal === '/register') {
            console.log('欢迎进入注册页面')
          }
        }
      }
    });
 </script>

2.2 computed监听

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

  • 计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性去使用就好了;
  • 只要计算属性,这个 function 内部,所用到的任何 data 中的数据发生了变化,就会立即重新计算这个计算属性的值
  • 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果计算属性方法中,所依赖的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;
// 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {},
      computed: {
        'fullname': function () {
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });

3 watch,computed和methods三种对比

watchcomputedmethods之间的对比

  • computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
  • methods方法表示一个具体的操作,主要书写业务逻辑
  • watch一个对象,其键是需要观察的表达式,其值是对应回调函数有两个参数(newVal, oldVal)。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computedmethods的结合体;
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页