向Vue进军（二）

1.修饰符(modifiers)

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThis"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self="doThis">...</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>

<!-- 让移动端的滑动效果更加流畅  -->
<div v-on:scroll.passive="onScroll">...</div>

表单修饰符

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

2.watch和computed

watch的两种写法

// Method 1
watch:{
  data(newVal,oldVal){
     //  监听属性，属性发生改变即执行函数
  }
}
// Method 2
watch:{
  data:{
     handler(newVal,oldVal){
        //  监听属性，属性发生改变即执行函数
     },
     immediate: true,    // 立即执行handler函数
     deep: true          // 深度监控
  }
}

computed两种写法

// Method 1
computed{
  data(){
    // 定义的时候像个方法，用起来像个属性
  }
}
// Method 2
computed{
   data(){
      get(){
          // 获取值
      },
      set(val){
          // 对计算属性设置值，这个值可以做些其他操作
      } 
}

两者区别

1.watch监听的属性必须在data中声明，而computed属性不能在data中声明
2.watch监听的属性发生变化才会执行对应代码，而computed是根据依赖属性的变化从而重新计算，若依赖属性没有发生变化，则直接从缓存中读取数据，不会重新进行渲染
3.watch里面可以有异步操作，而computed中是不允许的