Vue3的新特性变化，上手指南！

本文链接：https://blog.csdn.net/qq_60961397/article/details/128415207

一、Vue3相比Vue2，更新了什么变化？

新增响应式数据劫持的Api，在Vue2 中，数据响应式劫持更新采用的是 Object.defineProperty()，但是 Object.defineProperty()，会有一些缺陷，例如监听不到对象属性的新增或者删除，以及数组通过下标索引，直接更改数据后，无法响应式更新。，所以Vue3中，新增了 Proxy 作为响应式数据劫持的Api，响应式数据监听更加高效。
友好的支持了 TypeScript 的语法。
以及新增了组合式API 的编码风格！

二、Proxy 代理响应式原理

        let arr = {
            name: "张三",
            age: 18
        }
        let Responsivedata = new Proxy(arr, {      //通过 Proxy 实例实现代理对象
            get(target, attributeName) {   //   收到两个参数  用来捕获读取代理对象属性时的数据
                // target：代理的源数据
                // attributeName : 操作当条数据的key
                console.log(target, attributeName);
                return Reflect.get(target, attributeName);  //  使用  Reflect 反射对象 把数据 返回出去
            },
            set(target, attributeName, value) {   //捕获修改新增对象属性时，拿到新增修改的值
                // target：代理的源数据
                // attributeName : 操作当条数据的key
                // value ：新增 修改的 value 值
                console.log(target, attributeName, value);
                Reflect.set(target, attributeName, value); //   使用  Reflect 反射对象  在这里真正操作修改源数据的变化
            },
            deleteProperty(target, attributeName) {    //捕获 源数据 ，以及删除当前数据的key。
                // target：代理的源数据
                // attributeName : 操作当条数据的key
                console.log(target, attributeName);
                return Reflect.deleteProperty(target, attributeName); //  使用  Reflect 反射对象  在这里真正操作删除源数据。
            }
        });

点击了解 Reflect

三、组合式 API (Composition API)

概念：

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

setup()函数:

setup是vue3新增的生命周期函数，setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。
————————
setup内部可以定义数据和方法，如果想在模板中使用，必须通过return进行返回。
————————
setup函数内，要使用的Api方法配置项，采用按需映入如 computed、watch等。

<script>
import { computed, watch} from 'vue';   //按需映入
export default {
  name: 'HelloWorld',
  setup() {
    let name = "张三";   //直接定义数据
    let arr = [{ a: 1 }, { b: 2 }];
    const addnum = () => name = "李四";  //直接定义数据的方法
    return {
      name,
      arr,
      addnum 
    }
  }
}
</script>

注意：如上在setup中定义的数据，页面中虽然能够读取，但是数据发生改变时，不会触发响应式更新。需要借助 ref() 函数以及 reactive() 函数实现响应式

ref()函数

<script>
import { ref } from 'vue'  //按需映入ref
export default {
  name: 'HelloWorld',
  setup() {
    let name = ref("张三");  //直接定义数据
    const addnum = () => name.value = "李四";  //通过.value 操作数据
    console.log(name);   //见下图
    return {
      name,
      addnum 
    }
  }
}
</script>

请添加图片描述

在setup函数中 ref() 函数通常用来包裹基本数据类型，为该数据提供响应式监听,操作该数据时，需要通过点. value 拿取到数据。

reactive()函数

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    let arr = reactive([{ a: 1 }, { b: 2 }]);
    console.log(arr);   //通过 reactive 函数包裹的 数据结构见下图
    const addnum = () => arr[0].a = 456;  //直接更改数据的方法
    return {
      addnum,
      arr
    }
  }
}
</script>

请添加图片描述

reactive 函数通常用来包裹引用数据类型，为引用数据类型提供响应式。

ref 函数和 reactive 函数总结

ref() 函数用来定义基本数据类型。
reactive () 函数用来定义引用数据类型。
-备注： ref函数也能用来定义引用数据类型（但reactive () 函数不能用来定义基本数据类型），它内部会自动调用 reactive 函数转为代理对象=》但是不推荐。
ref 函数响应式原理依然采用的是 Object.defineProperty 的get 和set 方法通过数据劫持来完成响应式。
reactive() 函数通过 ES6 的 Proxy 代理对象的数据劫持来实现响应式（见上节 Proxy 响应式原理。
ref 函数定义的数据操作数据时需要通过 .value 模板中读取则不需要。
reactive 函数定义的数据操作数据或模板读取时，均不需要 .value。

组合式 setup 中使用 Props 父向子传递参数

setup 可以接收两个参数
第一个参数Props

