vue3总结知识点
认识vue3🌞
Vue是一套用于构建用户界面的渐进式框架。
Vue3也支持Vue2的大多数特性
更好的支持了TypeScript
性能得到了更大的提升:使用proxy代替了defineProperty实现数据响应式
增加了很多的新特性:Composition API(组合式API),新组件(Fragment/Teleport/Suspense)等等.
作者也是海贼王的海粉,有兴趣的可以讨论讨论
Composition API📖
setup🐎
新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次(beforeCreate之前执行)
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
注意:
this是undefined, 不能通过this来访问data/computed/methods / props
methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods\
- setup的参数
-
setup(props, context) / setup(props, {attrs, slots, emit})
-
props: 包含props配置声明且传入了的所有属性的对象
-
context:data内容
-
attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
-
slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
-
emit: 用来分发自定义事件的函数, 相当于 this.$emit
-
编写方式
<template>
<div class="hello">
<h1>{
{ name }}</h1>
</div>
</template>
<script>
export default {
name: "hello",
setup(msg) {
console.log(msg);
return {
name:"cloud" };
},
};
</script>
<style scoped>
</style>
执行时机
setup 会在 beforeCreate 之前执行。
setup 包含的生命周期
需要导入相应的生命周期
这些生命周期都在依赖中注意写花括号 { } es6语法
- onBeforeMount——挂载开始前调用
- onMounted——挂载后调用
- onBeforeUpdate——当响应数据改变,且重新渲染前调用
- onUpdated——重新渲染后调用
- onBeforeUnmount——Vue实例销毁前调用
- onUnmounted——实例销毁后调用
- onActivated——当keep-alive组件被激活时调用
- onDeactivated——当keep-alive组件取消激活时调用
- onErrorCaptured——从子组件中捕获错误时调用
import {
onMounted } from 'vue'
export default {
name: "hello",
setup(msg) {
onMounted(()=>{
console.log("onMounted");
})
console.log(msg);
return {
name:"cloud" };
},
beforeCreate(){
console.log("beforeCreate");
}
};
ref获取页面数据👈
(1)作用: 定义一个数据的响应式
(2)语法: const xxx = ref(initValue):
(3)创建一个包含响应式数据的引用(reference)对象;
js中操作数据: xxx.value;
模板中操作数据: 不需要.value;
(4)一般用来定义一个基本类型的响应式数据
别忘了引入ref
import {
ref,onMounted } from 'vue'
//创建定时器增加count值
let count = ref(1);
setInterval(()=>{
count.value++
},1000)
return {
name:"cloud",count:count };
reactive
1、作用: 定义多个数据的响应式
2、语法:const proxy = reactive(obj):
接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
<template>
<h2>name: {
{state.name}}</h2>
<h2>age: {
{state.age}}</h2>
<h2>wife: {
{state.wife}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
import {
reactive,
} from 'vue'</