vue3.0---> vue3的使用

Vue3.0的特点

编译性能比vue2更快。
按需编译，体积比vue2更小。
支持组合API.
更好的TS支持 ..

1.性能

1.1双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告；

1.2重写了 Vdom ，突破了 Vdom 的性能瓶颈

1.3进行了模板编译的优化

1.4进行了更加高效的组件初始化

2.Tree-Shaking 的支持

支持tree-shaking（剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小（13kb）。也可以理解成按需打包，全部功能打包也只有23KB

3.CompositionAPI

composition-api 是一个 Vue3 中新增的功能，灵感来自于 React Hooks ，是比 mixin更强大的存在。
composition-api 可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。

Composition API(常用部分)

1、setup（函数）

新的option所有的组合API函数都在此使用，只在初始化时执行一次

函数如果返回对象，对象中的属性或方法，模板中可以直接使用

<template>
  <div>哈哈哈哈哈</div>
  <!-- 直接使用setup内返回对象的属性 -->
  <div>{{ number }}</div>

</template>
<script>

    export default({
      name: "App",
      // 函数如果返回对象，对象中的属性或方法，模板中可以直接使用
      setup() {
        console.log("welcome vue3！！！");
        const number = 10;
        return {
          number,
        };
      },
    });
</script>
<style>

</style>

2.ref

ref可以传递基础数据类型和引用数据类型。如果是基础数据类型，那么这个基础数据值保存在返回的响应式数据的.value上；如果是对象，响应式数据在.value上。

ref本质是将一个数据变成一个对象，这个对象具有响应式特点

//用法：
//引入：
import { ref } from "vue";
//声明变量
let num = ref(1);
//调用或者修改值变化
    const add1 = (): void => {
      num.value++; // 注意通过ref声明的变量，所以js要修改对应的值是要通过
      //.value访问才可以，template模板不需要通过.value访问
    };

//或者可以简写，省略数据类型
const add1=()=>{
   num.value++;
}

3、reactive

reactive声明响应式数据，用于声明引用数据类型

reactive可以传递基础数据类型和引用数据类型，基础数据类型不会被包装成响应式数据
reactive返回的响应式数据本质是Proxy对象，对象里面每一层都会被包装成Proxy对象

reactive返回的响应式数据和原始的数据会相互影响

    //用法：
    //引入：
    import { reactive } from "vue";
    //声明变量
    let state = reactive<ObjItf>(obj);
    //或者
    let state = reactive({
      name:"张三"
    });


    //调用或者修改值变化
    const test = () => {
      console.log('test方法');
      a.name = a.name+1
    }

    //或者

    const add2 = () => {
       state.count++; // 通过reactive声明的遍历，不需要通过.value访问值
    };

4、setup参数及细节问题

setup细节问题
1、setup在生命周期beforeCreate执行之前执行，而且就执行一次
2、由此可以推断出：setup在执行的时候，当前的组件还没有创建出来。也意味着：组件实例对象this不能用
3、setup中的对象内部的属性和data函数中的return对象的属性都可以在html模板中使用
4、setup中的对象中的属性和data函数中的对象中的属性会合并为组件对象的属性
5、返回对象中的方法会与methods中的方法合并成为组件对象的方法

5、Watch 监听

语法：watch(监听源|[多个], (val, oldVal) => {}, {immediate?: false, deep: false})

watch写法上支持一个或者多个监听源，这些监听源必须只能是getter/effect函数，ref数据，reactive对象，或者是数组类型

6.watchEffect

它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

**watch 和 watchEffect的区别**

-   两者都可以监听 `data` 属性变化；
-   `watch` 需要**明确监听哪个属性**；
-   而 `watchEffect` 会根据其中的属性，**自动监听**其变化。

计算属性computed

<script>

    import {watchEffect,ref, computed} from 'vue'
    let num = ref(1)

    setTimeout(() => {
        num.value++;
    }, 1000);

    // 计算属性
    let newNum = computed(()=>{
        return 'ref:num值=' + num.value
    })

    console.log(newNum);
    console.log(num);

</script>