Vue3对比Vue2优点

Vue3浅谈部分优点

Vue3六大亮点

• 性能比Vue2 快 1.2～2倍
• 按需编译，体积比vue2更小
• 组合API：组合API（类似React Hooks）
• 更好的Ts支持
• Custom Render API: 暴露了自定义渲染API
• 更先进的组件

Vue3是如何变快的？

1. 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

2. 静态提升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
   	// ]))
   	// }
   

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以业务为模块，结构更加明显。