vue3--相对于vue2的改变-T0档次

前言

　　vue3相对于vue2做了不少的改变，个人对其进行了一些整理。并结合在日常中的使用，对这些新特性在开发时的影响度进行了分级。

T0档次

　　setup

　　　　介绍：setup(props,content) objet

　　　　　　官方文档给出的解释是，在目前vue在编写复杂组件的时候（组件内代码量的庞大），会导致本来是一个逻辑块的代码，分散开来。这样会增加后面接手的人阅读上的难度。所以提供了一个组合api，可以把相同逻辑的代码块放在一个地方，这样便于阅读。不过这个东西仁者见仁智者见智，本人就觉得把一个个逻辑块分块放好也挺好的，重点开发人员编码习惯，一个邋遢的开发人员，就算你给他提供再好的api，照样会给你写出奇形怪状的代码来。但话说回来，你可以不用，但我不能没有。vue3充分尊重了开发人员的选择，setup你可以用，也可以不用。就像vue2一样，在钩子函数和methods中编写逻辑块，也是一种正确的选择

　　　　使用细节：

　　　　　　相对于vue2的执行周期

　　　　　 　　　setup（beforeCreate，created）凡是在原来beforeCreate和create中执行的代码，你都可以放在setup中，而且setup执行的时机还在brforeCreate之前

　　　　　　一些限制

　　　　　　　　1.不能访问$data，this

　　　　　　　　2.必须返回一个{}，

　　　　　　返回值

　　　　　　　　如果存在返回值，那么它将会合并到$data中，如果$data已经存在相同的key，那么将会覆盖原有key值。值得一提的是，如果你返回的是一个普通对象，那么即便合并到$data之后，改变对应的值，也不会具有响应性。你需要使用vue3提供的响应式方法，将普通对象转化成响应式对象，这样合并在$data上的属性才会是响应式的

　　　　　

响应式原理

　　变化：

　　　　vue3将原来vue2中对数据响应式处理方法，由es5的Object.defineProperty改为es6的Proxy

　　不同的点：

　　　　defineProperty：是对对象的属性定义拦截，如果被定义的obj对象存在多个属性或者是多嵌套结构，那么就要便利递归它所有的属性，挨个去使用Object.defineProperty定义属性拦截

    let value = "obj1 - prop1";
    let obj = {};
    Object.defineProperty(obj, "prop1", {
      get() {
        return value + " suffix";
      },
    });

    console.log(obj); //obj1-name suffix

　　　　Proxy：是对obj整个对象进行代理，它返回一个新的代理对象,这意味着：

　　　　　　1.当我们改变数组中某一项的值的时候再也不需要使用$set了，直接this.arr[1]=new value即可触发视图更新。

　　　　　　2.我们在响应式对象上新增的属性时，依然会触发也会触发视图更新

    let obj = { prop1: "obj1 - prop1" };
    let objProxy = new Proxy(obj, {
      get(obj, prop) {
        return obj[prop] + " suffix";
      },
    });
    console.log(obj.prop1); //obj1-prop1
    console.log(objProxy.prop1); //obj1-prop1 suffix
    return reactive({ data: "9999" });

生命周期函数钩子

　　介绍：vue3新增一批生命周期钩子函数，其目的是为了解决在使用setup的时候，因为setup的执行周期是在beaforeCreate和ceated之间，一些需要在其他周期时机内执行的一些逻辑，比如获取dom。无法setup中执行。所以为了使在setup中的代码，能够在指定的声明周期内执行，vue3补充了一些周期钩子函数，它们的作用和vue的声明周期钩子完全一样。

　　

　　举例使用

