computed计算属性与watch侦听器

一、常用修饰符

    @事件.stop 阻止事件冒泡（由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件）
    @事件.prevent 阻止事件默认（例如：当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法）
    @事件.capture 触发事件捕获（添加事件侦听器时使用事件捕获模式）
    @事件.self 当事件在该元素本身触发回调
    @once 只执行一次（绑定了事件以后只能触发一次，第二次就不会触发）
    @事件.passive 告诉浏览器你不想阻止事件的默认行为（当我们在监听元素滚动事件的时候，会一直触发onscroll 事件，在pc 端是没啥问题的，但在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll 事件整了一个.lazy修饰符）
    @事件.native 的作用就是把一个vue 组件转化为一个普通的HTML 标签（注意：使用.native 修饰符来操作普通HTML 标签是会令事件失效的）

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
 

二.v-model的修饰符

       .lazy （取代 input 监听 change 事件）
       默认情况下，v-model 同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再 同步。

• <input v-model.lazy="msg">

  .number（输入字符串转为数字）
  自动将用户的输入值转化为数值类型

  <input v-model.number="msg">

  .trim（输入首尾空格过滤）
  自动过滤用户输入的首尾空格

  <input v-model.trim="msg">

  ---

  三、键盘事件的修饰符

  当vue项目中需要监听键盘事件时，用到的修饰符有：

• <input v-on:keyup.13="submit">
  等同于 ↓
  <input @keyup.enter="submit">

常用键提供了按键别名，如下：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

修饰键：
.ctrl
.alt
.shift
.meta

四.computed计算属性

1.computed计算属性
作用:封装了一段对于数据的处理，求得一个结果语法:
1．写在computed配置项中2.作为属性，直接使用
。 js中使用计算属性:this.计算属性。模板中使用计算属性︰f {计算属性}

2.methods计算属性
作用:给Vue实例提供一个方法，调用以处理业务逻辑。语法:
1．写在methods配置项中2.作为方法调用
。 js中调用: this.方法名()
。模板中调用{方法名(分或者@事件名=“方法名”

3.计算属性的优势

1．缓存特性(提升性能)
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算→并再次缓存
2. methods没有缓存特性
3.通过代码比较

五.watch监听器

1.作用:
监视数据变化，执行一些业务逻辑或异步操作

⒉语法:
1. watch同样声明在跟data同级的配置项中

2．简单写法:简单类型数据直接监视

3.完整写法︰添加额外配置项

  <div id="app">
      <p>{{ msg }}</p>
      <button @click="msg='hi'">修改msg数据</button>
      <button @click="user.age = 21">修改age数据</button>
      <button @click="user={}">修改user</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello',
          user: {
            username: 'zs',
            age: 20,
          },
        },
        methods: {},
        watch: {
          // newV 数据变化后的新值 oldV旧的数据
          msg(newV, oldV) {
            console.log(newV, oldV)
            // 当msg发生变化会执行该函数
          },
          // // 'user.age': function(newV, oldV) {
          //   console.log(newV, oldV)
          // },
          // 监听对象的某个属性
          // 'user.age'(newV, oldV) {
          //   console.log(newV, oldV)
          // },
          // 监听整个对象 默认情况下这个对象重新赋值才被监听到
          user: {
            handler(v) {
              console.log(v)
            },
            deep: true, // 深度监听 修改了对象的属性值也能被监控到
            immediate: true, // 立即调用
          },
        },
      })
    </script>