vue在模板中调试

在项目开发中我们经常调试模板数据，通常我们都是添加一个{{ message }}在模板中，来显示我们的数据。

思考

1. 数据格式不清晰，如果是对象或者数组结构不清晰，不容易定位，有没有办法，让我们像log一样直接打印数据呢？
2. 可不可以直接模板中使用log?

测试

1. 模板中使用console.log

    <template>
        <div class="collect">
          {{ console.log(message) }}
        </div>
      </template>
   
      <script setup>
      const message = ref('test message');
      </script>
   

   

   ❌ 很显然报错了，模板中使用是不可行的。

2. 写一个方法在模板调用

   <template>
     <div class="collect flex1">
       {{ log(message) }}
     </div>
   </template>
   
   <script setup>
   const message = ref('test message');
   
   const log = (res) => {
     console.log(res);
   };
   </script>
   

   

总结

我们可以在写一个log方法在模板中打印我们的数据。

如果你不行在每个组件中写一个方法，你也可以在实例上添加一个打印方法，可以全局访问。

# main.js
import { createApp } from 'vue';
const app = createApp(App);
// 添加 $log
app.config.globalProperties.$log = console.log;

组件中使用

<template>
  <div class="collect flex1">
    {{ $log(message) }}
  </div>
</template>

<script setup>
const message = ref('test message');

</script>

我们来测试下数组数据

这样调试看起来是不是清晰多了，也方便许多。