Vue3中Watch踩坑记录

最近在写项目的时候遇见一个很头大的问题，就是watch监听不到数组长度的变化。
初始代码如下：

 watch(drivingOrderTable.length, (newVal, oldVal) => {
    if (newVal > oldVal) {
         ElMessage({
            type: "success",
            message: "操作成功",
          });
       }
 });

我在控制台打印了数组刚开始的长度和unshift之后的长度，是变化了的，但是没有走watch里面的方法，这让我很纳闷，心中十分疑惑。于是我上网搜了搜Vue3里watch的用法，恍然大悟。
更正后的代码：

 watch(
    () => drivingOrderTable.length,
      (newVal, oldVal) => {
          if (newVal > oldVal) {
            ElMessage({
              type: "success",
              message: "操作成功",
            });
          }
      }
);

两段代码对比可以看出，第二段代码里watch的第一个参数是函数的返回值。
也就是() => drivingOrderTable.length

原来Vue3中监听普通类型可以直接使用，比如：

let count = ref(1);
const changeCount = () => {
	 count.value+=1
 };
watch(count, (newValue, oldValue) => { //直接监听
	console.log("count改变了");
});

这时候count是可以直接使用的，而到了引用类型里，就必须是函数的返回值了：

 let book = reactive({
     name: "js编程",
     price: 50,
 });
 const changeBookName = () => {
 	book.name = "c#";
 };
 watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
 	console.log('书名改变了')
 })