网赌棋牌百人牛牛

書名： Vue.js 3應用開發與核心源碼解析
作者名：呂鳴
本章字數： 770字
更新時間： 2023-08-31 19:30:30

1.4.2　新特性初體驗

1．組合式API

在Vue 2.x中，組件的主要邏輯是通過一些配置項來編寫，包括一些內置的生命周期方法或者組件方法，例如下面的代碼：

     export default {
       name: 'test',
       components: {},
       props: {},
       data () {
         return {}
       },
       created(){},
       mounted () {},
       watch:{},
       methods: {}
     }

上面的代碼中，這些基于配置的組件寫法稱為Options API（配置式API），Vue 3的一大核心新特性是引入了Composition API（組合式API），這使得組件的大部分內容都可以通過setup()方法進行配置。將上述代碼改造成組合式API，代碼如下：

     import {onMounted,reactive,watch} from 'vue'
     export default {
         props: {
           name: String,
         },
         name: 'test',
         components: {},
         setup(props,ctx) {
           console.log(props.name)
           console.log('created')
           const data = reactive({
             a: 1
           })
           watch(
             () => data.a,
             (val, oldVal) => {
               console.log(val)
             }
           )
           onMounted(()=>{
     
           })
           const myMethod = (obj) =>{
     
           }
     
           retrun {
               data,
               myMethod
           }
         }
     }

上面的代碼采用了ES 6的語法，并且使用了Vue 3的Composition API中的setup方法，可能讀者有些看不懂，沒關系，我們會在后續章節中具體講解。

2．內置組件Teleport、Suspense和Fragments片段

<teleport>和<suspense>都是Vue 3里面新增的內置組件，這里把內置組件稱作可以直接寫在<template>里面，而不需要格外引入的組件，例如<keep-alive>就是一個內置組件。而Fragments是一種新的特性，讓開發者可以不用在<template>中強制包裹一個根元素，關于<teleport>和<suspense>的內容會在第3章深入講解。

3．服務端渲染

在服務端渲染方面，Vue 3優化了返回HTML字符串的邏輯。在Vue 2.x中，所有的節點（包括一些靜態節點）在服務端返回時都會轉換為虛擬DOM，再轉換成HTML字符串返回給瀏覽器；Vue 3則將靜態節點剝離成字符串，這部分內容不會轉換成虛擬DOM，而是直接拼接返回，在效率上進行了提升。

Vue 2.x的服務端渲染代碼如下：

     <div>
       <div>abc</div>
       <div>abc</div>
       <div>abc</div>
       <div>{{msg}}</div>
     </div>
     
     // 編譯后
     function anonymous() {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
       return _c('div', [_vm._ssrNode(
         "<div>abc</div> <div>abc</div> <div>abc</div> <div>" + _vm._ssrEscape(
           _vm._s(_vm.msg)) + "</div>")])
     }

Vue 3的服務端渲染代碼如下：

     <div>
       <div>abc</div>
       <div>abc</div>
       <div>abc</div>
       <div>{{msg}}</div>
     </div>
     
     // 編譯后
     export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data,
$options) {
       const _cssVars = { style: { color: _ctx.color }}
       _push(`<div${
         _ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
       }><div>abc</div><div>abc</div><div>abc</div><div>${
         _ssrInterpolate(_ctx.msg)
       }</div></div>`)
     }

4．Vite

伴隨著Vue 3，Vue團隊也推出了自己的開發構建工具Vite，可以在一定程度上取代Vue Cli和webpack-dev-server的功能。基于此，Vite主要有以下特性：

·　快速的冷啟動。

·　即時的模塊熱更新。

·　真正的按需編譯。

Vite在開發環境下基于瀏覽器原生ES 6 Modules開發，在生產環境下基于Rollup打包，我們會在后續章節深入講解Vite的相關使用。

官术网_书友最值得收藏!

Vue.js 3應用開發與核心源碼解析

1.4.2 新特性初體驗

1．組合式API

2．內置組件Teleport、Suspense和Fragments片段

3．服務端渲染

4．Vite

1.4.2　新特性初體驗