数组变化侦测

数组变化侦测

代码

<template>
  <h3>数组侦听</h3>
  <ul>
    <li v-for="(item,index) in names" :key="index">{{ item }}</li>
  </ul>
  <button @click="addlistHandle">添加数据（ui自动更新）</button>
  <p></p>
  <button @click="addlistHandle2">添加数据（不会引起ui自动更新）</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const names = ref(['张三', '李四', '王五']);
const addlistHandle = () => {
  // 使用push方法添加数据
  // 引起ui自动更新
  names.value.push('赵六');
  console.log(names.value);
  // 这里的console.log会在ui更新之前执行，所以打印的还是原来的数据
  // 但是ui会在下一次事件循环中更新，所以这里的console.log会在ui更新之后执行
};
const addlistHandle2 = () => {
  // 使用concat方法添加数据
  // 不会引起ui自动更新
  names.value = names.value.concat('赵六');
  console.log(names.value);
  // 这里的console.log会在ui更新之前执行，所以打印的还是原来的数据
  // 但是ui会在下一次事件循环中更新，所以这里的console.log会在ui更新之后执行
};
// 以上两种方法的区别在于，push方法是直接修改了原数组，而concat方法是返回一个新数组，所以不会引起ui自动更新
</script>