Vue3比Vue2有什么优势/区别

优势

性能更好
体积更小
更好的ts支持
更好的代码组织
更好的逻辑抽离
更多新功能

Vue3生命周期

Options API 生命周期
Composition API 生命周期

Options API 生命周期

beforeDestroy 改为 beforeUnmount
destroyed 改为 unmount
其他沿用Vue2的生命周期

Composition API 生命周期

setup //相当于beforeCreate 和 created
onBeforeMount // beforeMount
onMount // mount
onBeforeUpdate // beforeUpdate
onUpdate // update
onBeforeUnmount // beforeUnmount
onUnmount // unmount

Composition API 带来了什么

更好的代码组织
更好的逻辑复用
更好的类型推到

如何理解ref toRef 和 toRefs

Ref: 生成值类型的响应式数据; 可用于模板和reactive; 通过.value修改值; 获取dom元素

import { ref } from 'vue'
export default {setup(){// 如果是用ref声明，建议在后面加上Ref后缀, 后面修改的时候不会显得很怪异const ageRef = ref(20) ageRef.value = 21}
}

toRef 和 toRefs: 针对一个响应式对象(reactive封装）的prop; 创建一个ref,具有响应式; 两者保持引用关系

import { ref, reactive, toRefs } from 'vue'
export default {setup(){const state = reactive({age: 20,name: 'yoy'})// const { age,name } = state  直接解构会丢失响应式const ageRef = toRef(state,'age')const stateAsRefs = toRefs(state)    const { age: ageRef, name: nameRef } = stateAsRefs // 每一个属性，都是refreturn stateAsRefs }
}

ref toRef和toRefs 的最佳使用方式

 // 合成函数返回响应式对象import { reactive, toRefs } from 'vue'function useFeatureX() {const state = reactive({x:1,y:2  })return toRefs(state)}export default {setup(){// 可以在不失去响应式的情况下进行解构const {x,y} = useFeatureX()return { x, y }}}

用reactive做对象的响应式,用ref做值类型的响应式
setup中返回toRefs(state), 或者toRef(state,‘xx’)
合成函数返回响应式对象时,使用toRefs

为什么需要用ref

返回值类型,会丢失响应式
如在setup, computed, 合成函数，都有可能返回值类型
Vue 不定义ref, 用户将自造ref, 造成混乱

为什么需要.value

ref是一个对象（不丢失响应式）, value存储值
通过.value属性的get 和 set 实现响应式
用于模板，reactive时，不需要.value，其他情况都需要

// 错误
function computed(getter) {let value = 0 setTimeout(()=>{value = getter()})return value
}
// 正确
function computed1(getter) {const ref = {value: null}setTimeout(()=>{ref.value = getter()})return ref
}
// 测试let test = computed(()=> 100) // 0
let test1 = computed(()=> 100) // {value: 100}

为何需要 toRef 和 toRefs

初衷：不丢失响应式的情况下，把对象数据 分解/扩散
前提: 针对的是响应式对象（reactive封装的）非普通对象
注意：不创建 响应式，而是 延续 响应式

Composition API 实现逻辑复用

抽离逻辑代码到一个函数
函数命令约定为useXxxx格式（React Hooks 也是）


// demo 获取鼠标移动位置
import { ref, onMounted, onUnMounted } from 'vue'function useMousePosition(){const x = ref(0)const y = ref(0)function update (e) {x.value = e.pageXy.value = e.pageY}onMounted(()=>{window.addEventListener('mousemove', update )})onMounted(()=>{window.removeEventListener('mousemove', update )})return {x,y}
}
// test
export default {setup(){const {x, y} = useMousePosition()return {x,y}}
}

vue3 和 vue2 响应式对比

vue2使用Object.defineProperty, vue3 使用Proxy

Object.defineProperty的缺点: 深度监听需要一次性递归; 无法监听新增属性/删除属性（Vue.set Vue.delete）; 无法监听原生数组,需要重写覆盖数组方法
Proxy的缺点: Proxy无法兼容所有浏览器,无法polyfill


// Object.definePropertyconst updateView = () => {console.log('视图更新了')
}// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象,原型指向oldArrayProperty,在拓展新方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push','pop','shift','unshift','splice'].forEach(methodName => {arrProto[methodName] = function () {updateView()oldArrayProperty[methodName].call(this, ...arguments)   }
})function observer(target) {if (typeof target !== 'object' || target == null ) {// 不是对象或者数组,则直接返回return target}  // 如果是数组则需要修改监听的对象数组的原型,避免全局污染if (Array.isArray(target)) {target.__proto__ = arrProto}for (let key in target) {defineReactive(target, key, target[key])}
}function defineReactive(target, key, value){// 深度监听observer(value)Object.defineProperty(target, key, {get(){return value},set(newValue){if (newValue !== value) {// 深度监听observer(newValue)value = newValue // 更新视图updateView()}}})
}// testconst data = { name: 'zhangsan', age: 20, info:{ adddres: 'guangzhou'},nums: [10,20,30]}observer(data)data.name = 'list'
data.x  = '100' // 新增属性, 监听不到 -- 所以有Vue.set
delete data.name // 删除属性，监听不到 -- 所以有Vue.delete
data.nums.push(40)

// Proxyfunction reactive(target = {}){if (typeof target !== 'object' || target == null ) {// 不是对象或者数组,则直接返回return target}// 代理配置const proxyConfig = {get(target, key, receiver){// 只处理本身 （非原型的）属性const ownKeys = Reflect.ownKeys(target)const result = Reflect.get(target, key, receiver)// 深度监听// 性能如何提升的? -> 这里是在get的时候在进行(递归)深度代理，// 而Object.definePropert则需要一次性递归监听return reactive(result)},set(target,key, val, receiver){// 重复的数据，不处理if (val === target[key]) {return true}const result = Reflect.set(target, key, val, receiver)return result},deleteProperty(target,key){const result = Reflect.deleteProperty(target, key)return result}}const observe = new Proxy(target, proxyConfig)return observe
}