import { onMounted } from "vue"; //引入钩子函数,其他的声明周期钩子函数也是如此引入
export default {
  setup(props, content) {
    //因为在setup中无法访问this，所以也无法访问到$data，代码中需要依赖到$data中的字段的话，可以在setup中定义data，setup return之后，会合并至$data
    const data = reactive({
      data: 1,
    });
    //所有的钩子函数都是接收一个方法作为参数
    onMounted(function() {
      console.log("参数方法，在对应的生命周期内执行 mounted", data.data);
    });
    console.log("在setup中的代码，在beforeCreate至created 生命周期内执行");
    return data;
  },

响应式api

　　简介：vue3提供的响应式api可以使普通对象转化为响应式对象，这也是为了配合setup的使用提供的一个方法，在setup的执行时机是beforeCreate和created，并且无法访问到this和$data，而使用setup可能会使用到一些响应式的变量（比如说，请求一个接口，在接口响应后将数据渲染到页面上，因为接口响应是异步的，所以就必须要一个响应式的对象接收数据发生改变，从而触发视图更新），而setup中不能读取this，自然就无法获取到data(){}项中定义的响应式属性，所以只能通过return的方式，把一个响应式的对象合并到data中。

<template>
  <div class="hello">
    {{ prop1 }}
  </div>
  <button class="but" @click="changeVal">改变值</button>
</template>

<script>
export default {
  setup(props, content) {
    //setup中将一个普通对象return合并到$data上之只会在初次渲染的时候作用在视图上，后续再对prop1进行更改this.prop1=new value，是不会触发视图更新的.因为data中的prop1只是一个普通的对象，而非响应式对象
    const data = {
      prop1: "old value",
    };
    return data; //return对象中所有属性都会合并到$data上
  },
  methods: {
    changeVal() {
      this.data = "new value"; //不会触发视图更新
    },
  },
};
</script>

//使用响应式api

//引入响应式api
import { ref } from "@vue/reactivity";
export default {
  //要想使setup中return的对象具有响应式那么只需将return的对象使用响应式钩子处理即可
  setup(props, content) {
    const data = {
      prop1: ref("old value"),//使prop1属性变成响应式对象
    };
    return data;
  },
  methods: {
    changeVal() {
      this.prop1 = "new value";//视图发生改变
    },
  },
};

 响应式api分类：

　　　　1.reactive 将引用类型对象转化成响应式对象，（这样的好处是，遇到复杂的数据类型，不需递归去使用ref，不然又回到了vue2）

reactive({} || []); //针对引用类型，将引用类型转化为响应式对象

　　　　2.ref 适合将基本类型转化成响应式对象，但ref同样也能对引用类型进行转化，与reactive不同的是，你需要通过ref.value来使用属性。对于基本类型来说这是实现响应式的基本条件，但是对于引用类型来说已经可以通过Proxy来实现代理，没有必要在进行过渡封装本来可以prop直接使用，没有必要value.prop，所以为什么说，ref适合基本类型。值得一提的是ref在对引用类型处理的时候，也是将其转化成Proxy

const obj = ref(1 || "1"); //针对基本类型，接受一个基本类型返回响应式对象
console.log(obj.value); //返回的响应式对象，通过value获取值

响应式api拓展

　　为了让开发者在使用响应式api时，能够便捷，全面的适用场景，vue3，对响应式api进行了一些拓展，围绕reactive和ref提供了一些功能性的api

　　1.reactive

　　　　readonly：创建一个只读的响应式对象。ps：（都只读了还需要响应式吗？）

 import {readonly} from "vue";//引入方法

　const copy = readonly({
      prop: "测试属性",
      level: { prop: "level 测试属性" },
    }); //将普通对象的副本转化成一个只读的响应式对象
    copy.prop = "1234"; //warning；在这里改变只读的copy响应式对象时，会出现警告，不允许改变响应式对象copy的prop属性；
    copy.level.prop = "9999"; //warning 只读属性是深层次的，不管嵌套了多少层，只要是属于copy内部的属性，都无发更改
  },

　　　　isProxy：判断响应式对象是否是由reactive或者readonly创建的Proxy

　　import {readonly} from "vue" //引入方法

　　 const copy = reactive({
      prop: "测试属性",
    });
    const copyReadonly = readonly({ prop: "only 属性" });
    console.log(isProxy(copy)); //true
 　 console.log(isProxy(copyReadonly)); //true
    console.log(isProxy({copyReadonly，copy})); //false

　　　　isReactive：判断响应式对象是否是由reactive创建响应式对象

　　import {isReactive} from "vue"　　

　　const copy = reactive({
      prop: "测试属性",
    });
    const copyReadonly = readonly({ prop: "only 属性" });
    console.log(isReactive(copy)); //true
    console.log(isReactive(copyReadonly)); //true
    console.log(isReactive(readonly(copy))); //true 如果readonly依赖与reactive创建，那么也返回true
    console.log(isReactive(readonly({ copy }))); //false 

　　　　isReadonly：判断是否是由readonly创建的响应式对象

 　import {isReadonly} from "vue";//引入方法

　　const copy = reactive({
      prop: "测试属性",
    });
    const copyReadonly = readonly({ prop: "only 属性" });

    console.log(isReadonly(copy)); //false
    console.log(isReadonly(copyReadonly)); //true
    console.log(isReadonly(readonly(copy))); //true 如果readonly依赖于reactive创建，同样返回ture

　　　　toRaw：返回 reactive 或 readonly 代理的原始对象。这是一个转义口，可用于临时读取而不会引起代理访问/跟踪开销，也可用于写入而不会触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

　　const copy = reactive({
      prop: "测试属性",
    });

    const copyReadonly = readonly({ prop: "only 属性" });
    console.log(toRaw(copy)); //{prop:"测试属性"}
    console.log(toRaw(copyReadonly)); //{prop:"only 属性"}
    console.log(toRaw(readonly(copy))); //{prop:"测试属性"} 多重嵌套同样可以获取到原始值

 　　　　markRaw：标记一个对象，使其永远不会被转还成代理

