Vue3.0的特点 

1. 编译性能比vue2更快。

2. 按需编译，体积比vue2更小。

3. 支持组合API.

4. 更好的TS支持 等等..

组合API

1.setup

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

2.ref

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

 

Vue3.0生命周期函数

1.setup() 页面创建之前执行的函数。所以整个面用setup()函数来初始化参数

2. onBeforeMount：页面渲染之前执行；onMounted： 页面渲染时；

3. onBeforeUpdate：页面更新之前；onUpdated：页面更新之后；

4. onBeforeUnmount：页面销毁之前；onUnmounted：页面销毁之后；

Vue3.0中的v-for渲染
 

1.在页面渲染一个数组

html中

<ul id="v-for-object" class="demo">
  <li v-for="(v,i) in friutCart" :key='i'>
    {{ v.name}}
  </li>
</ul>

js里 

let friutCart = reactive([

      { id: 1, name: "香蕉", price: 30 },

       { id: 2, name: "苹果", price: 40 },

    ]);

 Vue3.0 friuCart这个数组 需要在return 返回

Vue3.0和Vue3.2的区别

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

Vue3.0中的setup 是要在 export default 中使用 setup 属性

Vue3.2在性能的改进在界面渲染的速度上更快依赖也大大减少了以及内存的使用量

Vue3.2 新特性setup的使用

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

<template>
  <div class="box">hello linge</div>
</template>

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind(color);
}
</style>

   

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

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

1）从vue引入reactive

2）使用reactive()方法来声名我们的数据为反应性数据

3）使用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> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。
<style> v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style>起初 vue3.0 暴露变量必须 return 出来，template中才能使用

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

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
  setup (props) {
  	console.log(props)
  	return {
  	  ok: Math.random(),
  	  Foo,
  	  Bar
  	}
  }
}
</script>

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

 

<template> 
	<button @click="color = color === 'red' ? 'green' : 'red'"> Color is: {{ color }} </button>
</template>

<script setup>
import { ref } from 'vue'
export const color = ref('red')
</script>

<style scoped>
	button { color: v-bind(color);}
</style>

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，并且还解锁了组件内部的一些高级用例。
 

 

更多推荐

Vue3.0和Vue3.2的区别和使用