一、main.js
vue2
vue3
- 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个参数
- props:不能使用 ES6 解构，它会消除 prop 的响应性,应使用toRef代替
import { toRef } from 'vue'
setup(props) {
const title = toRef(props, 'title')
console.log(title.value)
}
- 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 用来声明触发的事件。
//父组件
<template>
<my-son foo="🚀🚀🚀🚀🚀🚀" @childClick="childClick" />
</template>
<script lang="ts" setup>
import MySon from "./MySon.vue";
let childClick = (e: any):void => {
console.log('from son：',e); //🚀🚀🚀🚀🚀🚀
};
</script>
//子组件
<template>
<span @click="sonToFather">信息:{{ props.foo }}</span>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps} from "vue";
const emit = defineEmits(["childClick"]); // 声明触发事件 childClick
const props = defineProps({ foo: String }); // 获取props
const sonToFather = () =>{
emit('childClick' , props.foo)
}
</script>
4.子defineExpose暴露数据+父ref获取子暴露的数据
- setup 相当于是一个闭包，数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
- 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。
子组件
<template>
<span>{{state.name}}</span>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
// defineExpose无需引入
// import { defineExpose, reactive, toRefs } from 'vue'
// 声明state
const state = reactive({
name: 'Jerry'
})
// 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
defineExpose({
// 解构state
...toRefs(state),
// 声明方法
changeName () {
state.name = 'Tom'
}
})
</script>
父组件
<template>
<child ref='childRef'/>
</template>
<script setup>
import { ref, nextTick } from 'vue'
// 引入子组件
import child from './child.vue'
// 子组件ref
const childRef = ref('childRef')
// nextTick
nextTick(() => {
// 获取子组件name
console.log(childRef.value.name)
// 执行子组件方法
childRef.value.changeName()
})
</script>
5. 使用路由信息useRoute()和useRouter()
<script setup>
import { useRoute, useRouter } from 'vue-router'
// 必须先声明调用
const route = useRoute()
const router = useRouter()
// 路由信息
console.log(route.query)
// 路由跳转
router.push('/newPage')
</script>
6. 使用vuex:useStore(key)
<script setup>
import { useStore } from 'vuex'
import { key } from '../store/index'
// 必须先声明调用
const store = useStore(key)
// 获取Vuex的state
store.state.xxx
// 触发mutations的方法
store.commit('fnName')
// 触发actions的方法
store.dispatch('fnName')
// 获取Getters
store.getters.xxx
</script>
7.CSS变量注入
<template>
<span>Jerry</span>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
color: 'red'
})
</script>
<style scoped>
span {
// 使用v-bind绑定state中的变量
color: v-bind('state.color');
}
</style>
三、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)
}
})