export default {
  name: 'HelloWorld',
  props:["masg"],  //父组件中，按v2 正常传递参数，子组件这里正常接收
  setup(props,context) {
   //  setup 这里的第一个参数 就是 Props ，不过被setup包裹成了 代理对象数据，具有响应式
    console.log(props,context);
    return {
     props
    }
  }
}

第一个参数
第二个参数 context （上下文对象)

context 主要接收三个参数

attrs：值为对象，包含组件外部传递过来的参数，但是并没有在 Props 中声明接收，则会出现在这里，Props 中如果接受了参数，则就不会再出现在这里和 V2中 this.$attrs 同理
emit：分发自定义事件的函数同 v2 this.$emit
slots：接收到外部组件传入的插槽内容。

请添加图片描述

计算属性

在Vue3.x 中，计算属性属性不再通过配置项操作，而是通过引用一个计算属性函数。

点击查看 Vue3 计算属性

 点击查看Vue2中计算属性

watch（数据监视）

同样在Vue3.x 中，watch 属性不再通过配置项操作，而是通过引用一个 watch 函数。

点击查看 Vue3 中的 watch ，watchEffect

点击查看Vue2 中watch

Vue3 生命周期钩子函数

生命周期图例

注明：

在Vue3中，依然可以通过配置项使用Vue2中的生命周期钩子函数，但是有两个钩子函数名称被更名：

beforeDestroy =》更名为 beforeUnmount
destroyed =》更名为 unmounted

官方推荐在Vue 3中使用组合式 API (Composition API) ，所以Vue3 也提供了一套组合式 API (Composition API) 形式的生命周期钩子函数，与Vue2中的函数钩子对应如下：

Vue2	Vue3（setup）	描述
beforeCreate	`setup()`	实例创建前调用
created	`setup()`	实例创建后调用
beforeMount	`onBeforeMount`	DOM挂载前调用
mounted	`onMounted`	DOM挂载成功后调用
beforeUpdate	`onBeforeUpdate`	数据更新之前调用
updated	`onUpdated`	数据更新之后调用
beforeUnmount	`onBeforeUnmount`	组件卸载之前调用
unmounted	`onUnmounted`	组件卸载完成后调用

自定义 Hook 函数（）

其本质是一个函数，把 setup 函数中使用的 Composition API 放到一个文件中进行了封装，然后在需要用到的地方，进行引入，类似于 vue2.x 中的 Mixin。总结就是，把多个地方都会用到的组合式api 方法进行抽离化，封装。

toRef 和 toRefs 钩子函数

使用场景：当结构模板中使用到 reactive 对象类型数据的时候，如果数据结构嵌套过深的时候，会出现大量 xxx.xxx.xxx 的赋值现象
————————————————————————————————————————————————————
作用：代理创建一个 Ref 对象，其 Value 值映射到一个指定对象中的某个属性
————————————————————————————————————————————————————
语法：let name = toRef(obj, "name"); obj是所要代理的对象，name是obj身上所要具体映射的 key。
————————————————————————————————————————————————————
应用：要将响应式数据中的某个属性，单独提供给外部使用时，并且需要依然保持响应式
————————————————————————————————————————————————————
扩展：toRefs 和 toRef 功能基本一致，但是可以批量创建 ref对象语法： toRefs (obj)

shallowReactive 和 shallowRef 函数

shallowReactive：处理对象形式的数据时，只进行浅层次监听响应式，只处理最外层数据。
————————————————————————————————————————
shallowRef ：当传入基本数据类型的时候，作用和 ref 一样，如果传入的是对象类型数据时，则不会进行响应式监听处理。

readonly 和 shallowReadonly 函数

readonly ：把一个响应式数据，限制为只读的（深层次的）
shallowReadonly ：把一个响应式数据，限制为只读的（浅层次的）

toRaw 和 markRaw 函数

toRaw：将 reactive 生成的响应式对象转化成普通的原始对象，如果传入的是 ref 数据，之前会报出 undefined ，vue最新版修复后则不会进行转化处理，也不会报 undefined
markRaw ：标记一个对象，使其被标记后的对象，不会被转换成响应式数据对象。

customRef 自定义Ref 函数

概念：创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。,使其能够使开发者更加灵活地操作响应式数据。

  setup() {
    let myref = (val) => {
      return customRef((track, trigger) => {
        return {
          get() {
            console.log("读取数据");
            track()
            return val
          },
          set(newval) {
            console.log("修改数据");
            val = newval
            trigger()
          }
        }
      })
    }
    let keywordname = myref(500)
    return {
      keywordname
    }
  }