new

v3_project/8_vue3的生命周期/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <h2>父组件</h2>
+  <button @click="isShow = !isShow">显示组件</button>
+  <hr>
+  <Child v-if="isShow"></Child>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref } from 'vue'
+import Child from "./components/Child.vue"
+
+export default defineComponent({
+  setup () {
+    const isShow = ref(true)
+
+    return {
+      isShow
+    }
+  },
+  components: {
+    Child
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/8_vue3的生命周期/components/Child.vue

@@ -0,0 +1,87 @@
+<template>
+  <h2>子组件</h2>
+  <h3>msg: {{ msg }}</h3>
+  <button @click="update">更新</button>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+} from "vue";
+
+export default defineComponent({
+  name: "Child",
+  //vue2生命周期 钩子函数
+  beforeCreate() {
+    console.log("2.0 beforeCreate");
+  },
+  created() {
+    console.log("2.0 created");
+  },
+  beforeMount() {
+    console.log("2.0 beforeMount");
+  },
+  mounted() {
+    console.log("2.0 mounted");
+  },
+  beforeUpdate() {
+    console.log("2.0 beforeUpdate");
+  },
+  updated() {
+    console.log("2.0 updated");
+  },
+  // beforeDestroy(){
+  //   console.log('2.0 beforeDestroy')
+  // },
+  // destroyed(){
+  //   console.log('2.0 destroyed')
+  // },
+  beforeUnmount() {
+    console.log("2.0 beforeUnmount");
+  },
+  unmounted() {
+    console.log("2.0 unmounted");
+  },
+  setup() {
+    //vue3生命周期函数
+    console.log("3.0 setup");
+
+    const msg = ref("abc");
+    const update = () => {
+      msg.value += "!";
+    };
+    onBeforeMount(() => {
+      console.log("3.0 onBeforeMount");
+    });
+    onMounted(() => {
+      console.log("3.0 onMounted");
+    });
+    onBeforeUpdate(() => {
+      console.log("3.0 onBeforeUpdate");
+    });
+    onUpdated(() => {
+      console.log("3.0 onUpdated");
+    });
+    onBeforeUnmount(() => {
+      console.log("3.0 onBeforeUnmount");
+    });
+    onUnmounted(() => {
+      console.log("3.0 onUnmounted");
+    });
+    return {
+      msg,
+      update,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/9_hook函数/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <h2>自定义hook函数</h2>
+  <h2>x: {{ x }} ,y: {{ y }}</h2>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import userMouse from "./hook/userMouse";
+
+export default defineComponent({
+  //需求： 用户在页面中点击页面，把点击的位置和横纵坐标收集起来并且展示出来
+  setup() {
+    const { x, y } = userMouse();
+    return {
+      x,
+      y,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/9_hook函数/hook/userMouse.ts

@@ -0,0 +1,19 @@
+import {ref ,onMounted} from "vue"
+export default function(){
+  const x = ref(1)
+  const y = ref(-1)
+
+  //点击事件的回调函数
+  const clickHandle = (event: any)=>{
+    x.value = event.pageX
+    y.value = event.pageY
+  }
+  //页面加载完毕，在进行点击的操作
+  //页面加载完毕的生命周期
+  onMounted(()=>{
+    window.addEventListener('click',clickHandle)
+  })
+  return{
+    x,y
+  }
+}

v3_project/src/App.vue

@@ -1,82 +1,53 @@
 <template>
-  <h2>计算属性和监听属性</h2>
-  <fieldset>
-    <legend>姓名操作</legend>
-    姓氏： <input type="text" v-model="user.firstName" />
-    <br />
-    名字： <input type="text" v-model="user.lastName" />
-  </fieldset>
-  <fieldset>
-    <legend>计算属性和监听的演示</legend>
-    姓名: <input type="text" v-model="fullName1" /><br />
-    姓名: <input type="text" v-model="fullName2" /><br />
-    姓名: <input type="text" v-model="fullName3" />
-  </fieldset>
+  <h2>toRefs</h2>
+  <!-- <h3>name: {{ state2.name }}</h3>
+  <h3>age: {{ state2.age }}</h3> -->
+
+  <h3>name: {{ name }}</h3>
+  <h3>age: {{ age }}</h3>
+
+  <h3>name2: {{ name2 }}</h3>
+  <h3>age2: {{ age2 }}</h3>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch, ref, reactive ,watchEffect} from "vue";
-
+import { defineComponent, reactive, toRef, toRefs } from "vue";
+function useFeature() {
+  const state = reactive({
+    name2: "xiaoming",
+    age2: 18,
+  });
+  return {
+    ...toRefs(state)
+  }
+}
 export default defineComponent({
+  //toRefs 把一个响应式对象转化成普通对象  该普通对象的每个 property都是一个ref
   setup() {
-    const user = reactive({
-      firstName: "小猪",
-      lastName: "佩奇",
+    const state = reactive({
+      name: "xiaoming",
+      age: 18,
     });
-    //通过计算属性的方式
-    //vue3中的计算属性
-    const fullName1 = computed(() => {
-      return user.firstName + "_" + user.lastName;
-    });
-
-    const fullName2 = computed({
-      get() {
-        return user.firstName + "_" + user.lastName;
-      },
-      set(val: string) {
-        const names = val.split("_");
-        user.firstName = names[0];
-        user.lastName = names[1];
-      },
-    });
-
-    const fullName3 = ref("");
-    watch(
-      user,
-      ({ firstName, lastName }) => {
-        fullName3.value = firstName + "_" + lastName;
-      },
-      {
-        immediate: true,
-        deep: true,
-      }
-    );
-    //immediate 一开始执行一次   deep深度监视
-
-    //监视
-    // watchEffect(()=>{
-    //   fullName3.value = user.firstName + '_' + user.lastName
-    // })
-    //监视fullName3的数据 去改变firstName和lastName
-    // watchEffect(()=>{
-    //   const names = fullName3.value.split('_')
-    //   user.firstName = names[0]
-    //   user.lastName = names[1]
-    // })
-    //fullName3 是响应式数据
-    // watch([user.firstName,user.lastName,fullName3],()=>{
-    //   console.log('========')
-    // })
-
-    //如果非要监听非响应式数据的时候
-    watch([()=>user.lastName,()=>user.firstName],()=>{
-      console.log('!!!!')
-    })
+    const state2 = toRefs(state)
+    console.log(state)
+    console.log(state2)
+    const { name, age } = toRefs(state);
+    //解决： 利用toRefs可以将一个响应式reactive 对象的所有原始属性转化为ref属性
+    //应用： 当从而成函数返回响应式对象时，可以在不丢失响应式的情况下对返回的对象进行分解使用
+    const {name2,age2} = useFeature()
+    setInterval(() => {
+      // state.name += '='
+      // state2.name.value += '!'
+      name.value += "!!!!";
+      name2.value += '!!!!'
+    }, 2000);
     return {
-      user,
-      fullName1,
-      fullName2,
-      fullName3,
+      // ...state,
+      // state2
+      name,
+      age,
+      name2,
+      age2
     };
   },
 });

v3_project/src/components/Child.vue

@@ -0,0 +1,87 @@
+<template>
+  <h2>子组件</h2>
+  <h3>msg: {{ msg }}</h3>
+  <button @click="update">更新</button>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+} from "vue";
+
+export default defineComponent({
+  name: "Child",
+  //vue2生命周期 钩子函数
+  beforeCreate() {
+    console.log("2.0 beforeCreate");
+  },
+  created() {
+    console.log("2.0 created");
+  },
+  beforeMount() {
+    console.log("2.0 beforeMount");
+  },
+  mounted() {
+    console.log("2.0 mounted");
+  },
+  beforeUpdate() {
+    console.log("2.0 beforeUpdate");
+  },
+  updated() {
+    console.log("2.0 updated");
+  },
+  // beforeDestroy(){
+  //   console.log('2.0 beforeDestroy')
+  // },
+  // destroyed(){
+  //   console.log('2.0 destroyed')
+  // },
+  beforeUnmount() {
+    console.log("2.0 beforeUnmount");
+  },
+  unmounted() {
+    console.log("2.0 unmounted");
+  },
+  setup() {
+    //vue3生命周期函数
+    console.log("3.0 setup");
+
+    const msg = ref("abc");
+    const update = () => {
+      msg.value += "!";
+    };
+    onBeforeMount(() => {
+      console.log("3.0 onBeforeMount");
+    });
+    onMounted(() => {
+      console.log("3.0 onMounted");
+    });
+    onBeforeUpdate(() => {
+      console.log("3.0 onBeforeUpdate");
+    });
+    onUpdated(() => {
+      console.log("3.0 onUpdated");
+    });
+    onBeforeUnmount(() => {
+      console.log("3.0 onBeforeUnmount");
+    });
+    onUnmounted(() => {
+      console.log("3.0 onUnmounted");
+    });
+    return {
+      msg,
+      update,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/src/components/HelloWorld.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>