卷不动也得继续学！紧跟vue3的步伐，再来get一波进阶新特性！-阿里云开发者社区

vue3进阶新特性

之前写了一篇文章谈论 vue3 的新特性，然鹅……周一最近又 get 到了几个比较进阶的新特性， 比如： vue2 用 watch ， vue3 为什么用 watchEffect 。还有 vue3 为什么比 vue2 快， vite 为什么启动会非常快，以及 vue3 对全局注册 API 做出的重大改变。

一起来了解一波 vue3 新特性📷

一、📗watch和watchEffect

1、watch和watchEffect的区别

我们在 vue2 时，经常用 watch 来监听数据。但现在的 vue3 已经改用 watchEffect 来进行数据监听了。这两者具体有以下区别：

两者都可以监听 data 属性变化；
watch 需要明确监听哪个属性；
而 watchEffect 会根据其中的属性，自动监听其变化。

2、举个例子

（1）wtach监听

我们用 watch 来监听数据。具体代码如下：

<template>
    <!-- <p>watch vs watchEffect</p> -->
    <p>{
  {numberRef}}</p>
    <p>{
  {name}} {
  {age}}</p>
</template>

<script>
import {
     reactive, ref, toRefs, watch, watchEffect } from 'vue'

export default {
    
    name: 'Watch',
    setup() {
    
        const numberRef = ref(100)
        const state = reactive({
    
            name: 'monday',
            age: 18
        })

        watch(numberRef, (newNumber, oldNumber) => {
    
            console.log('ref watch', newNumber, oldNumber)
        }
         , {
    
             immediate: true // 初始化之前就监听，可选
         }
        )

        setTimeout(() => {
    
            numberRef.value = 200
        }, 1500)

        watch(
            // 第一个参数，确定要监听哪个属性
            () => state.age,

            // 第二个参数，回调函数
            (newAge, oldAge) => {
    
                console.log('state watch', newAge, oldAge)
            },

            // 第三个参数，配置项
             {
    
                 immediate: true, // 初始化之前就监听，可选
                 // deep: true // 深度监听
             }
        )

        setTimeout(() => {
    
            state.age = 25
        }, 1500)
        setTimeout(() => {
    
            state.name = 'mondayLab'
        }, 3000)

        return {
    
            numberRef,
            ...toRefs(state)
        }
    }
}
</script>

此时浏览器的显示效果如下：

watch

综上，我们可以知道，当使用 watch 进行属性监听时，需要明确要监听哪一个属性，并且如果想要在初始化时就被监听，需要加上第三个可选参数 immediate:true 。这样看来，如果我们要监听多个属性时，那就要写很多个 watch ，属实有点麻烦。所以， vue3 就引进了 watchEffect 来解决这几个问题。

（2）watchEffect监听

我们用 watchEffect 来监听数据。具体代码如下：

<template>
    <!-- <p>watch vs watchEffect</p> -->
    <p>{
  {numberRef}}</p>
    <p>{
  {name}} {
  {age}}</p>
</template>

<script>
import {
     reactive, ref, toRefs, watch, watchEffect } from 'vue'

export default {
    
    name: 'Watch',
    setup() {
    
        const numberRef = ref(100)
        const state = reactive({
    
            name: 'monday',
            age: 18
        })

        watchEffect(() => {
    
            // 初始化时，一定会先执行一次（收集要监听的数据）
            console.log('numberRef', numberRef.value)
            console.log('state.age', state.age)
            console.log('state.name', state.name)
        })

        setTimeout(() => {
    
            numberRef.value = 2000
        }, 1000)

        setTimeout(() => {
    
            state.age = 25
        }, 1500)

        setTimeout(() => {
    
            state.name = 'mondayLab'
        }, 3000)

        return {
    
            numberRef,
            ...toRefs(state)
        }
    }
}
</script>

此时浏览器的显示效果如下：

watchEffect

