VUE3.0详解（一）ref，reactive，toRef，toRefs，setup概念及实战

vue3也发布了有一段时间了，咱们赶快进入3.0的学习吧

2.0与3.0的区别

直接说最大的四个区别
（1）重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势
具体表现为
•可直接监听数组类型的数据变化(watch,watchEffect)
•监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
•可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
•直接实现对象属性的新增/删除

let person = reactive({
  name: '张三',
  age: 18,
  job: {
    type: '程序员',
    salary: '300k'
  }
  hobby:['游泳','跑步','爬山']
})
functon deleteAge(){
  delete person.age
}
function addSex() {
  person.sex = '男'
}

（2）新增Composition API，更好的逻辑复用和代码组织（重点）
a、Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是Vue的API设计迫使开发者使用watch，computed，methods选项组织代码，而不是实际的业务逻辑。

b、另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用，但是当mixin变多的时候，会使得难以找到对应的data、computed或者method来源于哪个mixin，使得类型推断难以进行。

所以Composition API的出现，主要是也是为了解决Option API带来的问题

a、第一个是代码组织问题，Compostion API可以让开发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他自己写的代码时，他可以更好的利用代码的组织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码。

b、第二个是实现代码的逻辑提取与复用，当然mixin也可以实现逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个组件时，很难看出property是来源于哪个mixin，来源不清楚，另外，多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。

（3）重构 Virtual DOM（虚拟 DOM 就是一个用 JavaScript 对象表示真实 DOM 的概念）
•模板编译时的优化，将一些静态节点编译成常量
•slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件（懒加载组件提高应用性能的应用）

const myComponent = () =>import('./myComponent') // 只需这样写就能懒加载引入组件了
<img v-lazy="imgurl"> // 图片加上v-lazy就能自动实现懒加载，imgurl是图片路径

•模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）
4.代码结构调整，更便于Tree shaking（Tree shaking 是指在打包过程中通过静态分析，去除未使用的代码（未被引用的模块或函数），从而减小最终打包生成的文件体积，），使得体积更小（摇树嘛，很好理解）
5.使用Typescript替换Flow

（4）对数据类型要求更加严谨（配合TS）
在传入参数或声明变量时，都需要声明数据类型

const msg = ref<string>('Hello world')

&&概括&&

更快
　　1、virtual DOM 完全重写，mounting & patching 提速 100%；
　　2、更多编译时 （compile-time）提醒以减少 runtime 开销；
　　3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能；
　　4、放弃 Object.defineProperty ，使用更快的原生 Proxy；
　　5、组件实例初始化速度提高 100%;
　　6、提速一倍/内存使用降低一半；

更小
　　1、Tree-shaking 更友好；
　　2、新的 core runtime：~ 10kb gzipped；

上述文字其实就大概涵盖了所有改动及优化，接下来咱们进入实战

要创建一个vue3.0的项目，咱们要知道几个基础的知识点

一、响应式声明
1、ref和reactive,这俩都是把基础数据包装为响应式数据，区别是ref包装过后，值在 .value 里面
2、reactive包装过后，没有.value这一层
3、ref适用于包装基本数据类型，而reactive适用于包装对象
4、toRefs和toRef函数
（1）会将解构后的属性包装为带value的对象
（2）toRefs意为批量创建多个 ref 对象
（3）toRef是创建一个 ref 对象，其value值指向另一个对象中的某个属性。

上代码
一，ref，reactive，toRef（），toRefs（）

import { reactive, ref,  toRefs, toRef } from "vue";
let refTest = ref('refTest')
let info = reactive({
  name: "Echo",
  age: 26,
  gender: "Male",
});
let { age, gender } = toRefs(info);
let newName = toRef(info, "name");
function say() {
  console.log(refTest.value，info.name, info.age, info.gender, newName.value); //输出 refTest Echo 26 Male Echo
}

二、setup
1、为了使用3.0采用的组合式api，我们需要一个入口，也就是setup，大白话讲，setup = data+method+computed(所有数据方法全写在setup里)
2、setup在beforecreated之前执行一次
3、setup中没有this，输出this为undefined
4、setup有两种写法

 //  方式一：使用组合式api
import {reactive, toRefs} from "vue";

export default {
  name: "SetupDemo",
  setup() {
    const data = reactive({
      readersNumber: "",
      userList: [],
      tableList: [],
    })
    const onClick = function () {
      console.log(data.readersNumber, '自定义点击事件'
    }
    return {
      //解构
      ...toRefs(data),
      onClick
    }
  }
}

第二种写法（语法糖）

<script lang="ts" setup>
import { reactive, ref, toRefs, toRef } from "vue";
let a = reactive({ a: 1 });
let info = reactive({
  name: "Echo",
  age: 26,
  gender: "Male",
});
let b = ref(1);
function abc() {
  a.a += 1;
  b.value += 1;
}
let { age, gender } = toRefs(info);
let newName = toRef(info, "name");
const update = () => {
  // name.value = "Julie";
  age.value = 33;
  gender.value = "Female";
  newName.value = "newName";
};
function say() {
  console.log(info.name, info.age, info.gender, newName.value); // 第一次输出  Echo 26 Male Echo  执行update方法过后输出 newName 33 Female newName
}
</script>
<style lang="less" scoped>

到此，vue3.0的基础响应式数据（ref，reactive，toRef()，toRefs() ），和setup方法，就完成了