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

Vue2、Vue3代码风格

一、导入方式

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

?

1	var Vue = require('vue')

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

?

1	import { createApp } from 'vue'

二、组件定义

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

?

1 2 3

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

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

?

1 2 3 4 5 6 7 8 9 10 11

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等生命周期钩子，例如：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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等生命周期钩子，例如:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 的写法（有些不行）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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 语法糖的写法

?

1 2 3 4 5 6 7 8 9 10 11

<template>     首页 Home.vue     <h1>{{ str }}</h1>     <News></News> </template>   <script setup lang="ts"> import News from '@/components/News.vue'   let str = '首页'; </script>