vue学习

学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue

@@ -42,10 +42,12 @@
   padding: 20px;
   border-radius: 10px;
 }
+
 .content {
   display: flex;
   justify-content: space-evenly;
 }
+
 img, video {
   width: 100%;
 }

学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue

@@ -7,6 +7,7 @@
 
 <script setup lang="ts" name="Game">
 import {reactive} from 'vue'
+
 let games = reactive([
   {id: 'asgytdfats01', name: '英雄联盟'},
   {id: 'asgytdfats02', name: '王者农药'},
@@ -23,6 +24,7 @@
   border-radius: 10px;
   box-shadow: 0 0 10px;
 }
+
 h2 {
   background-color: orange;
   text-align: center;

学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue

@@ -3,6 +3,7 @@
     <h3>父组件</h3>
     <div class="content">
       <Category title="热门游戏列表">
+<!--        根据子组建的 <slot>默认内容</slot> 显示内容-->
         <ul>
           <li v-for="g in games" :key="g.id">{{ g.name }}</li>
         </ul>

学习VUE/hello_vue3/src/utils/emitter.ts

@@ -0,0 +1,29 @@
+// 引入mitt
+import mitt from 'mitt'
+
+// 调用mitt得到emitter，emitter能：绑定事件、触发事件
+const emitter = mitt()
+
+/* // 绑定事件
+emitter.on('test1',()=>{
+  console.log('test1被调用了')
+})
+emitter.on('test2',()=>{
+  console.log('test2被调用了')
+})
+
+// 触发事件
+setInterval(() => {
+  emitter.emit('test1')
+  emitter.emit('test2')
+}, 1000);
+
+setTimeout(() => {
+  // emitter.off('test1')
+  // emitter.off('test2')
+  emitter.all.clear()
+}, 3000); */
+
+
+// 暴露emitter
+export default emitter

学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue

@@ -0,0 +1,27 @@
+import { shallowRef } from 'vue';
+
+const user = shallowRef({ name: 'Alice', age: 30 });
+
+// 修改 user 本身会触发更新
+user.value = { name: 'Bob', age: 25 }; // 响应式触发
+
+// 修改 user.value 的属性不会触发更新
+user.value.name = 'Charlie'; // 不会触发响应式更新
+
+
+import { shallowReactive } from 'vue';
+
+const user = shallowReactive({
+name: 'Alice',
+age: 30,
+address: {
+city: 'New York',
+zip: '10001'
+}
+});
+
+// 修改一级属性会触发响应式更新
+user.name = 'Bob'; // 响应式触发
+
+// 修改嵌套属性不会触发响应式更新
+user.address.city = 'Los Angeles'; // 不会触发响应式更新