【介绍】：watch函数与watchEffect函数都是监听器，都用于监听属性变化，但在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。
一，watch
作用： 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
watch() 默认是懒侦听（组件初始化时不执行）的，即仅在侦听源发生变化时才执行回调函数。
示例：
const state = reactive({ count: 0 })
watch(
() => state, //第一个参数：ref，响应式对象，返回值函数，组合数组,如：state.count
(newValue, oldValue) => {//第二个参数：回调函数，可获取新旧值
// newValue === oldValue
//to do
},
{ //第三个参数，一个对象，进行选项配置
deep: true , //是否深度监听，搭配getter函数使用，直接使用响应式对象时，会默认使用深层模式
immediate: true, //设置时可以变为非惰性，页面首次加载就会执行
}
)
特点：
懒执行副作用：第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）；显式指定依赖数据：更加明确是应该由哪个状态触发侦听器重新执行；可获取新旧值：可以访问所侦听状态的前一个值和当前值。
二，watchEffect
作用： 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
示例：
const count = ref(0)
//两个参数
//第一个是回调函数
//第二个是设置回调函数触发时机的配置选项对象
//如设置{ flush: 'post'} 将会使侦听器延迟到组件渲染之后再执行
watchEffect(() => console.log(count.value))
特点：
立即执行，没有惰性：在初始化时，一定会执行一次（收集要监听的数据）；自动收集依赖数据：执行函数中涉及的属性，同时依赖数据更新时重新执行自身；无法获取到原值，只能得到变化后的值。
参考资料：
cn.vuejs.org/api/reactiv… （官网） blog.csdn.net/weixin_5214… （文章）
