3

Vue3的改变有哪些？

 3 years ago
source link: https://raycoder.me/p/vue3-design/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端 Vue 2 mins

Vue3的改变有哪些？

19-07-20 / 839 Words

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

咕了这么久，我干了什么？

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

学 了 什 么（活 到 老 学 到 老）

哦，JS、Vue和React。

为什么关注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的代码被分散到了许多选项中：data，methods，computed，watch，如Vue官方图：

20200719190119.png

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
  }
}

20200719191506.png

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK