Vue.js 3应用开发与核心源码解析
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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的相关使用。

上一章目录下一章