vuejs3.0 从入门到精通——Vue3代码风格

Vue2、Vue3代码风格

一、导入方式

  Vue2 使用require导入方式，例如：

var Vue = require('vue')

  Vue3 支持 ES6 的 import 方法，例如：

import { createApp } from 'vue'

二、组件定义

  Vue2 使用Vue.component全局注册组件，例如：

Vue.component('my-component', {  
  // options...  
})

  Vue3 推荐使用setup方法来定义组件，例如：

import { ref, onMounted } from 'vue'  
  
export default {  
  setup() {  
    const someData = ref('Hello World')  
    onMounted(() => {  
      console.log(someData.value) // 'Hello World'  
    })  
    return { someData }  
  }  
}

三、生命周期钩子

  Vue2 使用created,mounted,updated,destroyed等生命周期钩子，例如：

export default {  
  created() {  
    console.log('Component created')  
  },  
  mounted() {  
    console.log('Component mounted')  
  },  
  updated() {  
    console.log('Component updated')  
  },  
  destroyed() {  
    console.log('Component destroyed')  
  }  
}

  Vue 3 使用onMounted,onUpdated,onUnmounted等生命周期钩子，例如:

export default {  
  setup() {  
    onMounted(() => {  
      console.log('Component mounted')  
    })  
    onUpdated(() => {  
      console.log('Component updated')  
    })  
    onUnmounted(() => {  
      console.log('Component destroyed')  
    })  
    return {}  
  }  
}

四、Vue3.x 升级做了向下兼容（Vue2.x）

4.1 Vue3 做了向下兼容, 也支持 Vue2 的写法（有些不行）

<template>
    首页 Home.vue
    <h1>{{ str }}</h1>
    <News></News>
</template>

<script lang="ts">
import News from '@/components/News.vue'
export default {
    data() {
        return {
            str: "你好xxxx"
        }
    },

    components: {
        News
    }
}
</script>　

4.2、Vue3 + Vue2

<template>
    首页 Home.vue
    <h1>{{ str }}</h1>
    <News></News>
</template>

<script lang="ts">
import News from '@/components/News.vue'
export default {
    setup() {
        let str = '首页'
        return {
            str
        }
    },
    components: {
        News
    }
}
</script>

4.3、纯 Vue3、setup 语法糖的写法

<template>
    首页 Home.vue
    <h1>{{ str }}</h1>
    <News></News>
</template>

<script setup lang="ts">
import News from '@/components/News.vue'

let str = '首页';
</script>