从上图中可以看到， watchEffect 只要做一次监听，就可以同时监听到三个属性。同时，值得注意的是， watchEffect需要初始化，且初始化时一定会先执行一次，这个初始化的目的在于收集要监听的数据。所以，控制台打印的第一组数据就是初始化时的数据。

第一次收集到它要监听这三个属性后，在此之后呢，这三个属性也相应地拥有了响应式的功能。相对应的三个计时器再打印出三组数据出来，所以一共是四组数据。

二、📘setup如何获取组件实例

（1）为什么需要获取组件实例

刚听到这个概念时，我其实时有点懵的。为什么要用setup来获取组件的实例？其实说的就是一个this的指向问题。

在 vue2 中， Options API 可以使用 this 来获取组件的实例，但是到现在的 vue3 ，已经被摒弃掉了。在 setup 和其他 Composition API 中没有 this ，但是它提供了一个 getCurrentInstance 来获取当前的实例。

（2）举个例子

我们先用 Options API 来获取实例。具体代码如下：

<template>
    <p>get instance</p>
</template>

<script>
import {
     onMounted, getCurrentInstance } from 'vue'

export default {
    
    name: 'GetInstance',
    data() {
    
        return {
    
            x: 1,
            y: 2
        }
    },
    mounted() {
    
        console.log('this2', this)
        console.log('x', this.x, 'y', this.y)
    }
}
</script>

此时浏览器的显示效果如下：

optionAPI

正如我们所想的，用 options API ，具体的实例都可以如期的被调用出来。

下面我们用 Composition API 来看看，是否可以调用出来。具体代码如下：

<template>
    <p>get instance</p>
</template>

<script>
import {
     onMounted, getCurrentInstance } from 'vue'

export default {
    
    name: 'GetInstance',
    data() {
    
        return {
    
            x: 1,
            y: 2
        }
    },
    setup() {
    
        //无法获取this实例
        console.log('this1', this)

        const instance = getCurrentInstance()
        console.log('instance', instance)

        onMounted(() => {
    
            //无法获取this实例
            console.log('this in onMounted', this)
            //通过getCurrentInstance获取this实例
            console.log('x', instance.data.x)
        })
    }
}
</script>

此时浏览器的显示效果如下：

CompositionAPI

通过上图我们可以知道，如果用 Composition API 来获取组件实例，是没有办法获取的。需要通过 getCurrentInstance 方法来获取当前的组件实例。

三、📒 Vue3为何比Vue2快

有一次看面经的时候发现有一道题：Vue3为何比Vue2快。当时我也挺纳闷的，那个时候我的心里🤯： vue3 的出现不就是因为更好才出现嘛？不是更好难道还能更差？

事实证明……是我孤陋寡闻了。 Vue3 比 Vue2 快的原因主要体现在以下6个方面：

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

接下来就让我们一起来了解一下吧🙋

1、Proxy响应式

vue3 中实现响应式的 Proxy 会比 vue2 中的 Object.defineProperty 快。具体原因可翻看我的另外一篇文章，这里不再讲述。

2、PatchFlag

（1）什么是PatchFlag

在编译模板时，使用动态节点做标记；
标记，分为不同的类型，如TEXT 、 PROPS ；有的是直接获取 text ，有的则是修改 props ；
diff 算法比较时，可以区分静态节点，以及不同类型的动态节点。此处要注意的是， patchflag 并不是专门对 diff 算法做优化，而是在输入上做一些变更和做一些标记，从而达到对 diff 算法的优化。

（2）举个例子🌰

我们用一个在线网站来演示 patchflag ，在线网站网址为https://vue-next-template-explorer.netlify.app/，大家可以根据需要自行演示~

具体使用方式如下图所示：

在线网站演示

接下来我们来演示 patchflag ，此时右边的 options 不做选择。我们在左边的框输入下面代码：

