Vue3对比Vue2优点
Vue3浅谈部分优点Vue3六大亮点性能比Vue2 快 1.2~2倍按需编译,体积比vue2更小组合API:组合API(类似React Hooks)更好的Ts支持Custom Render API: 暴露了自定义渲染API更先进的组件Vue3是如何变快的?diff方法优化:vue2中的虚拟dom是进行全量的对比vue3新增了静态标记vue3 Dom生成:https://vue-next-templ
·
Vue3浅谈部分优点
Vue3六大亮点
- 性能比Vue2 快 1.2~2倍
- 按需编译,体积比vue2更小
- 组合API:组合API(类似React Hooks)
- 更好的Ts支持
- Custom Render API: 暴露了自定义渲染API
- 更先进的组件
Vue3是如何变快的?
-
diff方法优化:
vue2中的虚拟dom是进行全量的对比
vue3新增了静态标记
vue3 Dom生成:https://vue-next-template-explorer.netlify.app/
<div> <p>xyp9x</p> <p>{{ msg }}</p> </div> //export function render(_ctx, _cache, $props, $setup, $data, $options) { //return (_openBlock(), _createBlock("div", null, [ //_createVNode("p", null, "xyp9x"), //_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */) //])) //}
num flags 1 动态文本节点 2 动态class 4 动态style 8 动态属性,不含类名和样式 16 具有动态key属性 32 监听事件 等一直到512
-
静态提升hoistStatic
Vue2中无论元素是否参与更新,每次都会重新创建,然后再渲染
Vue3中对于不参与更新的元素,会做出静态提升,只会被创建一次,在渲染时直接复用即可
<div> <p>xyp9x</p> <p>xyp9x</p> <p>xyp9x</p> </div> //const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "xyp9x", -1 /* HOISTED */) // const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "xyp9x", -1 /* HOISTED */) // const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "xyp9x", -1 /* HOISTED */) // export function render(_ctx, _cache, $props, $setup, $data, $options) { // return (_openBlock(), _createBlock("div", null, [ // _hoisted_1, // _hoisted_2, // _hoisted_3 // ])) // }
-
事件监听缓存cacheHandlers
同一个函数没必要追踪变化,所以直接缓存起来复用即可
<div> <p @click="click">按钮</p> </div> //之前 当作属性监听 export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", null, [ _createVNode("p", { onClick: _ctx.click }, "按钮", 8 /* PROPS */, ["onClick"]) ])) } //之后 export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", null, [ _createVNode("p", { onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.click && _ctx.click(...args))) }, "按钮") ])) }
Vue3 结构化组合API的优点
Vue2结构:
export default {
data() {
return {
// 功能数据一,
// 功能数据二
}
},
methods: {
// 功能一对应业务逻辑,
// 功能二对应业务逻辑
},
computed:{
// 功能一对应计算,
// 功能二对应计算
}
}
Vue3结构:
import { reactive } from 'vue'
function model1(){
let state1 = reactive({})//功能数据一
// 功能一对应业务逻辑
function useState1(){}
return { state1,userState1 }
}
function model2(state1){
let state1 = reactive({})//功能数据二
// 功能二对应业务逻辑
function useState2(){
console.log(state1);
}
return { state2,userState2 }
}
export default{
name: 'vue3',
setup(props) {
const { state1,useState1 } = model1()
const { state2,useState2 } = model2(state1)
return {
state1,
userState1,
state2,
useState2
}
}
}
所以vue2的数据和业务不是在一个结构下,而vue3以业务为模块,结构更加明显。
更多推荐
已为社区贡献1条内容
所有评论(0)