前端 Vue 2 mins

Vue3的改变有哪些?

19-07-20 / 839 Words

写作不易,资瓷一下呗!本文首发于个人博客:https://raycoder.me

咕了这么久,我干了什么?

呼,俺前些天在准备期末考试,终于放假了~~~😍😍😍🎉🎉🎉可以更新一下博客了!

学 了 什 么(活 到 老 学 到 老)

哦,JSVueReact

为什么关注Vue3

不巧的是,我刚刚掌握Vue2的时候,Vue3.0RC🤢🤔

正文开始

Vue3英文文档:https://v3.vuejs.org

Vue3重写原因?

  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。

  • Composition API:组合API

  • Better TypeScript support:更优秀的Ts支持

  • 更好的Virtual DOM Diff算法

  • 代码的聚集性

Composition API:组合API

Vue 2.x中,浏览器端和webpack都可以使用一个Vue对象(import Vue from "vue")。

而在Vue3中(webpack环境),你可以通过从Vue中导入所需功能来使用,有助于减小代码体积)

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

参阅:https://composition-api.vuejs.org/

代码的聚集性

使用组件时,一个HTML节点可能会与多个选项相关:

<template>
	<input v-model="inputVal" @blur="handleBlur" :style="inputStyle"></input>
</template>

<script>
    prefixCls = `test-input`
    export default {
        data () {
            return {
                inputVal: '',
                prefixCls: prefixCls
                // ...
            }
        },
        methods: {
            handleBlur () {
                // Handle Blur
            }
            // ...
        },
        computed: {
            inputStyle () {
                return [`${prefixCls}`]
            },
            // ...
        },
        watch: {
            inputVal () {
                handleInput()
            },
            // ...
        },
        // ...
    }
</script>

<style>...</style>

如是,一个input的代码被分散到了许多选项中:datamethodscomputedwatch,如Vue官方图:

Vue官方示例如下:

function useCreateFolder (openFolder) {
  // originally data properties
  const showNewFolder = ref(false)
  const newFolderName = ref('')

  // originally computed property
  const newFolderValid = computed(() => isValidMultiName(newFolderName.value))

  // originally a method
  async function createFolder () {
    if (!newFolderValid.value) return
    const result = await mutate({
      mutation: FOLDER_CREATE,
      variables: {
        name: newFolderName.value
      }
    })
    openFolder(result.data.folderCreate.path)
    newFolderName.value = ''
    showNewFolder.value = false
  }

  return {
    showNewFolder,
    newFolderName,
    newFolderValid,
    createFolder
  }
}


Q.是不是Vue3就不能使用选项API了?

A.可以用,这是两个并存的API。

推荐视频:https://www.bilibili.com/video/BV1ke411W7WB/?spm_id_from=333.788.videocard.6