<div id="app">
  <span>hello vue3</span>
  <span>{
  {msg}}</span>
  <span :class="name">monday</span>
  <span :id="name">monday</span>
  <span :id="name">{
  {mag}}</span>
  <span :id="name" :msg="msg">monday</span>
</div>

此时右边的框显示如下：

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", {
    id: "app" }, [
    _createVNode("span", null, "hello vue3"),
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
    _createVNode("span", {
    class: _ctx.name }, "monday", 2 /* CLASS */),
    _createVNode("span", {
    id: _ctx.name }, "monday", 8 /* PROPS */, ["id"]),
    _createVNode("span", {
    id: _ctx.name }, _toDisplayString(_ctx.mag), 9 /* TEXT, PROPS */, ["id"]),
    _createVNode("span", {
   
      id: _ctx.name,
      msg: _ctx.msg
    }, "monday", 8 /* PROPS */, ["id", "msg"])
  ]))
}

// Check the console for the AST

大家可以看到，除了第一个是静态节点以外，其他都是动态节点。此时模板编译后的结果，在最后边有对应的数字出现，这个数字就是标记。 vue3 通过给每个动态节点做数字标记，达到优化 diff 算法的效果。

3、hoistStatic

（1）什么是hoistStatic

将静态节点的定义，提升到父作用域上，并缓存起来；
多个相邻的静态节点，会被合并起来；
典型的拿空间换时间的优化策略。

（2）举个例子🌰

我们同样用在线网站来做一个演示。此时我们在左边框输入以下代码：

<div id="app">
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>{
  {msg}}</span>
</div>

此时右边的框显示如下：

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = {
    id: "app" }
const _hoisted_2 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _hoisted_4,
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

// Check the console for the AST

通过以上代码可以发现， vue3 在每一个静态节点的外部都定义了父节点。这样看好像更冗余了一点，原因在于现在节点还比较少。

下面我们来演示更多的节点，此时右边的 options 选择 hoistStatic 。我们在左边框输入以下代码：

<div id="app">
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>{
  {msg}}</span>
</div>

此时右边的框显示如下：

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = {
    id: "app" }
const _hoisted_2 = /*#__PURE__*/_createStaticVNode("<span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span><span>monday</span>", 10)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", _hoisted_1, [
    _hoisted_2,
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

// Check the console for the AST

此时可以看到， vue3 把所有的静态节点都包围成一个父节点了，就好像 vue3 跟它的甲方爸爸说，要不这样吧，我帮你做一个静态节点的集合，帮你把所有内容都定义到一起。

4、cacheHandler

（1）什么是cacheHandler

cacheHandler ，指缓存事件的意思。

（2）举个例子🌰

我们同样用在线网站来做一个演示，此时右边的 options 选择 cacheHandler 。我们在左边框输入以下代码：

<div id="app">
  <span @click="clickHandler">
    monday
  </span>
</div>

此时右边的框显示如下：

import {
    createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", {
    id: "app" }, [
    _createVNode("span", {
   
      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.clickHandler && _ctx.clickHandler(...args)))
    }, " monday ")
  ]))
}

// Check the console for the AST

观察代码 onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.clickHandler && _ctx.clickHandler(...args))) 可以发现， vue3 在处理点击事件时，会进行缓存。这行代码的意思就是，当有 _cache[1] 的值时就取 _cache[1] ，如果没有 _cache[1] 就再给 _cache[1] 定义一个函数。

5、SSR优化

（1）什么是SSR优化

静态节点会直接进行输出，绕过了 vdom ；
如果是动态节点，还是需要进行动态渲染。

（2）举个例子🌰

我们同样用在线网站来做一个演示，此时右边的 options 选择 SSR 。我们在左边框输入以下代码：

<div id="app">
  <span @click="clickHandler">
    monday
  </span>
</div>

此时右边的框显示如下：

import {
    mergeProps as _mergeProps } from "vue"
