vue3:我才出生一年，就已经这么强了？

vue3

官网
vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

vue3与vue2的区别，不同但相同

1. 响应式原理
   vue2: 响应式原理采用 Object.defineProperties 监听对象的getter与setter
   vue3: pxoy代理的方式监听对象
2. 启动方式

//vue3

//创建一个app实例
var app = createApp(App);
//创建APP实例  使用store  使用router  挂载#app节点
app.use(store).use(router).mount('#app')

//vue2

new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

3. 全局方法定义

//vue3

//创建一个app实例
var app = createApp(App);
//全局挂载方式
app.config.globalProperties.$http = axios;
app.config.globalProperties.$say = function(msg="我喜欢学习"){alert(msg)};

//vue2
//全局挂载方式
Vue.prototype.$http = axios;

4. template 根组件

   1. Vue2有且只有一个根组件,及vue文件中template里只能有一个直接子元素
   2. Vue3可以有一个或者多个根组件，但是依旧不能为空

5. 生命周期

   1. vue2
      创建前后 beforeCreate ,created
      挂载前后 beforeMount mounted
      更新前后beforeUpdate,updated
      销毁前后beforeDestroy,destroyed
   2. vue3
      创建前后 beforeCreate ,created
      挂载前后 beforeMount mounted
      更新前后beforeUpdate,updated
      卸载切换 beforeUnmount,unmounted
      ps: vue2和vue3的生命周期差别不大，唯一的区别就是vue2的最后是销毁前后，vue3的最后是卸载切换

vue3的神器 setup组合式api

文档

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
3. 他更接近原生代码，更好理解
4. setup里可以写几乎任何比如mouted的api，不用分开写了

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>