Vue3.0笔记

• 语言类型

  • 静态语言类型
  • 动态语言类型（编译阶段才能确定变量类型）

• 为什么需要 Typescript

  • 程序更容易理解

    

  • 效率更高

    

  • 更少的错误

    

vue3

• 性能优化：

• Composition API（组合式API）

  • 大型项目的代码难以维护，复用逻辑不太方便
    1. ref 和 reactive
    2. computed 和 watch
    3. 新的生命周期
    4. 自定义函数 Hooks函数

• 其他新增特性：

  

• 更好的 TypeScript 支持

为什么要有vue3

Vue2 遇到的问题：

• 随着功能的增长，复杂组件的代码变得难以维护
• Vue2 对 typescript 的支持非常有限（不利于集成 TS）

• Mixin 的缺点

  

• ref 的妙用

 <!--
   * @Description: 
   * @Autor: zhangbing
   * @Date: 2021-09-07 18:20:36
   * @LastEditors: zhangbing
   * @LastEditTime: 2021-09-07 18:40:44
  -->
  <template>
    <div>
      <img alt="Vue logo" src="./assets/logo.png" />
      <h1>{{ count }}</h1>
      <h1>{{ double }}</h1>
      <button @click="increse">+1</button>
    </div>
  </template>
  
  <script lang="ts">
  import { ref, computed } from "vue";
  
  export default {
    name: "App",
    setup() {
      const count = ref(0);
      const double = computed(() => {
        return count.value * 2
      })
  
      const increse = () => {
        count.value++
      }
  
  
  
      return {
        count,
        increse,
        double
      };
    },
  };
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>

• reactive

<!--
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-09-07 18:20:36
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-09-07 18:50:17
-->
<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>{{ count }}</h1>
    <h1>{{ double }}</h1>
    <button @click="increse">+1</button>
  </div>
</template>

<script lang="ts">
import { ref, computed, reactive, toRefs } from "vue";

interface DataProps {
  count: number;
  double: number;
  increse: () => void;
}

export default {
  name: "App",
  setup() {
    // const count = ref(0);
    // const double = computed(() => {
    //   return count.value * 2
    // })

    // const increse = () => {
    //   count.value++
    // }

    const data: DataProps = reactive({
      count: 0,
      increse: () => {
        data.count++;
      },
      double: computed(() => data.count * 2),
    });

    // toRefs 接收一个 reactive 对象，转换成普通的响应式对象（避免丧失响应性）
    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• ref 和 reactive 的区别

  

  

• 总结：

  1. 所有场景都可以使用 reactive，但是要记得使用 toRefs 保证reactive对象属性保证响应性
  2. ref 一般传入的原始类型
  3. reactive 传入的是对象

​

• Vue3 的响应式原理

  Proxy

• Vue3 生命周期

  

  onMounted(() => {
        console.log("onMounted");
      });
  
      onUpdated(() => {
        console.log("onUpdated");
      });
  
      onRenderTriggered((event) => {
        console.log(event);
      });
  

• 侦听器 watch : 监听响应式数据的变化

  <!--
   * @Description: 
   * @Autor: zhangbing
   * @Date: 2021-09-07 18:20:36
   * @LastEditors: zhangbing
   * @LastEditTime: 2021-09-07 22:23:25
  -->
  <template>
    <div>
      <img alt="Vue logo" src="./assets/logo.png" />
      <h1>{{ count }}</h1>
      <h1>{{ double }}</h1>
      <ul>
        <li v-for="number in numbers" :key="number">
          <h1>{{ number }}</h1>
        </li>
        <h1>{{ person.name }}</h1>
      </ul>
      <button @click="increse">+1</button>
      <br />
      <button @click="updateGreeting">updateTitle</button>
    </div>
  </template>
  
  <script lang="ts">
  import {
    ref,
    computed,
    reactive,
    toRefs,
    onMounted,
    onUpdated,
    onRenderTriggered,
    watch,
  } from "vue";
  
  interface DataProps {
    count: number;
    double: number;
    increse: () => void;
    numbers: number[];
    person: { name?: string };
  }
  
  export default {
    name: "App",
    setup() {
      // const count = ref(0);
      // const double = computed(() => {
      //   return count.value * 2
      // })
  
      // const increse = () => {
      //   count.value++
      // }
  
      onMounted(() => {
        console.log("onMounted");
      });
  
      onUpdated(() => {
        console.log("onUpdated");
      });
  
      onRenderTriggered((event) => {
        console.log(event);
      });
  
      const data: DataProps = reactive({
        count: 0,
        increse: () => {
          data.count++;
        },
        double: computed(() => data.count * 2),
        numbers: [0, 1, 2],
        person: {},
      });
  
      data.numbers[0] = 5;
      data.person.name = "zhangbing";
  
      // toRefs 接收一个 reactive 对象，转换成普通的响应式对象
      const refData = toRefs(data);
      const greetings = ref("");
      const updateGreeting = () => {
        greetings.value += "Hello";
      };
  
      // document.title = "updated" + greetings.value;
  
      const greeting = () => {
        document.title = "updated" + greetings.value;
      };
  
      /* watch([greetings, data], (newValue, oldValue) => {
        console.log('old', oldValue);
        console.log('new', newValue);
        document.title = "updated" + greetings.value + data.count
      }); */
  
      // 侦听器 watch：监控响应式数据的变化
      watch([greetings, () => data.count], (newValue, oldValue) => {
        console.log("old", oldValue);
        console.log("new", newValue);
        document.title = "updated" + greetings.value + data.count;
      });
  
      return {
        ...refData,
        updateGreeting,
      };
    },
  };
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>