vue2与vue3的 区别和改动

1. vue3的优点

1.性能比Vue2.x快1.2~2倍
	原因1：
		diff方法优化：
		vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
		vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息		得知当前节点要对比的具体内容
	原因2：静态提升
		vue2无论元素是否参与更新，每次都会重新创建然后再渲染
		vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
	原因3：时间侦听器缓存
		默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
		但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可
	原因4：ssr渲染
2.按需编译，体积比vue2.x更小
3.组合API（类似react hooks）
4.更好的Ts支持
5.暴露了自定义渲染API
6.更先进的组件
7.Fragment:模板可以有多个根元素

简单理解为:

1.性能提升(首次渲染更快，diff算法更快，内存占用更少，打包体积更小，....)
2.更好的TS支持
3.提供新的写代码的方式：Composition API(选项式API)

2. vue3 移除的一些vue2的特性

1. 移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代）
2. 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代）
3. 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）

后续的再总结添加

3. 搭建vue3

1. 使用脚手架创建

npm create projectName

2. Vite 使用链接

通过简单的观察可以发现

1. Vue3中，可以在template中写多个根元素
2. 创建Vue3项目的一句核心代码是:createApp(根组件).mount('public/index.html中的div容器')

4. composition vs options

options API 优点： 容易理解， 好上手缺点：代码横跳
composition API 优点：高内聚， 易维护 ，可以进行逻辑拆分缺点：学习成本高

5. 组合API-setup函数

5.1 作用

setup 是一个新的组件选项，作为组件中使用组合API的起点。

5.2 特点

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
2. setup 中不能使用 this， this 指向 undefined
3. setup函数只会在组件初始化的时候执行一次
4. setup函数在beforeCreate生命周期钩子执行之前执行

5.3 执行时机

从组件生命周期来看，它的执行在组件实例创建之前执行（在beforeCreate前）

5.3 参数

// 第1个参数为props。props为一个对象，内部包含了父组件传递过来的所有prop数据
// 第2个参数为一个对象context。context对象包含了attrs，slots， emit属性，
setup(props, context) {
}

5.4 返回值

这个函数中的返回值是一个对象,在模板中需要使用的数据和函数,在这个对象中声明

在data中定义的变量和这里声明的函数重名 以setup中的变量为准

6. 组合API-生命周期

vue2 的生命周期函数

vue3 的生命周期函数

<template>
  子组件
  {{stu}}
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from '@vue/runtime-core'
export default {
  props: {
    list: {
      type: String,
      default: '1'
    }
  },
  setup (props) {
    const stu = ref(props.list)
    onBeforeMount(() => {
      console.log('DOM渲染前onBeforeMount', document.querySelector('.container'))
    })
    onMounted(() => {
      console.log('DOM渲染后1onMounted', document.querySelector('.container'))
    })
    onMounted(() => {
      console.log('DOM渲染后2onMounted', document.querySelector('.container'))
    })
    onBeforeUpdate(() => {
      console.log('更新组件前,onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('更新组件后,onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('销毁组件前,onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('销毁组件后,onUnmounted')
    })
    return { stu }
  },
}
</script>

<style>
</style>

7 ref函数

在setup 中的函数不是响应的

1. ref函数的作用

定义响应式数据

2. 步骤

1. 导入 import {ref} from 'vue'
2. 调用 const name = ref('小明')
3. 返回 return { name }

3. 注意

在setup中使用ref的结果, 需要通过.value调用, 在模板中不需要

8. ref属性

1. 作用

获取ref属性绑定的元素

2. 步骤

1. 导入import { ref } from 'vue'
2. 调用cosnt dom = ref(null)
3. 导出return { dom }
4. 使用<div ref='dom'>文本</div>

9. reactive函数

ref 函数定义的数据要写 .value 用起来不方便

1. 作用

将复杂类型的数据定义为 响应式数据

2. 步骤

1. 导入import { reactive } from 'vue'
2. 调用const sut = reactive({ id: 1, name: '小明'})
3. 导出return { sut }

10. toRefs函数

定义的复杂类型数据的属性过多 使用起来不方便

1. 作用

定义响应式中的所有属性为响应数据, 通常用来结构 | 展开reactive中定义的对象

2. 使用

const { id, name} = toRefs(stu)