初识Vue3—与Vue2的不同
Vue3与Vue2的区别Vue3向下兼容一.从options API到Composition APIvue3具有的composition API实现逻辑模块化和重用vue3中使用setup函数(比beforeCreated更早执行)接收两个参数 props(响应式不能用ES6结构)和context(普通JavaScript对象)生命周期改变setup语法糖1.组件自动注册<template&
Vue3与Vue2的区别
Vue3向下兼容
一.从options API
到Composition API
vue3具有的composition API实现逻辑模块化和重用
vue3中使用setup函数(比beforeCreated更早执行)
接收两个参数 props(响应式不能用ES6结构)和context(普通JavaScript对象)
生命周期改变
setup语法糖
1.组件自动注册
<template>
<Child />
</template>
<script setup>
import Child from './Child.vue'
</script>
2.组件核心API的使用
使用props
通过defineProps指定当前 props 类型,获得上下文的props对象
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
title: String,
})
</script>
使用emits
使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['change', 'delete'])
</script>
获取 slots 和 attrs
可以通过useContext
从上下文中获取 slots 和 attrs。不过提案在正式通过后,废除了这个语法,被拆分成了useAttrs
和useSlots
<script setup>
import { useContext } from 'vue'
const { slots, attrs } = useContext()
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
</script>
3.defineExpose API
传统的写法,我们可以在父组件中,通过 ref 实例的方式去访问子组件的内容,但在 script setup 中,该方法就不能用了,setup 相当于是一个闭包,除了内部的 template
模板,谁都不能访问内部的数据和方法。
如果需要对外暴露 setup 中的数据和方法,需要使用 defineExpose AP
<script setup>
import { defineExpose } from 'vue'
const a = 1
const b = 2
defineExpose({
a
})
</script>
4.属性和方法无需返回,直接使用
在以往的写法中,定义数据和方法,都需要在结尾 return 出去,才能在模板中使用。在 script setup 中,定义的属性和方法无需返回,可以直接使用
<template>
<div>
<p>My name is {{name}}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const name = ref('Sam')
</script>
二.Diff算法优化
Vue2使用了双端比较算法
,Vue3使用了去头尾的最长递增子序列算法
Vue2中的虚拟DOM是进行全量的对比,Vue3的diff算法是在创建虚拟DOM的时候会根据DOM中的内容是否会发生变化,添加静态标记(静态标记值不同会有不同比较方法)
静态提升
Vue2中无论元素是否参加更新每次都会重新创建,然后渲染
Vue3中对于不参加更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可
cacheHandlers事件监听器缓存
默认情况下onClick会被设为动态绑定,所以每次都会区跟踪他的变化,但是因为是同一个函数,所有没有追踪变化,直接缓存起来复用即可
三.响应式数据的处理
Vue2中使用订阅发布模式结合Object.defineProperty
实现响应式数据
Vue3中使用proxy
和Reflect
实现
解决了vue2中很多局限性:1、对属性的添加删除动作的检测 2、对数组基于下标的修改,对于length修改的检测 2、对接Map Set等的支持
a.Proxy
Proxy 是一个对象,它包装了另一个对象,并允许你拦截对该对象的任何交互。使用 Proxy 的一个难点是 this
绑定。我们希望任何方法都绑定到这个 Proxy,而不是目标对象,这样我们也可以拦截它们。使用ES6中的Reflect
新特性可以实现
let obj = {name:'lnj',age:18}
let state = new Proxy(obj,handler:{
get(target, property, receiver) {
return target[property]
}
set(target,property){
}
})
b.Reflect
反射机制:反射机制指的是程序在运行时能够获取自身的信息
Reflect是一个内建的对象,用来提供方法去拦截JavaScript操作,他不是一个函数对象,不可构造。(与porxy handlers的方法相同)
let obj = {name:'lnj',age:18}
let state = new Proxy(obj,handler:{
get(target, property, receiver) {
return Reflect.get(target, property, receiver)
}
set(target,property,value,receiver){
return Reflect.set(target, property,value,receiver)
}
})
新增了 ref
、reactive
、toRefs
等api实现响应式
四.更小更快
删除了一些无用的api,打包渲染运行速度更快
更多推荐
所有评论(0)