[JavaScript知识库]Vue3api组件(1)

vue3的 优点

最火框架 \ 性能提升 \ 体积更小 \ 类型推断 \ 高级给予 \ 组合API: 能够以更好的组织逻辑, 封装逻辑, 复用逻辑

项目出口文件

vue2

导入app组件,导入构造函数,使用Vue舒适化vue实例,使用render使用App组件,挂载#app容器下
基于Vue构造函数可以扩展vue功能

vue3

导入App组件,按需从vue导入createApp的函数,使用这个函数创建实例,挂载到#app容器中
基于创建好的App实例扩展功能

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Vue3生命周期钩子函数

setup				// 创建钩子前
onBeforeMount		// 渲染DOM前
onMounted			// 渲染DOM后
onBeforeUpdate		// 更新组件前
onUpdated			// 更新组件后
onBeforeUnment      // 卸载销毁前
onUnmented			// 卸载销毁后

组合Api

setup函数

setup是一个新的组件选项, 作为组件中使用组合API的起点
setup 比beforeCreate更早执行, 不能直接使用this

 // 如果模板中需要使用的数据和函数 需要在setup中返回
setup(){
	return {
	msg: 'hi vue3'
	}
}

reactive函数

reactive是一个函数, 它可以定义一个复杂数据类型, 成为响应式数据

// 声明响应式数据: reactive 类型: 数组 \ 对象 , 可以使用reactive来声明
const obj = reactive({
    name:'小V',
    age: '3'
})

toref函数

模板中只是用响应式对象中的name数据,没有必要返回一对象给模板
通过解构赋值得到响应式对象中的某项数据,他就不在是响应式数据
通过toRef函数可以将, 响应式对象中的某一项数据,转换为响应式数据

const 变量名 = toRef()

解构响应式对象后, 每个数据会丢失响应式
使用展开运算符展开对象后, 对象的每一个属性也不是响应式
toref是把对象中国一个属性数据,改成响应式数据
torefs是把整个对象所有的属性数据, 通通改成响应式数据