import {
    ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   
  const _cssVars = {
    style: {
    color: _ctx.color }}
  _push(`<div${
     
    _ssrRenderAttrs(_mergeProps({
      id: "app" }, _attrs, _cssVars))
  }><span>monday</span><span>monday</span><span>monday</span><span>${
     
    _ssrInterpolate(_ctx.msg)
  }</span></div>`)
}

// Check the console for the AST

通过以上代码可以发现，用 SSR 来进行模板编译时，静态节点会直接进行输出，直接绕过 vdom 。而如果是动态节点时，依然需要进行动态渲染。

6、tree-shaking

（1）什么是tree-shaking

编译时，根据不同的情况，引入不同的 API 。

（2）举个例子🌰

同样用在线网站来做一个演示，此时右边的 options 不做选择。左边框输入以下代码：

<div id="app">
  <span>monday</span>
  <span>monday</span>
  <span>monday</span>
  <span>{
  {msg}}</span>
</div>

此时右边的框的第一行显示如下：

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

再来演示另外一种情况。同样我们在左边框输入以下代码：

<div id="app">
  <span :id="msg"></span>
  <input v-model="msg">
</div>

此时右边的框的第一行显示如下：

import {
    createVNode as _createVNode, vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock } from "vue"

大家可以发现， vue3 在编译时，它不会一次性引入很多 API ，而是根据我们所需要的，我们要什么它就引入什么，我们不要的，它一概不会帮我们引入。这在某种程度上就优化了很多性能。

四、📚Vite为什么启动非常快

第一次看见 vite 是在 vue3 的官方文档里面，官方文档介绍： vite 是一个 web 开发构建工具，由于其使用 原生ES模块 导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行相应的命令，可以使用Vite快速构建 Vue 项目。

1、Vite是什么

vite 是一个前端的打包工具，是 vue 作者发起的一个项目；
vite 借助 vue 的影响力，发展较快，和 webpack 有着一定的竞争关系；
优势： vite 使得程序在开发环境下无需打包，且启动非常快速。

2、Vite为何启动快？

在开发环境下使用 ES6 Module ，无需打包，速度非常快；

在生产环境下使用 rollup 打包，并不会快很多。

3、ES Module演示

（1）基本使用

在 vue2 时，我们加载一个工程文件需要先转为 ES5 ，然后经过一些列的打包才能正式加载项目页面。而在 vue3 ，生产环境目前还没有做到，但是在开发环境下，通过 ES6 Module 的方式，无需打包，速度非常快。

下面我们讲演示集中 ES Module 在浏览器中的应用。

（2）ES Module在浏览器中的应用

1）基本演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module demo</title>
</head>
<body>
    <p>基本演示</p>

    <script type="module">
        import plus from './src/plus.js'

        const res = add(1, 2)
        console.log('add res', res)
    </script>

    <script type="module">
        import {
     plus, multi } from './src/math.js'
    </script>
</body>
</html>

我们在 <script> 标签下设置 type="module" ，之后就可以按照我们平常写 vue 程序一样，用 import 引入相应的文件。

2）引入外链

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module demo</title>
</head>
<body>
    <p>外链</p>

    <script type="module" src="./src/index.js"></script>
</body>
</html>

同时，也可以通过 src 的方式直接引入外部js文件。

3）远程引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module demo</title>
</head>
<body>
    <p>远程引用</p>

    <script type="module">
        import {
     createStore } from 'https://unpkg.com/redux@latest/es/redux.mjs'
        console.log('createStore', createStore)
    </script>
</body>
</html>

也可以直接引入 cdn 上的网址，即远程引用。

4）动态引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module demo</title>
</head>
<body>
    <p>动态引入</p>
    <button id="btn1">load1</button>
    <button id="btn2">load2</button>

    <script type="module">
        document.getElementById('btn1').addEventListener('click', async () => {
    
            const add = await import('./src/add.js')
            const res = add.default(1, 2)
            console.log('add res', res)
        })
        document.getElementById('btn2').addEventListener('click', async () => {
    
            const {
     add, multi } = await import('./src/math.js')
            console.log('add res', add(10, 20))
            console.log('multi res', multi(10, 20))
        })
    </script>
