自定义事件与监视

事件自定义

---

监视

绑定事件实现监视

1. onclick="function()"什
2. @click="function()"

watch 监视

基本语法：

watch(监视的值，如果有变化那么执行的函数体(回调函数)，配置项)

具体的例子：

watch(_work,(oldValue,newValue)=>{
    console.log("HHH",oldValue,newValue)
  })

注意到这个函数体是一个匿名函数，接受两个参数，第一个是newValue，第二个是oldValue；（如果只有一个参数则只接受oldValue）

当监视的值变化的时候，函数会自动执行：打印‘HHH’

---

如果要监视的是一个对象，那么其实监视的是这个对象的唯一id（或者说地址），只有地址变化，才会引起函数体的执行

但是，如果想要监视这个对象内部每个属性的变化，需要在配置项中加上deep：true

//这里是'_work' 而非‘_work.value’
watch(_work,(newValue,oldValue)=>{
    console.log("HHH",newValue,oldValue)
    if(_work.value=="sleep")
    {
      stopWatch()
      }
  },{deep:true})

第三个参数是配置项

---

还有一种情况，即我想要监视的是某个对象内部的某个值的变化，比如我有如下对象

var person=ref({
	name:"zhangsan",
	age:10,
    assets:{
        car: "Beyond",
        house: "100m^2"
    }
})

我只想监视age的变化，但是我又不能直接写person.age

而应该写成一个getter函数，返回这个值

如：

watch(()=>{return person.value.age}, (val)=>
	{
		console.log("age has changed, the new value is "+val)
	}
)

也可以写成

watch(()=>person.value.age, (newValue,oldValue)=>
	{
		console.log("age has changed, the new value is "+val)
	}
)

但是如果想要监视一个对象，并且希望无论是这个对象的地址（或者唯一id）变化，还是这个对象内部的属性的值发生变化都要能被监视到，那么需要添加配置：

watch(()=>person.value.assets, (newValue,oldValue)=>
	{
		console.log("His assets has changed")
    	 
	}
      {deep:true}
)

---

还可以同时监视上述任何一种混合而成的数组：

watch([()=>person.value.age,()=>person.value.assets, _work], (newValue,oldValue)=>
	{
		console.log("Changed")
	}
)

---

补充：上述都是以ref为例。事实上，如果使用reactive创建的动态响应对象，则自动地能够深度监视。

watchEffect

当我们希望监视的内容符合一定条件的时候才执行回调函数，需要在回调函数内加上判断：

watch(person.value.age, ()=>
	{
		if(person.value.age>=100){
		console.log("寿比南山")
		}
	}
)

也可以直接使用watchEffect进行智能的监视：

//只传入回调函数
watchEffect( ()=>
	{
		if(person.value.age>=100){
		console.log("寿比南山")
		}
	}
)

使用watch和watchEffect的时候需要从vue内引入：

import {watch, watchEffect} from 'vue'

watchEffect 可以响应式监听其依赖。