事件处理

1.事件的基本用法

1. 事件的回调需要配置在methods对象中，最终会在vm上
2. methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
3. methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
4. @click="demo"和@click="demo($event)"效果一致，但后者可以传参

2.事件修饰符

1. prevent 阻止默认事件（常用）
2. stop 阻止事件冒泡（常用）
3. once 事件只触发一次（常用）
4. capture 使用事件的捕获模式
5. self 只有event.target是当前操作的元素时才触发事件
6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕

计算属性 侦听属性

1.计算属性

1. 原理：底层借助了Objcet.defineproperty()方法提供的getter和setter
2. get函数什么时候执行？
   a.初次读取时会执行一次 b.当依赖的数据发生改变时会被再次调用
3. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
4. 另外
   a.计算属性最终会出现在vm上，直接读取使用即可
   b.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
   c.如果计算属性确定不考虑修改，可以使用计算属性的简写形式

2.watch监视属性

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
2. 监视的属性存在才能进行监视，既可以监视data，也可以监视计算属性
3. 配置项属性immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
4. 监视有两种写法
   • 创建Vue时传入watch: {}配置
   • 通过vm.$watch()监视

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    // 方式一
    /* watch:{		
			isHot:{
				immediate:true,
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
  })
  // 方式二
  vm.$watch('isHot', {		
    immediate: true, // 初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue)
    }
  })
</script>

2.1 深度侦听

1. Vue中的watch默认不监测对象内部值的改变（一层）
2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

TIP

1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2.使用watch时根据监视数据的具体结构，决定是否采用深度监视

2.2 侦听属性简写

watch: {
  // 正常写法
  // isHot: {
  // 	// immediate:true, //初始化时让handler调用一下
  // 	// deep:true,	//深度监视
  // 	handler(newValue, oldValue) {
  // 		console.log('isHot被修改了', newValue, oldValue)
  // 	}
  // },

  //简写
  isHot(newValue, oldValue) {
    console.log('isHot被修改了', newValue, oldValue, this)
  }
}
和$watch
//正常写法
// vm.$watch('isHot', {
// 	immediate: true, //初始化时让handler调用一下
// 	deep: true,//深度监视
// 	handler(newValue, oldValue) {
// 		console.log('isHot被修改了', newValue, oldValue)
// 	}
// })

//简写
// vm.$watch('isHot', (newValue, oldValue) => {
// 	console.log('isHot被修改了', newValue, oldValue, this)
// })

2.3 computed和watch之间的区别

• computed能完成的功能，watch都可以完成
• watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

原则

• 所有被Vue管理的函数，最好写成普通函数，这样 this 的指向才是vm或组件实例对象
• 所有不被Vue所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是vm或组件实例对象