</body>
</html>

比如说我们要给两个 button 绑定两个事件，并且要让他们引入两个不同的 js 文件，那我们可以在执行点击后，在箭头函数里面进行 import 操作，按需引入，即想要让它引入哪个再引入哪个。

五、📙全局API修改

讲完 vite ，我们再来将一个 vue3 的重大改变，那就是全局 API 的修改。具体看下方。

1、Vue2全局API

在 Vue2 中，全局API经常会遇到以下问题：

在单元测试中，全局配置非常容易污染全局环境；
在不同的 apps 中，共享一份有不同配置的 Vue 对象，也变得非常困难。

Vue2入口文件写法：

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/*...*/)
Vue.mixin(/*...*/)
Vue.component(/*...*/)
Vue.directive(/*...*/)

Vue.prototype.customProperty = () = {
   }

new Vue({
   
    render: h => h(App)
}).$mount('#app')

2、Vue3全局API

（1）Vue3新写法

因此， Vue3 为了解决 Vue2 的问题，推出了新的写法。具体代码如下：

Vue3的新写法：

import {
    createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag =>
tag.startsWith('app-')
app.use(/*...*/)
app.mixin(/*...*/)
app.component(/*...*/)
app.directive(/*...*/)

app.config.globalProperties.customProperty = () = {
   }

app.mount('#app')

（2）常见配置更新

1）全局配置：Vue.config->app.config

config.productionTip被删除
config.ignoredElements改名为config.isCustomElement

2）全局注册类API

Vue.component -> app.component
Vue.directive -> app.directive

3）行为扩展类API

Vue.mixin -> app.mixin
Vue.use -> app.use

六、📮结束语

到这里，碎碎念一波！在学习过程中，要明白 watch 和 watchEffect 的不同之处，还要知道 setup 如何获取组件实例，这其中谈论的就是关于 this 的问题。

最后的最后，就是 Vue3 为什么比 Vue2 快，涉及到6个性能优化的方法，学有余力之余，尽量用在线网站演示一波。随之，紧跟着 vue3 的步伐， vite 也成为了很多开发人员在开发环境中使用的工具。还有就是，解决全局污染等各种问题， Vue3 对全局注册 API 做出的改变。

一波碎碎念结束， vue3 的进阶新特性讲解就结束啦！如有疑问或文章有误欢迎评论区留言或私信我交流~

关注公众号 星期一研究室 ，第一时间关注学习干货，更多有趣的专栏待你解锁~

如果这篇文章对你有用，记得 一键三连 再走哦~

我们下期见！🥂🥂🥂

卷不动也得继续学！紧跟vue3的步伐，再来get一波进阶新特性！

一、📗watch和watchEffect

1、watch和watchEffect的区别

2、举个例子

（1）wtach监听

（2）watchEffect监听

二、📘setup如何获取组件实例

（1）为什么需要获取组件实例

（2）举个例子

三、📒 Vue3为何比Vue2快

1、Proxy响应式

2、PatchFlag

（1）什么是PatchFlag

（2）举个例子🌰

3、hoistStatic

（1）什么是hoistStatic

（2）举个例子🌰

4、cacheHandler

（1）什么是cacheHandler

（2）举个例子🌰

5、SSR优化

（1）什么是SSR优化

（2）举个例子🌰

6、tree-shaking

（1）什么是tree-shaking

（2）举个例子🌰

四、📚Vite为什么启动非常快

1、Vite是什么

2、Vite为何启动快？

3、ES Module演示

（1）基本使用

（2）ES Module在浏览器中的应用

1）基本演示

2）引入外链

3）远程引用

4）动态引入

五、📙全局API修改

1、Vue2全局API

2、Vue3全局API

（1）Vue3新写法

（2）常见配置更新

六、📮结束语

热门文章

最新文章

相关电子书