vue3 为何要比 vue2快

Proxy响应式
PatchFlag
hoistStatic
cacheHandler
SSR优化
tree-shaking

PatchFlag: 编译模板时,动态节点做标记; 标记，分为不同类型,如 TEXT,PROPS; diff算法时，可以区分静态节点，以及不同类型的动态节点

如果是纯静态的则不需要比较，是不会变化的，在输入的时候会新增PatchFlag参数,对比的时候在根据PatchFlag参数进行对比
hoistStatic: 将静态节点的定义，提升到父作用域,缓存起来; 多个相邻的静态节点, 会被合并起来; 典型的拿空间换时间的优化策略

在输入的时候加了-1的标识，标记该节点已经被缓存起来，多个相邻的静态节点, 会被合并起来

cacheHandler: 缓存事件

先去缓存中找cache[0],没有则定义一个函数
SSR: 静态节点直接输出，绕过了vdom; 动态节点,还是需要动态渲染
tree shaking: 编译时, 根据不同的情况，引入不同的API

加入插值表达式，import的参数增多了

Vue3比Vue2有什么优势/区别相关推荐

在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别
目录前言正文一.Vue3 与 Vue2 区别概览二.Vue3 与 Vue2 区别详述生命周期多根节点 Composition API 异步组件(Suspense) Teleport 响应式 ...
vue - vue3与vue2.x的区别(一) ：目录结构不一致
今天总结一下vue3与vue2.x的区别 -- 目录结构不一致.由于目录结构的不一致相对的也造成了一些问题的存在,比如打包项目之后打开出现白屏现象. 一.目录结构不一致通过上图可以发现 vu ...
Vue3和Vue2的区别
目录前言概览一.新特性二.差异详情一.vue3新特性 1.组合式API---setup 2.ref创建响应式数据 3.Teleport---"传送门" 4.多根节点 5 ...
vue3相比vue2效率提升在哪些方面？
vue3相比vue2效率提升在哪些方面? 静态提升预字符串化缓存事件处理函数 Block Tree PatchFlag 静态提升相比vue2,vue3对以下静态节点进行提升: 元素节点没有绑定 ...
Windows 切换node版本开发Vue3和Vue2
Windows 切换node版本开发Vue3和Vue2 第一步:先清空本地安装的node.js版本第二步:安装nvm管理工具(先关掉360等软件,不然会弹出警告!) 1.从官网下载安装包 https ...
一个 Java 猿眼中 Vue3 和 Vue2 的差异
随着 TienChin 项目视频的录制,松哥终于也要静下心来,认真捋一捋 Vue3 中的各种新特性了,然后再和小伙伴们进行分享,其实 Vue3 中还是带来了很多新鲜的玩意,今天我们就不卷 Java 了 ...
VUE3对比VUE2的优势及新特性原理
1.Vue3.0新特性性能比Vue2.x快1.2~2倍原因1: diff方法优化: vue2中的虚拟dom是全量的对比(每个节点不论写死的还是动态的都会比较) vue3新增了静态标记(patchf ...
vue3和vue2的区别并且如何升级（对于vue2有基础的）
目录一.vue3值得注意的新特性 1.1.Teleport 1.2.Vue 3 现在正式支持了多根节点的组件 1.3.自定义事件 emits 1.4.v-model 1.4.1. v-model参数 ...
Vue3与Vue2的区别（组合式API）
目录 1.响应式数据 2.vue2和vue3的响应式原理 3.计算属性Computed 4.监听函数Watch vue3中watch函数对ref的响应式数据的监听 vue3中watch函数对react ...

Vue3比Vue2有什么优势/区别

优势

Vue3生命周期

Options API 生命周期

Composition API 生命周期

Composition API 带来了什么

如何理解ref toRef 和 toRefs

ref toRef和toRefs 的最佳使用方式

为什么需要用ref

为什么需要.value

为何需要 toRef 和 toRefs

Composition API 实现逻辑复用

vue3 和 vue2 响应式对比

vue3 为何要比 vue2快

Vue3比Vue2有什么优势/区别相关推荐

最新文章

热门文章