vue3.0 和vue3.2的使用Vue3.0和Vue3.2的区别 -vue3.2 中只需要在 script 标签上加

1、Vue3.0和Vue3.2的区别

-vue3.2 中只需要在 script 标签上加上 setup 属性
-Vue3.0中的setup 是要在 export default 中使用 setup 属性
-Vue3.2在性能的改进在界面渲染的速度上更快依赖也大大减少了以及内存的使用量

<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。

起初 vue3.0 暴露变量必须 return 出来，template中才能使用

实例：使用以下三步来建立反应性数据:

从vue引入reactive
使用reactive()方法来声名我们的数据为反应性数据
使用setup()方法来返回我们的反应性数据，从而template可以获取这些反应性数据

import { reactive } from 'vue'
export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })
 
    return { state }`
    //Vue3.0需要 retrun state这个数组

vue3.2 中只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下是 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。

1. 性能改进
主要表现在界面渲染速度的提升和内存使用减少上：更高效的 ref 实现（约 260% 的读取速度/约 50% 的写入速度）约 40% 更快的依赖跟踪内存使用量减少约 17% 模板编译器也得到了一些改进：创建普通元素 VNode 的速度提高最后，有一个新v-memo指令提供了记忆模板树的一部分的能力。一v-memo允许Vue跳过虚拟DOM版本比较，创建新的虚拟节点。虽然很少需要，但它提供了一个逃生舱，以在某些情况下（例如大型v-for列表）挤出最大性能。

2.服务端渲染
3.2 中的包现在提供了一个 ES 模块构建，它也与 Node.js 内置模块分离

3. 效果范围 API
3.2 引入了一个新的 Effect Scope API （effectScope、getCurrentScope、onScopeDispose等），用于直接控制反应性效果（计算和观察者）的处理时间。它可以更轻松地在组件上下文之外利用 Vue 的响应式 API，并且还解锁了组件内部的一些高级用例。

2、Vue3.0的特点

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

1.setup

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2.ref

作用: 定义一个数据的响应式
语法: const xxx = ref(initValue):
创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value

2.1、生命周期函数

setup() 页面创建之前执行的函数。所以整个面用setup()函数来初始化参数
onBeforeMount：页面渲染之前执行；
onMounted：页面渲染时；
onBeforeUpdate：页面更新之前；
onUpdated：页面更新之后；
onBeforeUnmount：页面销毁之前；
onUnmounted：页面销毁之后；
这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部全局状态来定位当前活动实例 (此时正在调用其 setup() 的组件实例)。在没有当前活动实例的情况下调用它们将导致错误。

组件实例上下文也是在生命周期钩子的同步执行期间设置的，因此在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。前提需要引入

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

2.2、响应式ref函数

使用步骤:

① 从vue框架中导入ref函数

② 使用ref函数并传入数据(简单数据类型或复杂数据类型)

③ 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去

ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。该对象只包含一个名为 value 的 property 注意：在setup函数中需要加.value，在template模板中不需要加value

ref引用:

在vue2中获取 DOM元素和子组件的引用直接绑定ref 通过$refs.ref绑定属性名获取引用

在vue3中直接绑定ref 是获取不到的

<template>
  <div ref="box"></div>
</template>
 
<script>
import { ref, onMounted } from "vue";
export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      console.log(box.value);
    });
    return { box };
  },
};
</script>

注意获取dom要在onMounted钩子函数中获取，或者添加一个点击事件

2.3、 reactive函数

我们使用ref函数进行定义响应式数据每次使用都要加.value，reactive就是用来省去加.value，但是只能定义复杂数据类型的数据

<template>
  <div>
    {{ obj.a }}
    <button @click="addNum">加1</button>
  </div>
</template>
 
<script>
import {reactive} from 'vue'
export default {
  setup() {
      const obj = reactive({a:1}) 
      const addNum = ()=>obj.a++
      return {obj,addNum}
  },
};
</script>

2.4、 toRefs函数

定义完响应式数据后，我们每次都要在模板中通过对象.的形式进行渲染数据，但是如果为了解决这种麻烦可以通过toRefs函数进行解构，模板中就可以直接使用a了 toRefs与reactive配套使用。

官网：当从组合式函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散

2.5、如何取舍ref和reactive

我们现在有两种定义响应式数据的方式到底该用哪个呢，

① 优先使用ref函数因为ref 函数可以处理简单数据类型也可以处理复杂数据类型，常用于简单数据类型定义响应式数据

ref特点：在代码中获取或修改值时，需要补上.value 但是 template模板中不需要

② reactive 常用与定义复杂数据类型作为响应式数据

reactive 特点在代码中获取或修改值是不需要加.value , 如果明确知道对象中有什么属性就用reactive

2.6、 computed计算属性

import { computed } from 'vue'
 
const 计算属性名 = computed(() => {
  return 响应式数据相关计算
})

高级用法：

2.7、父子通信

在setup函数中有两个参数第一个参数为props，第二个参数为context

props为一个对象，props接收后，内部包含了所有传递过来的prop数据，context包含了attrs，slots，emit属性，其中emit方法可以完成子传父

父级：

子级:

vue3.0 和vue3.2的使用