第九周（11.11-11.17）学习笔记 24软工陈奕君

学习收获：

重新开始看网课学习Vue3

学习笔记：

Vue 3 开发

基础语法

<template>
  <!-- 列表渲染 -->
  <div v-for="(item, index) in items" :key="item.id">
    {{ item.name }}
  </div>
  
  <!-- 条件渲染 -->
  <div v-if="isVisible">显示内容</div>
  <div v-show="isVisible">显示/隐藏</div>
  
  <!-- 双向绑定 -->
  <input v-model="message">
  
  <!-- 事件处理 -->
  <button @click="handleClick">点击</button>
  
  <!-- 属性绑定 -->
  <img :src="imageUrl" :alt="imageAlt">
</template>
​
<script setup>
import { ref, reactive } from 'vue';
​
// 响应式数据
const message = ref('');
const isVisible = ref(true);
const items = ref([]);
​
const state = reactive({
  user: null,
  settings: {}
});
​
// 方法
const handleClick = () => {
  console.log('按钮被点击');
};
</script>

响应式数据

import { ref, reactive, computed, watch } from 'vue';
​
// ref - 用于基本类型和对象类型
const count = ref(0);
count.value++;  // 注意需要 .value
​
// reactive - 只能用于对象类型
const state = reactive({
  name: 'John',
  age: 25
});
​
// 计算属性
const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});
​
// 监视器
watch(count, (newVal, oldVal) => {
  console.log('count变化:', newVal, oldVal);
});
​
// 自动追踪依赖
watchEffect(() => {
  console.log('自动追踪:', count.value);
});