vue3 相较于vue2的改进

1. 性能提升：Vue3引入了新的虚拟DOM算法，使得渲染效率更高，特别是在大型应用中表现尤为突出。
2. Composition API：使得逻辑复用和组织更加灵活，取代了Vue2中的Options API。
3. TypeScript支持：Vue3对ts的原生支持更加完善，提供更好的类型推断和开发体验。
4. 更小的体积：Vue3的核心库相比Vue2更小，同时提供的运行性能。
5. Fragments和Teleport：允许多个根节点和跨DOM节点传送组件内容。

组合式API-响应式

组合式API的关键字

ref函数：基本类型的响应式数据：number\string\boolean
reactive: 引用类型的响应式数据： Array\Object

const name = ref('飞哥')
const result = reactive({
    name: '飞哥'
})

标准写法示例：

<template>
  <div class="combinatorial">
    <h2 class="title">组合式Api</h2>
    <div class="content">
      {{ message }}
    </div>
  </div>
</template>
<script>
/**
标准的setup()写法可以同时兼容 选项式和组合式的API写法；但是！不推荐，合体写法可读性差，也不好维护。
**/
import {ref} from 'vue'
export default {
  setup () {
    const message = ref('Combinatorial')
    return { message }
  }
}
</script>
<style scoped lang="scss">
</style>

简洁写法示例：

<template>
  <div class="combinatorial">
    <h2 class="title">组合式Api</h2>
    <div class="content">
      {{ message }}
    </div>
  </div>
</template>
<script setup>
  import {ref} from 'vue'
  const message = ref('Combinatorial')
  defineExpose({
    message
  })
</script>
<style scoped lang="scss">
</style>

事件处理

推荐组合式的代码，因为维护方便、可读性高！

事件-组合式Api:

<template>
  <div>
    <h3>事件-组合式Api:</h3>
    <button @click="increment">点击我</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  function increment() {
    count.value++
  }
</script>

事件-选项式Api:

<template>
  <div>
    <h3>事件-选项式Api:</h3>
    <button @click="increment">点击我</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

监听器

推荐组合式的代码，因为维护方便、可读性高！
组合式的watch的有点：更灵活，也可以独立函数处理watch多处监听！

watch 独立

import { watch } from 'vue'
function countWatch (count) {
    watch(count, (new, old) => {
        console.log(new, old)
    })
}
export default {
    countWatch
}

监听器-组合式Api:

<template>
  <div>
    <h3>事件-组合式Api:</h3>
    <button @click="increment">点击我</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  function increment() {
    count.value++
  }
  watch(count, (newVal, oldVal) => {
    console.log('count 变化了', newVal, oldVal)
  })
</script>

监听器-选项式Api:

<template>
  <div>
    <h3>事件-选项式Api:</h3>
    <button @click="increment">点击我</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    watch: {
      count(newVal, oldVal) {
        console.log('count 变化了', newVal, oldVal)
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

生命周期

每个 Vue 组件都有自己的生命周期，从创建、更新、卸载都有钩子回调函数给到使用，vue3 组合式的钩子更加灵活，可以多处灵活使用，用到哪个钩子函数导入钩子函数即可；

vue2 生命周期-选项式Api:

<script>
  export default {
    created() {
      console.log('created 钩子函数被调用')
    },
    mounted() {
      console.log('mounted 钩子函数被调用')
    },
    beforeUpdate() {
      console.log('beforeUpdate 钩子函数被调用')
    },
    updated() {
      console.log('updated 钩子函数被调用')
    },
    beforeUnmount() {
      console.log('beforeUnmount 钩子函数被调用')
    }
  }
</script>

vue3 生命周期-组合式Api:

<script setup>
  import { onBeforeMount, onMounted } from 'vue'
  onBeforeMount(() => {
    console.log('onBeforeMount 钩子函数被调用')
  })
  onMounted(() => {
    console.log('onMounted 钩子函数被调用1')
  })
  onMounted(() => {// 可多处重复使用执行
    console.log('onMounted 钩子函数被调用2')
  })
</script>

模板引用

可通过 ref、useTemplateRef获取ref对象

vue2 选项式

<template>
  <div>
    <h3>模板引用ref - 选项式:</h3>
    <p ref="pppp">修改之前-选项式</p>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.$refs.pppp.innerHTML = '修改之后-选项式'
    }
  }
</script>

vue3 组合式

<template>
  <div>
    <h3>模板引用ref-组合式Api:</h3>
    <p ref="pppp">修改之前-组合式</p>
  </div>
</template>
<script setup>
  import { ref, useTemplateRef, onMounted } from 'vue'
  // 方法一： ref 方式
  // const pppp = ref(null)
  // 方法二： useTemplateRef 方式
  const pppp2 = useTemplateRef('pppp')
  onMounted(() => {
    pppp.value.innerHTML = '修改之后-组合式'
  })
</script>

属性Props

vue2

<template>
  <div>
    <h3>属性props - 选项式:</h3>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    props: {
      message: {
        type: String,
        default: '修改之前-选项式'
      }
    }
  }
</script>

vue3组合式

定义接口：defineProps()

<template>
  <div>
    <h3>属性props-组合式Api:</h3>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
  const props = defineProps({
    message: {
      type: String,
      default: '修改之前-组合式'
    }
  })
  console.log(props.message)
</script>

事件Emit

vue 2

<template>
  <div>
    <h3>事件Emit - 选项式:</h3>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>
<script>
  export default {
    methods: {
      emitEvent() {
        this.$emit('customEvent', '你好，选项式Api')
      }
    }
  }
</script>

vue3

关键字：emitEvent， 定义Emit事件，和vue2还是区别明显

<template>
  <div>
    <h3>事件Emit - 组合式Api:</h3>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>
<script setup>
  // 关键字defineEmits 定义事件
  const emit = defineEmits(['customEvent'])
  const emitEvent = () => {
    emit('customEvent', '你好，组合式Api')
  }
</script>

自定义指令

vue 2

<template>
  <div>
    <h3>指令 - 选项式:</h3>
    <div v-highlight="color">
      这是一个指令示例
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        color: 'red'
      }
    },
    directives: {
      highlight: {
        mounted(el, binding) {
          el.style.backgroundColor = binding.value
        }
      }
    }
  }
</script>

vue3

<template>
  <div>
    <h3>指令 - 组合式Api:</h3>
    <div v-highlight="color">
      这是一个指令示例
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const color = ref('red')
  const vHighlight = {
    mounted(el, binding) {
      el.style.backgroundColor = binding.value
    }
  }
</script>

全局指令示例

import { createApp } from 'vue'
const app = createApp(App)
// 注册全局指令
app.directive('blue', {
  mounted(el) {
    el.style.backgroundColor = 'blue'
  }
})
app.mount('#app')

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode) {}
}