　  const base = markRaw({ prop: "base prop属性" });
    const reactiveBase = reactive(base);
    const readonlyeBase = readonly(base);
    const proxyBase = reactive({ reactiveBase });
    const proxyBase2 = reactive({ reactiveBase, prop2: "1245" }); //这里多出一个普通属性prop2
    console.log(isReactive(reactiveBase)); //false
    console.log(isReadonly(readonlyeBase)); //false
    console.log(isReactive(proxyBase)); //true 但是改变属性reactiveBase中的prop，仍不会触发视图更新
    console.log(isReactive(proxyBase2)); //true 只改动属性reactiveBase中的prop不会触发视图更新，但同时改变prop2属性，因为prop2属性正常的属性，所以会触发视图更新，视图更新的时候发现reactiveBase中的prop也发生了改变，
                                         //所以即便它被设置成了markRaw，也一样会在视图上呈现改动后的内容,

　　　　shallowReactive：只对自身的属性进行响应式的追踪，对于嵌套的属性，不做响应式处理

　　const obj = {
      level1: "测试属性level1",
      sub: {
        subProp1: "测试属性subProp1",
      },
    };
    const shallowReactiveObj = shallowReactive(obj);

    const reactiveObj = reactive(obj);//reactive

    console.log(isReactive(shallowReactiveObj)); //true
    console.log(isReactive(shallowReactiveObj.sub)); //false
    console.log(isReactive(reactiveObj.sub)); //true
    // ...
    //改动自身属性，触发视图更新
    shallowReactiveObj.level1 = "new level1";
    // ...
    //改动嵌套属性，不触发视图更新
    shallowReactiveObj.sub.subProp1 = "new sub subProp1";
    // ...
    //同时改变嵌套属性和自身属性
    shallowReactiveObj.level1 = "new level1";
    shallowReactiveObj.sub.subProp1 = "new sub subProp1"; //和markRaw一样，因为改变自身属性时会造成视图更新，而更新的时候发现嵌套熟悉sub.subProp1也改变了，所以改变后的sub.subProp1也会渲染至最新视图
    return shallowReactiveObj;

　　　　shallowReadonly：使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 改变状态本身的property将失败
state.foo++
// ...但适用于嵌套对象
isReadonly(state.nested) // false
state.nested.bar++ // 适用

　　2.ref

　　　　unref：如果参数为 ref，则返回内部值，否则返回参数本身

    let baseVal = 1;
    console.log(unref(ref(1))); //返回内部置 1
    console.log(unref(baseVal)); //number 1

　　　　toRef：可以为响应式对象的其中property创建一个ref，然后将其独立使用

 　 let baseVal = {
      prop1: "baseVal.prop1",
    };
    let prop1 = toRef(reactive(baseVal), "prop1");
    ...
    prop1 = "new prop1"; //触发视图更新

　　　　toRefs：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的

　　let state = {
      prop1: "baseVal.prop1",
      prop2: "baseVal.prop2",
      sub: {
        prop1: "axsxsxs",
      },
    };
    let stateRef = toRefs(reactive(state)); //将一个rective转化成普通对象，并将reactive的property转化成ref
    // ...
    stateRef.prop1 = "new value"; //触发试图更新

    console.log(stateRef.sub); //Proxy 如果reactive的peoperty中存在{}||[],那么则不做处理，只是简单的保留，换句话说，就是toRefs只对基本类型property处理，非基本类型的proper，就地保留

　　　　isRef：检查变量是否是一个ref，使用方法和isReactive一致

    const state = "test";
    const refState = ref(state);
    console.log(isRef(refState)); //true;
    console.log(isRef(state)); //false;

　　　　cutomRef：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。

    let state = "test";
    const refState = customRef((track, trigger) => {
      let timeout;
      return {
        get() {
          track(); //track方法在get必须要执行，它是用来搜集依赖元素（订阅者），
          return state;
        },
        set(newValue) {
          clearTimeout(timeout);
          //这里表示延迟两秒通知订阅者更新，使用延迟函数能够更好的体现变化的异步效果，在学习过程中更便于理解
          timeout = setTimeout(() => {
            state = newValue;
            trigger(); //trigger是必须要执行的，他表示通知vue，refState已经发生改变，通过track() 收集到的订阅者需要更新了
          }, 1000);
        },
      };
    });

　　　　shallowRef：创建一个 ref，它跟踪自己的 .value 更改，但不会使其值成为响应式的。在改变ref.value的时候会发生试图更新，在改变ref.value.prop的时候则不会触发试图更新

 setup() {
    let stateRef = shallowRef({ prop: "old val" }); //这里之所以使用引用类型，是因为对于基本类型ref.value直接可以访问值，无法演示ref.value.prop
    setTimeout(() => {
      stateRef.value = { prop: "new val" }; //触发视图更新（副作用之一）
    }, 2000);
    setTimeout(() => {
      stateRef.value.prop = "new val2"; //无法触发视图更新
    }, 3000);
    return {
      stateRef,
    };
  }

　　　　triggerRef：手动触发与shallowRef的关联效果

setup() {
    const shallow = shallowRef({
      greet: "Hello, world",
    });

    // 第一次运行时记录一次 "Hello, world"
    watchEffect(() => {
      console.log(shallow.value.greet);
    });

    // 这不会触发作用，因为 ref 很浅层
    shallow.value.greet = "Hello, universe";

    // 记录 "Hello, universe"
    triggerRef(shallow);
    return { shallow };
  }