數據觀察 - daniel-qa/Vue GitHub Wiki

數據觀察

computed

页面显示原始列表 ['苹果', '香蕉', '橙子', '草莓', '葡萄']。

用户在输入框中输入关键字（如“草”）。

计算属性 filteredItems 自动重新计算，显示过滤后的结果：['草莓']。

  • ex :
<template>
  <div>
    <!-- 输入框 -->
    <el-input v-model="query" placeholder="输入关键字"></el-input>

    <!-- 显示过滤结果 -->
    <p>原始列表: {{ items }}</p>
    <p>过滤后的列表: {{ filteredItems }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 原始数据列表
const items = ref(['苹果', '香蕉', '橙子', '草莓', '葡萄']);

// 用户输入的搜索关键字
const query = ref('');

// 计算属性：根据关键字过滤列表
const filteredItems = computed(() => {
  return items.value.filter((item) => item.includes(query.value));
});
</script>

Watch

  • vue3
<script setup>
import { ref, watch } from 'vue';

// 创建响应式数据
const myData = ref('');

// 使用 watch 监听 myData 的变化
watch(myData, (newData, oldData) => {

  console.log("myData 更新了:", newData);

}, { immediate: true });
</script>
  • vue2

简单函数写法

export default {
  data() {
    return {
      listData: [], // 假设 listData 是一个数组
    };
  },
  watch: {
    listData(newVal, oldVal) {
      console.log('listData changed:', newVal, oldVal);  // 查看內容
    },
  },
};

配置式写法（对象形式）

watch: {
  myData: {
    handler(newData, oldData) {

      console.log("myData 更新了:", newData);

    },
    immediate: true, // 在组件挂载时立即执行 handler
    // deep: true   // 如果 myData 是对象，使用 deep 来监听对象的内部变化
  },
}

当需要使用 immediate 或 deep 等选项时，必须使用这种写法。

在模板中显示提示

如果 listData 为空，可以在模板中提示用户。

<div v-if="listData.length > 0">
  <ul>
    <li v-for="(typeItem, typeIndex) in listData" :key="typeIndex">

         {{typeIndex}}

    </li>
  </ul>
</div>
<div v-else>
  <p>暂无数据</p>
</div>

直接印出

import { onMounted } from 'vue';

onMounted(() => {
    console.log(listData + " listData");
});

注意格式

mounted() {       
    console.log(listData + " listData");
}
  • 防呆
if (this.listData) {
	console.log("listData 存在: ", this.listData); // 更安全的对象打印方式
} else {
	console.warn("listData 尚未定义或为空");
}

如果你需要动态调试 listData 的内容，可以结合浏览器控制台工具：

前提：listData 已經存在於當前作用域

假設 listData 是一個變量，已經在腳本的某處通過 let、const 或 var 聲明，例如：

// 在组件挂载时将 listData 暴露到全局
onMounted(() => {
  window.listData = listData;
  console.log('listData 已暴露到全局，可在控制台中访问 window.listData');
});

let listData = [1, 2, 3];

window.listData = listData; // 直接將它掛載到全局作用域

這樣就可以在控制台中通過 window.listData 或直接輸入 listData 訪問。

切换到 控制台（Console） 选项卡。

window.listData

或直接输入：

listData

如果 listData 确实已挂载到 window，则可以直接访问。

mounted 的語法 ( Vue3,Vue2)

在 Vue 3 中，mounted 是一个生命周期钩子，通常用于组件实例被挂载到 DOM 后执行的操作。如果你使用的是 Vue 3 和 script setup 语法，它应该与 onMounted 一样。

如果你在 Vue 2 中使用 mounted 钩子，语法会略有不同：

  • Vue 3 (Composition API) 示例
import { onMounted } from 'vue';

onMounted(() => {
    console.log('组件已挂载到 DOM');
    console.log(window.listData); // 如果你想打印全局变量 listData
});
  • Vue 2 (Options API) 示例

如果你使用 Vue 2 或 Vue 3 的 Options API，那么 mounted 的用法如下：

export default {
  mounted() {
    console.log('组件已挂载到 DOM');
    console.log(window.listData); // 如果你想打印全局变量 listData
  }
}
  • 解释：

Vue 3 Composition API：使用 onMounted 钩子并传递一个回调函数。

Vue 2 或 Vue 3 Options API：直接在 mounted 中定义一个方法，它会在组件挂载时自动执行。

  • 总结：

Vue 3 Composition API 使用 onMounted，它需要传递一个回调函数。

Vue 2 或 Vue 3 Options API 使用 mounted，它是一个生命周期钩子方法。

⚠️ **GitHub.com Fallback** ⚠️