vue3新增

一、main.js

vue2引入的是Vue构造函数，然后通过new创建vue实例对象
vue3引入的是createApp工厂函数，创建实例对象
vue2通过$mount挂载实例对象，vue3通过mount挂载实例对象

二、组件template

vue2要求必须只能有一个div，vue3可以有多个div

三、setup

1. 为什么？

当组件变的很大的时候，我们要关注的东西很多，这样维护困难，所以使用setup，每一个setup只关注某一个逻辑点

2.执行时机和参数

props解析完成之后，组件创建(bdforeCreate)之前，执行setup
setup中不能使用this，组件实例还未创建
ref(基本数据类型响应化)和reactive(引用数据类型相应化)

vue3底层，把对象都变成了Proxy实例对象，对于基本数据类型就是按照Object.defineProperty里面的get和set进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的Proxy，但是vue3把它封装在新函数reactive里，就相当于，ref中是对象，自动会调用reactive。

接收2个参数
- 1. props:不能使用 ES6 解构，它会消除 prop 的响应性,应使用toRef代替

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

1. context

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子，这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

setup中调用生命周期钩子

两个新的钩子函数：
onRenderTracked：检查哪个 Reactive 对象属性或一个 ref 作为依赖被追踪。当 Render 函数被调用时，会检查哪个响应式数据被收集依赖。
onRenderTriggered：当执行 Update 操作时，会检查哪个响应式数据导致组件重新渲染。
setup中组件自动注册，无需手动注册

3. 父子组件传值

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

//父组件





//子组件

4.子defineExpose暴露数据+父ref获取子暴露的数据

setup 相当于是一个闭包，数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

父组件

5. 使用路由信息useRoute()和useRouter()

6. 使用vuex:useStore(key)

7.CSS变量注入

三、Vue3响应式原理

1. Vue2响应式原理：

通过Object.defineProperty的get，set来进行数据劫持，修改，从而响应式,但是它有什么缺点呢

由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当新增、删除属性时，捕获不到，导致界面也不会更新。
直接通过下标修改数组，界面也不会自动更新。

2. vue3中的响应式，我们用到的Proxy和Reflect

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

const p=new Proxy(data, {
// 读取属性时调用
    get (target, propName) {
        return Reflect.get(target, propName)
    },
//修改属性或添加属性时调用
    set (target, propName, value) {
        return Reflect.set(target, propName, value)
    },
//删除属性时调用
    deleteProperty (target, propName) {
        return Reflect.deleteProperty(target, propName)
    }
})

参考