vue基础——侦听器、计算属性

一、侦听器

1.watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

2.语法：

方法格式侦听器定义：

 const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal,oldval) {})
        }
      }
    })

对象格式侦听器定义：

 const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }
      }
    })

immediate:默认为false,为true时，代表立即触发

3.侦听器的作用：判断用户名是否被占用等等

二、计算属性

1.计算属性是通过一系列运算后，最终得到一个属性值

2.用法：

  var vm = new Vue({
      el: '#app',
      // 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {}
    });

3.好处：

①实现代码复用

②只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值