Vue3.0新特性

// 安装或者升级
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    
    // 保证 vue cli 版本在 4.5.0 以上
    vue --version
    
    // 创建项目
    vue create my-project

vue ui

{
      "eslint.validate": [
        "typescript"
      ]
    }

<template>
      <h1>{{count}}</h1>
      <h1>{{double}}</h1>
      <button @click="increase">+1</button>
    </template>
    
    import { ref } from "vue"
    
    setup() {
      // ref 是一个函数，它接受一个参数，返回的就是一个神奇的 响应式对象 。我们初始化的这个 0 作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的相应。
      const count = ref(0)
      const double = computed(() => {
        return count.value * 2
      })
      const increase = () => {
        count.value++
      }
      return {
        count,
        increase,
        double
      }
    }

import { ref, computed, reactive, toRefs } from 'vue'
    
    interface DataProps {
      count: number;
      double: number;
      increase: () => void;
    }
    
    setup() {
      const data: DataProps  = reactive({
        count: 0,
        increase: () => { data.count++},
        double: computed(() => data.count * 2)
      })
      const refData = toRefs(data)
      return {
        ...refData
      }
    }

setup() {
      onMounted(() => {
        console.log('mounted')
      })
      onUpdated(() => {
        console.log('updated')
      })
      onRenderTriggered((event) => {
        console.log(event)
      })
    }

// watch 简单应用
    watch(data, () => {
      document.title = 'updated ' + data.count
    })
    // watch 的两个参数，代表新的值和旧的值
    watch(refData.count, (newValue, oldValue) => {
      console.log('old', oldValue)
      console.log('new', newValue)
      document.title = 'updated ' + data.count
    })
    
    // watch 多个值，返回的也是多个值的数组
    watch([greetings, data], (newValue, oldValue) => {
      console.log('old', oldValue)
      console.log('new', newValue)
      document.title = 'updated' + greetings.value + data.count
    })
    
    // 使用 getter 的写法 watch reactive 对象中的一项
    watch([greetings, () => data.count], (newValue, oldValue) => {
      console.log('old', oldValue)
      console.log('new', newValue)
      document.title = 'updated' + greetings.value + data.count
    })

// 在单组件内添加对应逻辑
    const x = ref(0)
    const y = ref(0)
    const updateMouse = (e: MouseEvent) => {
      x.value = e.pageX
      y.value = e.pageY
    }
    onMounted(() => {
      document.addEventListener('click', updateMouse)
    })
    onUnmounted(() => {
      document.removeEventListener('click', updateMouse)
    })
    
    // 将组件内逻辑抽象成可复用的函数
    function useMouseTracker() {
      // const positions = reactive({
      //   x: 0,
      //   y: 0
      // })
      const x = ref(0)
      const y = ref(0)
      const updatePosition = (event: MouseEvent) => {
        x.value = event.clientX
        y.value = event.clientY 
      }
      onMounted(() => {
        document.addEventListener('click', updatePosition)
      })
      onUnmounted(() => {
        document.removeEventListener('click', updatePosition)
      })
      return { x, y }
    }
    
    export default useMouseTracker
    

// 安装 axios 注意它是自带 type 文件的，所以我们不需要给它另外安装 typescript 的定义文件
    npm install axios --save

import { ref } from 'vue'
    import axios from 'axios'
    // 添加一个参数作为要使用的 地址
    const useURLLoader = (url: string) => {
    // 声明几个ref，代表不同的状态和结果
      const result = ref(null)
      const loading = ref(true)
      const loaded = ref(false)
      const error = ref(null)
    
    // 发送异步请求，获得data
    // 由于 axios 都有定义，所以rawData 可以轻松知道其类型
      axios.get(url).then((rawData) => {
        loading.value = false
        loaded.value = true
        result.value = rawData.data
      }).catch((e) => {
        error.value = e
      })
      // 将这些ref 一一返回
      return {
        result,
        loading,
        error,
        loaded
      }
    }
    
    
    export default useURLLoader
    

// 使用 urlLoader 展示狗狗图片
    const { result, loading, loaded } = useURLLoader('https://dog.ceo/api/breeds/image/random')
    
    ...
    <h1 v-if="loading">Loading!...</h1>
    <img v-if="loaded" :src="result.message" >
    

// 为函数添加泛型
    function useURLLoader<T>(url: string) {
      const result = ref<T | null>(null)

// 在应用中的使用，可以定义不同的数据类型
    interface DogResult {
      message: string;
      status: string;
    }
    interface CatResult {
      id: string;
      url: string;
      width: number;
      height: number;
    }
    
    // 免费猫图片的 API  https://api.thecatapi.com/v1/images/search?limit=1
    const { result, loading, loaded } = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')

<template>
    // vue3 新添加了一个默认的组件就叫 Teleport，我们可以拿过来直接使用，它上面有一个 to 的属性，它接受一个css query selector 作为参数，这就是代表要把这个组件渲染到哪个 dom 元素中
      <teleport to="#modal">
        <div id="center">
          <h1>this is a modal</h1>
        </div>
      </teleport>
    </template>
    <style>
      #center {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
      }
    </style>

<template>
    <teleport to="#modal">
      <div id="center" v-if="isOpen">
        <h2><slot>this is a modal</slot></h2>
        <button @click="buttonClick">Close</button>
      </div>
    </teleport>
    </template>
    <script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
      props: {
        isOpen: Boolean,
      },
      emits: {
        'close-modal': null
      },
      setup(props, context) {
        const buttonClick = () => {
          context.emit('close-modal')
        }
        return {
          buttonClick
        }
      }
    })
    </script>
    <style>
      #center {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
      }
    </style>

const modalIsOpen = ref(false)
    const openModal = () => {
      modalIsOpen.value = true
    }
    const onModalClose = () => {
      modalIsOpen.value = false
    }
    
    <button @click="openModal">Open Modal</button><br/>
    <modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
    

<template>
      <h1>{{result}}</h1>
    </template>
    <script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
      setup() {
        return new Promise((resolve) => {
          setTimeout(() => {
            return resolve({
              result: 42
            })
          }, 3000)
        })
      }
    })
    </script>

<Suspense>
      <template #default>
        <async-show />
      </template>
      <template #fallback>
        <h1>Loading !...</h1>
      </template>
    </Suspense>

<template>
      <img :src="result && result.message">
    </template>
    
    <script lang="ts">
    import axios from 'axios'
    import { defineComponent } from 'vue'
    export default defineComponent({
      async setup() {
        const rawData = await axios.get('https://dog.ceo/api/breeds/image')
        return {
          result: rawData.data
        }
      }
    })
    </script>

<Suspense>
      <template #default>
        <async-show />
        <dog-show />
      </template>
      <template #fallback>
        <h1>Loading !...</h1>
      </template>
    </Suspense>

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')
    

import { createApp } from 'vue'
    import App from './App.vue'
    
    const app = createApp(App)
    // 这个时候 app 就是一个 App 的实例，现在再设置任何的配置是在不同的 app 实例上面的，不会像vue2 一样发生任何的冲突。
    
    app.config.isCustomElement = tag => tag.startsWith('app-')
    app.use(/* ... */)
    app.mixin(/* ... */)
    app.component(/* ... */)
    app.directive(/* ... */)
    
    app.config.globalProperties.customProperty = () => {}
    
    // 当配置结束以后，我们再把 App 使用 mount 方法挂载到固定的 DOM 的节点上。
    app.mount(App, '#app')