vue3

11.vue3/vue-project1/src/App.vue

@@ -3,7 +3,9 @@
 <template>
   <div>
     <h1>首页</h1>
-    <Demo13 v-if="isShow"></Demo13>
+    <!-- <Demo13 v-if="isShow"></Demo13> -->
+    <!-- <Demo15></Demo15> -->
+    <Demo14 ref="main"></Demo14>
     <!-- <Demo12></Demo12> -->
     <!-- <Demo11></Demo11> -->
     <!-- <Demo10></Demo10> -->
@@ -19,7 +21,7 @@
   </div>
 </template>
 <script setup name="App">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
@@ -33,7 +35,13 @@ import Demo10 from './components/Demo10.vue';
 import Demo11 from './components/Demo11.vue';
 import Demo12 from './components/Demo12.vue';
 import Demo13 from './components/Demo13.vue';
+import Demo14 from './components/Demo14.vue';
+import Demo15 from './components/Demo15.vue';
 let isShow = ref(true)
+let main = ref(null);
+onMounted(()=>{
+  console.log(main.value)
+})
 </script>
 <style scoped>
 </style>

11.vue3/vue-project1/src/components/Demo14.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Demo14</h1>
+    <p ref="aa">你好</p>
+    <input type="text" ref="inpRef" id="b"/>
+  </div>
+</template>
+<script  setup>
+import {ref,reactive,onMounted} from "vue" 
+let aa = ref(null);
+let inpRef = ref(null)
+let a = ref(10);
+let b = ref(20)
+onMounted(()=>{
+    console.log(aa.value);
+    console.log(inpRef.value)
+    // 失焦 聚焦
+    inpRef.value.focus();
+    setTimeout(()=>{
+        inpRef.value.blur()
+    },3000)
+})
+defineExpose({a,b})
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/components/Demo15.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Demo15</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/归档.md

@@ -4,7 +4,7 @@ vue2 选项式 Opation API
 vue3 组合式 Component API
 2. 响应式不同
 vue2:
-    基于Object.defineProperty进行数据劫持，结合发布订阅模式实现；
+    基于Object.defineProperty(属性级)进行数据劫持，结合发布订阅模式实现；
     数据劫持：
         Object.defineProperty会遍历data中所有的property
         为每一个属性添加了getter和setter
@@ -22,7 +22,7 @@ vue2:
         2.无法监听新增/删除属性：Object.defineProperty只能对初始化的数据进行数据劫持，如果动态增加或者删除属性，无法触发响应式，需要使用(Vue.set/Vue.delete)
 
 vue3:
-    基于Proxy去代理对象，配合Reflect去实现强大的响应式，结合依赖追踪和更新机制，但底层还是劫持方式实现；
+    基于Proxy(对象级)去代理对象，配合Reflect去实现强大的响应式，结合依赖追踪和更新机制，但底层还是劫持方式实现；
     数据劫持：
         Proxy包裹目标对象，拦截对象的所有操作
         get拦截: 读取属性时触发,依赖收集